如何使用JavaScript和WebSocket實現即時線上投票系統
#引言：
隨著網路的快速發展，即時線上投票系統成為了各類活動和選舉中非常常見的一種形式。使用JavaScript和WebSocket技術實現即時線上投票系統具有靈活性和易用性的優點。本文將詳細介紹如何使用JavaScript和WebSocket來實作一個簡單的即時線上投票系統，並提供對應的程式碼範例。
一、即時線上投票系統的基本架構
即時線上投票系統的基本架構一般包括以下幾個部分：
二、前端HTML頁面的設計與實作
<!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>websocket.js的JavaScript文件，用於處理與WebSocket伺服器的通信，如下所示：// 创建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));
}三、後端伺服器的搭建與實作
後端伺服器使用Node.js和WebSocket函式庫來搭建，程式碼範例如下：
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服务器已启动');四、執行與測試
在執行上述程式碼之前，需要先安裝Node.js並透過npm安裝WebSocket庫，開啟終端機並執行以下命令：
$ npm install websocket
$ node server.js
以上是如何使用JavaScript和WebSocket實現即時線上投票系統的詳細內容。更多資訊請關注PHP中文網其他相關文章！
