So implementieren Sie ein Echtzeit-Online-Abstimmungssystem mit JavaScript und WebSocket-js-Tutorial-php.cn

So implementieren Sie ein Echtzeit-Online-Abstimmungssystem mit JavaScript und WebSocket

PHPz

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

Original

1177 Leute haben es durchsucht

So implementieren Sie ein Echtzeit-Online-Abstimmungssystem mit JavaScript und WebSocket

So implementieren Sie mit JavaScript und WebSocket ein Echtzeit-Online-Abstimmungssystem

Einführung:
Mit der rasanten Entwicklung des Internets sind Echtzeit-Online-Abstimmungssysteme bei verschiedenen Aktivitäten und Wahlen zu einer sehr verbreiteten Form geworden. Die Verwendung von JavaScript und WebSocket-Technologie zur Implementierung eines Echtzeit-Online-Abstimmungssystems bietet die Vorteile von Flexibilität und Benutzerfreundlichkeit. In diesem Artikel wird detailliert beschrieben, wie Sie mit JavaScript und WebSocket ein einfaches Echtzeit-Online-Abstimmungssystem implementieren und entsprechende Codebeispiele bereitstellen.

1. Grundarchitektur des Echtzeit-Online-Abstimmungssystems
Die Grundarchitektur des Echtzeit-Online-Abstimmungssystems umfasst im Allgemeinen die folgenden Teile:

Front-End-HTML-Seite: eine Seite, die zur Anzeige von Abstimmungsoptionen und zur Aktualisierung der Abstimmungsergebnisse verwendet wird in Echtzeit.
Backend-Server: Wird verwendet, um von Kunden gesendete Abstimmungsanfragen zu verarbeiten und Abstimmungsergebnisse in Echtzeit an alle verbundenen Clients zu senden.
WebSocket-Verbindung: Wird verwendet, um eine bidirektionale Kommunikation in Echtzeit zu erreichen und die Seite rechtzeitig zu aktualisieren, wenn sich die Stimmen ändern.

2. Design und Implementierung der Front-End-HTML-Seite

Seitenlayout:
Zuerst müssen wir ein einfaches Seitenlayout entwerfen, das Abstimmungsoptionen und einen Anzeigebereich für Echtzeit-Abstimmungsergebnisse enthält. Das Seitenlayout kann mit HTML und CSS implementiert werden, wie unten gezeigt:

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

Nach dem Login kopieren

JavaScript-Code:
Der obige HTML-Code enthält etwas JavaScript-Code, der hauptsächlich für die Implementierung der Abstimmungsfunktion und die Kommunikation mit dem Back-End-Server verantwortlich ist. Wir müssen eine JavaScript-Datei mit dem Namen websocket.js schreiben, um die Kommunikation mit dem WebSocket-Server abzuwickeln, wie unten gezeigt:

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

Nach dem Login kopieren

3. Aufbau und Implementierung des Back-End-Servers
Der Back-End-Server wird mit Node.js und dem erstellt WebSocket-Bibliothek, das Codebeispiel lautet wie folgt:

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

Nach dem Login kopieren

4. Ausführen und testen

Installieren Sie Node.js und die WebSocket-Bibliothek:
Bevor Sie den obigen Code ausführen, müssen Sie Node.js installieren und die WebSocket-Bibliothek über installieren npm. Öffnen Sie das Terminal und führen Sie den folgenden Befehl aus:
```
$ npm install websocket
```
Nach dem Login kopieren
Starten Sie den Backend-Server:
Geben Sie im Terminal das Verzeichnis ein, in dem der obige Backend-Servercode gespeichert ist, und führen Sie den folgenden Befehl aus, um den Backend-Server zu starten:
```
$ node server.js
```
Nach dem Login kopieren
Öffnen Sie die Frontend-Seite im Browser:
Öffnen Sie die Datei mit der obigen Frontend-HTML-Seite in Ihrem Browser, um mit der Abstimmung zu beginnen.

Zusammenfassung:
Durch die oben genannten Schritte haben wir erfolgreich ein einfaches Echtzeit-Online-Abstimmungssystem mit JavaScript und WebSocket implementiert. Basierend auf diesem System können wir die Funktionen weiter ausbauen und komplexere Abstimmungssysteme implementieren. Durch den flexiblen Einsatz von JavaScript- und WebSocket-Technologien können wir verschiedene Echtzeitanwendungen im Internet erstellen.

Das obige ist der detaillierte Inhalt vonSo implementieren Sie ein Echtzeit-Online-Abstimmungssystem mit JavaScript und WebSocket. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!