Web-Frontend
js-Tutorial
So implementieren Sie ein Echtzeit-Online-Abstimmungssystem mit JavaScript und WebSocket
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 id="实时在线投票系统">实时在线投票系统</h1>
<div id="options">
<h2 id="请选择您的投票选项">请选择您的投票选项：</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 id="当前投票结果">当前投票结果：</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>- 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 Namenwebsocket.jsschreiben, 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));
} 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服务器已启动');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 kopierenStarten 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!
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
1376
52
Die Kombination von Java und WebSocket: So erreichen Sie Echtzeit-Videostreaming
Dec 17, 2023 pm 05:50 PM
Mit der kontinuierlichen Weiterentwicklung der Internettechnologie ist Echtzeit-Videostreaming zu einer wichtigen Anwendung im Internetbereich geworden. Zu den Schlüsseltechnologien für Echtzeit-Videostreaming gehören WebSocket und Java. In diesem Artikel wird die Verwendung von WebSocket und Java zur Implementierung der Echtzeit-Video-Streaming-Wiedergabe vorgestellt und relevante Codebeispiele bereitgestellt. 1. Was ist WebSocket? WebSocket ist ein Protokoll für die Vollduplex-Kommunikation über eine einzelne TCP-Verbindung. Es wird im Web verwendet
So erreichen Sie Echtzeitkommunikation mit PHP und WebSocket
Dec 17, 2023 pm 10:24 PM
Mit der kontinuierlichen Weiterentwicklung der Internettechnologie ist Echtzeitkommunikation zu einem unverzichtbaren Bestandteil des täglichen Lebens geworden. Mit der WebSockets-Technologie kann eine effiziente Echtzeitkommunikation mit geringer Latenz erreicht werden, und PHP als eine der am weitesten verbreiteten Entwicklungssprachen im Internetbereich bietet auch entsprechende WebSocket-Unterstützung. In diesem Artikel wird erläutert, wie Sie mithilfe von PHP und WebSocket eine Echtzeitkommunikation erreichen, und es werden spezifische Codebeispiele bereitgestellt. 1. Was ist WebSocket? WebSocket ist ein Single
WebSocket und JavaScript: Schlüsseltechnologien zur Implementierung von Echtzeitüberwachungssystemen
Dec 17, 2023 pm 05:30 PM
WebSocket und JavaScript: Schlüsseltechnologien zur Realisierung von Echtzeit-Überwachungssystemen Einführung: Mit der rasanten Entwicklung der Internet-Technologie wurden Echtzeit-Überwachungssysteme in verschiedenen Bereichen weit verbreitet eingesetzt. Eine der Schlüsseltechnologien zur Erzielung einer Echtzeitüberwachung ist die Kombination von WebSocket und JavaScript. In diesem Artikel wird die Anwendung von WebSocket und JavaScript in Echtzeitüberwachungssystemen vorgestellt, Codebeispiele gegeben und deren Implementierungsprinzipien ausführlich erläutert. 1. WebSocket-Technologie
PHP und WebSocket: Best Practices für die Echtzeit-Datenübertragung
Dec 18, 2023 pm 02:10 PM
PHP und WebSocket: Best-Practice-Methoden für die Echtzeit-Datenübertragung Einführung: Bei der Entwicklung von Webanwendungen ist die Echtzeit-Datenübertragung eine sehr wichtige technische Anforderung. Das herkömmliche HTTP-Protokoll ist ein Anforderungs-Antwort-Modellprotokoll und kann keine Datenübertragung in Echtzeit effektiv erreichen. Um den Anforderungen der Echtzeit-Datenübertragung gerecht zu werden, wurde das WebSocket-Protokoll entwickelt. WebSocket ist ein Vollduplex-Kommunikationsprotokoll, das eine Möglichkeit zur Vollduplex-Kommunikation über eine einzelne TCP-Verbindung bietet. Im Vergleich zu H
Wie implementiert Java Websocket die Online-Whiteboard-Funktion?
Dec 17, 2023 pm 10:58 PM
Wie implementiert JavaWebsocket die Online-Whiteboard-Funktion? Im modernen Internetzeitalter legen die Menschen immer mehr Wert auf das Erlebnis der Zusammenarbeit und Interaktion in Echtzeit. Online-Whiteboard ist eine auf Websocket implementierte Funktion, die es mehreren Benutzern ermöglicht, in Echtzeit zusammenzuarbeiten, um dasselbe Zeichenbrett zu bearbeiten und Vorgänge wie Zeichnen und Anmerkungen durchzuführen. Es bietet eine praktische Lösung für Online-Schulungen, Remote-Meetings und Teamzusammenarbeit andere Szenarien. 1. Technischer Hintergrund WebSocket ist ein neues Protokoll, das von HTML5 implementiert wird
SSE und WebSocket
Apr 17, 2024 pm 02:18 PM
In diesem Artikel vergleichen wir Server Sent Events (SSE) und WebSockets, beides zuverlässige Methoden zur Übermittlung von Daten. Wir werden sie in acht Aspekten analysieren, darunter Kommunikationsrichtung, zugrunde liegendes Protokoll, Sicherheit, Benutzerfreundlichkeit, Leistung, Nachrichtenstruktur, Benutzerfreundlichkeit und Testtools. Ein Vergleich dieser Aspekte lässt sich wie folgt zusammenfassen: Kategorie Server Sent Event (SSE) WebSocket-Kommunikationsrichtung Einseitig bidirektional Zugrundeliegendes Protokoll HTTP WebSocket-Protokoll Sicherheit Gleich wie HTTP Vorhandene Sicherheitslücken Benutzerfreundlichkeit Einstellungen Einfache Einstellungen Komplexe Leistung Schnelle Nachrichtenversandgeschwindigkeit Betroffen von der Nachrichtenverarbeitung und dem Verbindungsmanagement. Nachrichtenstruktur Nur Text oder Binär. Benutzerfreundlichkeit. Weit verbreitet. Hilfreich für die WebSocket-Integration
PHP-Websocket-Entwicklungshandbuch zur Implementierung der Echtzeit-Übersetzungsfunktion
Dec 18, 2023 pm 05:52 PM
PHP Websocket-Entwicklungshandbuch: Implementierung der Echtzeit-Übersetzungsfunktion Einführung: Mit der Entwicklung des Internets wird Echtzeitkommunikation in verschiedenen Anwendungsszenarien immer wichtiger. Als aufstrebendes Kommunikationsprotokoll bietet Websocket eine gute Unterstützung für Echtzeitkommunikation. Dieser Artikel führt Sie durch ein detailliertes Verständnis der Verwendung von PHP zum Entwickeln von Websocket-Anwendungen und kombiniert die Echtzeitübersetzungsfunktion, um deren spezifische Anwendung zu demonstrieren. 1. Was ist das Websocket-Protokoll? Das Websocket-Protokoll ist ein
golang WebSocket-Programmiertipps: Umgang mit gleichzeitigen Verbindungen
Dec 18, 2023 am 10:54 AM
Golang ist eine leistungsstarke Programmiersprache und ihre Verwendung in der WebSocket-Programmierung wird von Entwicklern zunehmend geschätzt. WebSocket ist ein TCP-basiertes Protokoll, das eine bidirektionale Kommunikation zwischen Client und Server ermöglicht. In diesem Artikel stellen wir vor, wie Sie mit Golang einen effizienten WebSocket-Server schreiben, der mehrere gleichzeitige Verbindungen gleichzeitig verarbeitet. Bevor wir die Techniken vorstellen, lernen wir zunächst, was WebSocket ist. Einführung in WebSocketWeb
