Comment mettre en œuvre un système de vote en ligne en temps réel à l'aide de JavaScript et WebSocket-js tutoriel-php.cn

Comment mettre en œuvre un système de vote en ligne en temps réel à l'aide de JavaScript et WebSocket

PHPz

Libérer： 2023-12-18 16:27:39

original

1134 Les gens l'ont consulté

Comment mettre en œuvre un système de vote en ligne en temps réel à laide de JavaScript et WebSocket

Comment utiliser JavaScript et WebSocket pour mettre en œuvre un système de vote en ligne en temps réel

Introduction :
Avec le développement rapide d'Internet, les systèmes de vote en ligne en temps réel sont devenus une forme très courante dans diverses activités et élections. L'utilisation des technologies JavaScript et WebSocket pour mettre en œuvre un système de vote en ligne en temps réel présente les avantages de la flexibilité et de la facilité d'utilisation. Cet article présentera en détail comment utiliser JavaScript et WebSocket pour implémenter un système de vote en ligne simple en temps réel et fournira des exemples de code correspondants.

1. Architecture de base du système de vote en ligne en temps réel
L'architecture de base du système de vote en ligne en temps réel comprend généralement les parties suivantes :

Page HTML frontale : une page utilisée pour afficher les options de vote et mettre à jour les résultats du vote. en temps réel.
Serveur Backend : utilisé pour traiter les demandes de vote envoyées par les clients et envoyer les résultats du vote à tous les clients connectés en temps réel.
Connexion WebSocket : utilisée pour établir une communication bidirectionnelle en temps réel et mettre à jour la page à temps lorsque les votes changent.

2. Conception et mise en œuvre d'une page HTML frontale

Mise en page :
Tout d'abord, nous devons concevoir une mise en page simple qui contient des options de vote et une zone d'affichage pour les résultats du vote en temps réel. La mise en page peut être implémentée en utilisant HTML et CSS, comme indiqué ci-dessous :

<!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>

Copier après la connexion

Code JavaScript :
Le code HTML ci-dessus contient du code JavaScript, qui est principalement responsable de la mise en œuvre de la fonction de vote et de la communication avec le serveur back-end. Nous devons écrire un fichier JavaScript nommé websocket.js pour gérer la communication avec le serveur WebSocket, comme indiqué ci-dessous :

// 创建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));
}

Copier après la connexion

3. Construction et implémentation du serveur back-end
Le serveur back-end est construit à l'aide de Node.js et du Bibliothèque WebSocket, l'exemple de code est le suivant :

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服务器已启动');

Copier après la connexion

4. Exécutez et testez

Installez Node.js et la bibliothèque WebSocket :
Avant d'exécuter le code ci-dessus, vous devez installer Node.js et installer la bibliothèque WebSocket via npm. Ouvrez le terminal et exécutez la commande suivante :
```
$ npm install websocket
```
Copier après la connexion
Démarrez le serveur backend :
Dans le terminal, entrez le répertoire où le code du serveur backend ci-dessus est enregistré et exécutez la commande suivante pour démarrer le serveur backend :
```
$ node server.js
```
Copier après la connexion
Ouvrez la page frontale dans le navigateur :
Ouvrez le fichier contenant la page HTML frontale ci-dessus dans votre navigateur pour commencer à voter.

Résumé :
Grâce aux étapes ci-dessus, nous avons réussi à mettre en œuvre un système de vote en ligne simple en temps réel utilisant JavaScript et WebSocket. Sur la base de ce système, nous pouvons étendre davantage les fonctions et mettre en œuvre des systèmes de vote plus complexes. En utilisant de manière flexible les technologies JavaScript et WebSocket, nous pouvons créer diverses applications en temps réel sur Internet.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!