Bagaimana untuk melaksanakan sistem pengundian dalam talian masa nyata menggunakan JavaScript dan WebSocket-tutorial js-php.cn

Bagaimana untuk melaksanakan sistem pengundian dalam talian masa nyata menggunakan JavaScript dan WebSocket

PHPz

Lepaskan： 2023-12-18 16:27:39

asal

1122 orang telah melayarinya

Bagaimana untuk melaksanakan sistem pengundian dalam talian masa nyata menggunakan JavaScript dan WebSocket

Cara menggunakan JavaScript dan WebSocket untuk melaksanakan sistem pengundian dalam talian masa nyata

Pengenalan:
Dengan perkembangan pesat Internet, sistem pengundian dalam talian masa nyata telah menjadi satu bentuk yang sangat biasa dalam pelbagai aktiviti dan pilihan raya. Menggunakan teknologi JavaScript dan WebSocket untuk melaksanakan sistem pengundian dalam talian masa nyata mempunyai kelebihan fleksibiliti dan kemudahan penggunaan. Artikel ini akan memperkenalkan secara terperinci cara menggunakan JavaScript dan WebSocket untuk melaksanakan sistem pengundian dalam talian masa nyata yang mudah dan menyediakan contoh kod yang sepadan.

1. Seni bina asas sistem pengundian dalam talian masa nyata
Seni bina asas sistem pengundian dalam talian masa nyata secara amnya merangkumi bahagian berikut:

Halaman HTML bahagian hadapan: halaman yang digunakan untuk memaparkan pilihan pengundian dan mengemas kini keputusan pengundian dalam masa nyata.
Pelayan belakang: digunakan untuk memproses permintaan undian yang dihantar oleh pelanggan dan menghantar keputusan undian kepada semua pelanggan yang berkaitan dalam masa nyata.
Sambungan WebSocket: digunakan untuk mencapai komunikasi dua hala masa nyata dan mengemas kini halaman dalam masa apabila undian berubah. . Reka letak halaman boleh dilaksanakan menggunakan HTML dan CSS, seperti yang ditunjukkan di bawah:

<!DOCTYPE html>
<html>
<head>
  <title>实时在线投票系统</title>
  <style>
    /* 页面布局样式 */
    /* ... */
  </style>
</head>
<body>
  <h1>实时在线投票系统</h1>
  <div id="options">
    <h2>请选择您的投票选项：</h2>
    <ul>
      <li><button onclick="vote(1)">选项1</button></li>
      <li><button onclick="vote(2)">选项2</button></li>
      <li><button onclick="vote(3)">选项3</button></li>
    </ul>
  </div>
  <div id="result">
    <h2>当前投票结果：</h2>
    <p>选项1： <span id="count1">0</span> 票</p>
    <p>选项2： <span id="count2">0</span> 票</p>
    <p>选项3： <span id="count3">0</span> 票</p>
  </div>
  
  <script src="websocket.js"></script>
  <script>
    // 实时更新投票结果
    function updateResult(counts) {
      document.getElementById('count1').innerText = counts[1];
      document.getElementById('count2').innerText = counts[2];
      document.getElementById('count3').innerText = counts[3];
    }
  
    // 发送投票请求
    function vote(option) {
      // 发送投票请求给后端
      sendVoteRequest(option);
    }
  </script>
</body>
</html>

Salin selepas log masuk

Kod JavaScript:

untuk mengendalikan komunikasi dengan pelayan WebSocket, seperti yang ditunjukkan di bawah:

// 创建WebSocket连接
const socket = new WebSocket('ws://localhost:8000');

// 连接建立时触发
socket.onopen = function(event) {
  console.log('WebSocket连接已建立');
};

// 接收投票结果
socket.onmessage = function(event) {
  const counts = JSON.parse(event.data);
  updateResult(counts);
};

// 连接关闭时触发
socket.onclose = function(event) {
  console.log('WebSocket连接已关闭');
};

// 向服务器发送投票请求
function sendVoteRequest(option) {
  const message = {
    type: 'vote',
    option: option
  };
  socket.send(JSON.stringify(message));
}

Salin selepas log masuk

3. Pembinaan dan pelaksanaan pelayan bahagian belakang

const WebSocket = require('ws');

// 创建WebSocket服务器
const wss = new WebSocket.Server({ port: 8000 });

// 记录投票结果
let counts = {
  1: 0,
  2: 0,
  3: 0
};

// 处理客户端连接请求
wss.on('connection', function(ws) {
  console.log('客户端已连接');

  // 发送当前投票结果给客户端
  ws.send(JSON.stringify(counts));

  // 处理客户端发送的消息
  ws.on('message', function(message) {
    const data = JSON.parse(message);

    // 根据投票选项更新投票结果
    if (data.type === 'vote') {
      counts[data.option] += 1;

      // 发送更新后的投票结果给所有连接的客户端
      wss.clients.forEach(function(client) {
        client.send(JSON.stringify(counts));
      });
    }
  });

  // 连接关闭时触发
  ws.on('close', function() {
    console.log('客户端已断开连接');
  });
});

console.log('WebSocket服务器已启动');

Salin selepas log masuk

4. Jalankan dan uji websocket.js

Pasang perpustakaan Node.js dan WebSocket:
Sebelum menjalankan kod di atas, anda perlu memasang Node.js dan memasang perpustakaan WebSocket melalui npm. Buka terminal dan laksanakan Perintah berikut:

$ npm install websocket

Salin selepas log masuk

Dalam terminal, masukkan direktori tempat kod pelayan bahagian belakang di atas disimpan, dan laksanakan arahan berikut untuk memulakan pelayan bahagian belakang:
```
$ node server.js
```
Salin selepas log masuk
Buka halaman hadapan dalam penyemak imbas: Buka fail yang mengandungi halaman HTML bahagian hadapan di atas dalam penyemak imbas anda untuk mula mengundi.
Ringkasan:
Melalui langkah di atas, kami berjaya melaksanakan sistem pengundian dalam talian masa nyata yang mudah menggunakan JavaScript dan WebSocket. Berdasarkan sistem ini, kita boleh mengembangkan lagi fungsi dan melaksanakan sistem pengundian yang lebih kompleks. Dengan menggunakan teknologi JavaScript dan WebSocket secara fleksibel, kami boleh membina pelbagai aplikasi masa nyata di Internet.

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan sistem pengundian dalam talian masa nyata menggunakan JavaScript dan WebSocket. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!