interface Web
js tutoriel
Comment mettre en œuvre un système de vote en ligne en temps réel à l'aide de JavaScript et WebSocket
Comment mettre en œuvre un système de vote en ligne en temps réel à l'aide 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 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>- 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.jspour 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));
} 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服务器已启动');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 connexionDé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!
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
La combinaison de Java et WebSocket : comment réaliser un streaming vidéo en temps réel
Dec 17, 2023 pm 05:50 PM
Avec le développement continu de la technologie Internet, le streaming vidéo en temps réel est devenu une application importante dans le domaine Internet. Pour réaliser un streaming vidéo en temps réel, les technologies clés incluent WebSocket et Java. Cet article explique comment utiliser WebSocket et Java pour implémenter la lecture en streaming vidéo en temps réel et fournit des exemples de code pertinents. 1. Qu'est-ce que WebSocket ? WebSocket est un protocole de communication full-duplex sur une seule connexion TCP. Il est utilisé sur le Web.
Comment réaliser une communication en temps réel en utilisant PHP et WebSocket
Dec 17, 2023 pm 10:24 PM
Avec le développement continu de la technologie Internet, la communication en temps réel est devenue un élément indispensable de la vie quotidienne. Une communication en temps réel efficace et à faible latence peut être obtenue grâce à la technologie WebSockets, et PHP, en tant que l'un des langages de développement les plus utilisés dans le domaine Internet, fournit également la prise en charge WebSocket correspondante. Cet article explique comment utiliser PHP et WebSocket pour établir une communication en temps réel et fournit des exemples de code spécifiques. 1. Qu'est-ce que WebSocket ?
WebSocket et JavaScript : technologies clés pour mettre en œuvre des systèmes de surveillance en temps réel
Dec 17, 2023 pm 05:30 PM
WebSocket et JavaScript : technologies clés pour réaliser des systèmes de surveillance en temps réel Introduction : Avec le développement rapide de la technologie Internet, les systèmes de surveillance en temps réel ont été largement utilisés dans divers domaines. L'une des technologies clés pour réaliser une surveillance en temps réel est la combinaison de WebSocket et de JavaScript. Cet article présentera l'application de WebSocket et JavaScript dans les systèmes de surveillance en temps réel, donnera des exemples de code et expliquera leurs principes de mise en œuvre en détail. 1. Technologie WebSocket
PHP et WebSocket : bonnes pratiques pour le transfert de données en temps réel
Dec 18, 2023 pm 02:10 PM
PHP et WebSocket : meilleures pratiques pour le transfert de données en temps réel Introduction : Dans le développement d'applications Web, le transfert de données en temps réel est une exigence technique très importante. Le protocole HTTP traditionnel est un protocole de modèle requête-réponse et ne peut pas assurer efficacement la transmission de données en temps réel. Afin de répondre aux besoins de transmission de données en temps réel, le protocole WebSocket a vu le jour. WebSocket est un protocole de communication full-duplex qui permet de communiquer en full-duplex via une seule connexion TCP. Comparé à H
Comment Java Websocket implémente-t-il la fonction de tableau blanc en ligne ?
Dec 17, 2023 pm 10:58 PM
Comment JavaWebsocket implémente-t-il la fonction de tableau blanc en ligne ? À l’ère d’Internet moderne, les gens accordent de plus en plus d’attention à l’expérience de collaboration et d’interaction en temps réel. Le tableau blanc en ligne est une fonction implémentée sur la base de Websocket. Il permet à plusieurs utilisateurs de collaborer en temps réel pour modifier la même planche à dessin et effectuer des opérations telles que le dessin et l'annotation. Il constitue une solution pratique pour l'enseignement en ligne, les réunions à distance, la collaboration en équipe et. d'autres scénarios. 1. Contexte technique WebSocket est un nouveau protocole fourni par HTML5 qu'il implémente.
SSE et WebSocket
Apr 17, 2024 pm 02:18 PM
Dans cet article, nous comparerons les événements envoyés par le serveur (SSE) et les WebSockets, qui sont tous deux des méthodes fiables pour fournir des données. Nous les analyserons sous huit aspects, notamment la direction de la communication, le protocole sous-jacent, la sécurité, la facilité d'utilisation, les performances, la structure des messages, la facilité d'utilisation et les outils de test. Une comparaison de ces aspects est résumée comme suit : Catégorie Événement envoyé par le serveur (SSE) Direction de communication WebSocket Unidirectionnel Bidirectionnel Protocole sous-jacent HTTP Sécurité du protocole WebSocket Identique à HTTP Failles de sécurité existantes Facilité d'utilisation Paramètres Paramètres simples Performances complexes Vitesse d'envoi rapide des messages Affecté par le traitement des messages et la gestion des connexions Structure du message Texte brut ou binaire Facilité d'utilisation Largement disponible Utile pour l'intégration de WebSocket
Guide de développement PHP Websocket pour implémenter la fonction de traduction en temps réel
Dec 18, 2023 pm 05:52 PM
Guide de développement PHP Websocket : Implémentation de la fonction de traduction en temps réel Introduction : Avec le développement d'Internet, la communication en temps réel devient de plus en plus importante dans divers scénarios d'application. En tant que protocole de communication émergent, Websocket offre une bonne prise en charge de la communication en temps réel. Cet article vous expliquera en détail comment utiliser PHP pour développer des applications Websocket et combinera la fonction de traduction en temps réel pour démontrer son application spécifique. 1. Qu'est-ce que le protocole Websocket ? Le protocole Websocket est un
Conseils de programmation Golang WebSocket : gestion des connexions simultanées
Dec 18, 2023 am 10:54 AM
Golang est un langage de programmation puissant et son utilisation dans la programmation WebSocket est de plus en plus appréciée par les développeurs. WebSocket est un protocole basé sur TCP qui permet une communication bidirectionnelle entre le client et le serveur. Dans cet article, nous expliquerons comment utiliser Golang pour écrire un serveur WebSocket efficace qui gère plusieurs connexions simultanées en même temps. Avant de présenter les techniques, apprenons d'abord ce qu'est WebSocket. Introduction à WebSocketWeb
