Workerman開發(fā)：如何實現(xiàn)基於WebSocket協(xié)議的線上投票系統(tǒng)
Nov 07, 2023 am 10:28 AM
在今天的資訊時代，線上投票系統(tǒng)成為了選舉、調(diào)查等活動中必不可少的一部分。與傳統(tǒng)的投票方式相比，線上投票系統(tǒng)不僅便於操作，而且速度快，可以實現(xiàn)即時統(tǒng)計數(shù)據(jù)等功能。
本文將介紹如何使用 PHP 的 Workerman 框架建立一個基於 WebSocket 協(xié)定的線上投票系統(tǒng)。同時會給出具體的程式碼範(fàn)例，供讀者參考。
一、什麼是 Workerman？
Workerman 是一款高效能、開源的 PHP 非同步框架，它基於事件驅(qū)動思想，可以輕鬆實現(xiàn)長連接應(yīng)用，如 WebSocket、即時通訊等應(yīng)用程式。
Workerman 支援 TCP、UDP 和 HTTP 等協(xié)議，具有高並發(fā)、低記憶體消耗等特性。相較於傳統(tǒng)的 Web 應(yīng)用，Workerman 具有更強(qiáng)的即時性和穩(wěn)定性，因此適用於線上遊戲、聊天室、彈幕、訊息推播等應(yīng)用程式場景。
二、建立 WebSocket 伺服器
在開始之前，我們需要確保已經(jīng)安裝了 PHP 環(huán)境，並且安裝了 Workerman 框架。具體的安裝流程可以參考官方文件。
接下來，我們需要新建一個 PHP 文件，用於啟動 WebSocket 伺服器，並且監(jiān)聽客戶端發(fā)送的訊息。假設(shè)我們在本地127.0.0.1 的8080 連接埠開啟WebSocket 服務(wù)，程式碼如下：
<?php
require_once __DIR__ . '/vendor/autoload.php';
use WorkermanWorker;
use WorkermanWebServer;
use WorkermanProtocolsWebsocket;
$ws_worker = new Worker('websocket://127.0.0.1:8080');
$ws_worker->count = 1;
$ws_worker->onWorkerStart = function() {
echo "WebSocket server started
";
};
$ws_worker->onConnect = function($connection) {
echo "New connection established: {$connection->id}
";
};
$ws_worker->onMessage = function($connection, $data) {
echo "Received a message from {$connection->id}: $data
";
};
Worker::runAll();以上程式碼中，我們使用Workerman 的Worker 類別來開啟一個WebSocket 伺服器，並監(jiān)聽127.0.0.1 的8080 連接埠。 count 屬性指定了開啟的進(jìn)程數(shù)。當(dāng)有客戶端連線時，onConnect 回呼函數(shù)將會被觸發(fā)；當(dāng)有客戶端傳送訊息時，onMessage 回呼函數(shù)將會被觸發(fā)。我們可以在這兩個回呼函數(shù)中處理客戶端的連線和訊息。
三、實現(xiàn)線上投票系統(tǒng)
在投票系統(tǒng)中，我們需要支援多個用戶同時進(jìn)行投票，並且需要即時顯示投票結(jié)果。為了實現(xiàn)這樣的功能，我們需要使用 PHP 的共享記憶體機(jī)制，以及在客戶端和伺服器之間傳遞資料的 JSON 格式。
首先，我們需要在伺服器端定義一個關(guān)聯(lián)陣列 $votes，用來儲存每個投票選項的得票數(shù)。每次接收到客戶端的投票請求時，我們會將對應(yīng)的選項得票數(shù)加一，而不同選項的得票數(shù)則保存在不同的陣列元素中。
<?php
// ...
$votes = [
'Option 1' => 0,
'Option 2' => 0,
'Option 3' => 0,
];
$ws_worker->onMessage = function($connection, $data) use ($votes) {
$data = json_decode($data, true);
if (!isset($data['option']) || !isset($votes[$data['option']])) {
// 投票選項不存在或者為空
$connection->send(json_encode([
'code' => 400,
'message' => 'Invalid option'
]));
return;
}
$votes[$data['option']]++;
// 廣播投票結(jié)果
broadcast(json_encode([
'code' => 200,
'message' => 'Vote successfully',
'data' => $votes
]));
};
function broadcast($data) {
global $ws_worker;
foreach ($ws_worker->connections as $connection) {
$connection->send($data);
}
}以上程式碼中，我們使用了PHP 的global 關(guān)鍵字，將$ws_worker 物件引入到broadcast 函數(shù)中，在每次投票後將投票結(jié)果以JSON 格式廣播給所有連線的用戶端。在上面的程式碼中，我們還定義了一個 broadcast 函數(shù)，用於將訊息傳送給所有已連接的用戶端。
接下來，我們需要實作客戶端的投票功能。在 HTML 頁面中，我們可以透過 JavaScript 程式碼建立 WebSocket 對象，用於與伺服器進(jìn)行即時通訊。
<!DOCTYPE html>
<html>
<head>
<title>WebSocket - Online Voting System</title>
</head>
<body>
<h1>Online Voting System</h1>
<p>Vote for your favorite option:</p>
<form id="form">
<input type="radio" name="option" value="Option 1">Option 1<br>
<input type="radio" name="option" value="Option 2">Option 2<br>
<input type="radio" name="option" value="Option 3">Option 3<br>
<input type="submit" value="Vote">
</form>
<ul id="result">
<li>Option 1: <span id="vote1"></span></li>
<li>Option 2: <span id="vote2"></span></li>
<li>Option 3: <span id="vote3"></span></li>
</ul>
<script type="text/javascript">
var ws = new WebSocket('ws://127.0.0.1:8080');
ws.onopen = function() {
console.log('WebSocket connected');
}
ws.onmessage = function(event) {
var data = JSON.parse(event.data);
if (data.code === 200) {
// 投票成功
updateVotes(data.data);
} else {
// 投票失敗
console.error(data.message);
}
}
function updateVotes(votes) {
document.querySelector('#vote1').innerHTML = votes['Option 1'];
document.querySelector('#vote2').innerHTML = votes['Option 2'];
document.querySelector('#vote3').innerHTML = votes['Option 3'];
}
var form = document.querySelector('#form');
form.addEventListener('submit', function(event) {
event.preventDefault();
var option = document.querySelector('input[name="option"]:checked');
if (!option) {
console.error('Please choose an option');
return;
}
var data = {
option: option.value
};
ws.send(JSON.stringify(data));
option.checked = false;
});
</script>
</body>
</html>以上程式碼中，我們使用了WebSocket 物件的onopen、onmessage 兩個回呼函數(shù)，分別用於連線建立後輸出日誌和接收來自伺服器的訊息。在表單中，我們使用 submit 事件來捕獲使用者投票的行為，並透過 WebSocket 物件將投票資訊傳送到伺服器。每次接收到伺服器傳送的投票結(jié)果時，我們會透過 updateVotes 函數(shù)更新 HTML 頁面中的投票資料。
四、總結(jié)
本文介紹如何使用 PHP 的 Workerman 框架實作一個基於 WebSocket 協(xié)定的線上投票系統(tǒng)，並且給出了具體的程式碼範(fàn)例。透過本文的學(xué)習(xí)，讀者應(yīng)該對 Workerman 框架、共享記憶體機(jī)制、WebSocket 協(xié)定等知識有了更深入的了解與掌握。
以上是Workerman開發(fā)：如何實現(xiàn)基於WebSocket協(xié)議的線上投票系統(tǒng)的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！
熱AI工具
Undress AI Tool
免費(fèi)脫衣圖片
Undresser.AI Undress
人工智慧驅(qū)動的應(yīng)用程序，用於創(chuàng)建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費(fèi)的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費(fèi)的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強(qiáng)大的PHP整合開發(fā)環(huán)境
Dreamweaver CS6
視覺化網(wǎng)頁開發(fā)工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
熱門話題
WebSocket與JavaScript：實現(xiàn)即時監(jiān)控系統(tǒng)的關(guān)鍵技術(shù)
Dec 17, 2023 pm 05:30 PM
WebSocket與JavaScript：實現(xiàn)即時監(jiān)控系統(tǒng)的關(guān)鍵技術(shù)引言：隨著互聯(lián)網(wǎng)技術(shù)的快速發(fā)展，即時監(jiān)控系統(tǒng)在各個領(lǐng)域中得到了廣泛的應(yīng)用。而實現(xiàn)即時監(jiān)控的關(guān)鍵技術(shù)之一就是WebSocket與JavaScript的結(jié)合使用。本文將介紹WebSocket與JavaScript在即時監(jiān)控系統(tǒng)中的應(yīng)用，並給出程式碼範(fàn)例，詳細(xì)解釋其實作原理。一、WebSocket技
golang WebSocket與JSON的結(jié)合：實現(xiàn)資料傳輸與解析
Dec 17, 2023 pm 03:06 PM
golangWebSocket與JSON的結(jié)合：實現(xiàn)資料傳輸和解析在現(xiàn)代的Web開發(fā)中，即時資料傳輸變得越來越重要。 WebSocket是一種用於實現(xiàn)雙向通訊的協(xié)議，與傳統(tǒng)的HTTP請求-回應(yīng)模型不同，WebSocket允許伺服器向客戶端主動推送資料。而JSON（JavaScriptObjectNotation）是一種用於資料交換的輕量級格式，它簡潔易讀
如何使用PHP和WebSocket實現(xiàn)即時通信
Dec 17, 2023 pm 10:24 PM
隨著網(wǎng)路科技的不斷發(fā)展，即時通訊已經(jīng)成為了日常生活中不可或缺的一部分。利用WebSockets技術(shù)可以實現(xiàn)高效、低延遲的即時通信，而PHP作為互聯(lián)網(wǎng)領(lǐng)域使用最廣泛的開發(fā)語言之一，也提供了相應(yīng)的WebSocket支援。本文將為大家介紹如何使用PHP和WebSocket實現(xiàn)即時通信，並提供具體的程式碼範(fàn)例。一、什麼是WebSocketWebSocket是一種在單
PHP和WebSocket: 實現(xiàn)即時資料傳輸?shù)淖罴褜嵺`方法
Dec 18, 2023 pm 02:10 PM
PHP和WebSocket：實現(xiàn)即時資料傳輸?shù)淖罴褜嵺`方法引言：在Web應(yīng)用程式開發(fā)中，即時資料傳輸是一項非常重要的技術(shù)需求。傳統(tǒng)的HTTP協(xié)定是一種請求-回應(yīng)模式的協(xié)議，不能有效地實現(xiàn)即時資料傳輸。為了滿足即時資料傳輸?shù)男枨螅琖ebSocket協(xié)定應(yīng)運(yùn)而生。 WebSocket是一種全雙工通訊協(xié)議，它提供了一種在單一TCP連接上進(jìn)行全雙工通訊的方式。相比於H
如何使用WebSocket和JavaScript實現(xiàn)線上語音辨識系統(tǒng)
Dec 17, 2023 pm 02:54 PM
如何使用WebSocket和JavaScript實現(xiàn)線上語音辨識系統(tǒng)引言：隨著科技的不斷發(fā)展，語音辨識技術(shù)已成為了人工智慧領(lǐng)域的重要組成部分。而基於WebSocket和JavaScript實現(xiàn)的線上語音辨識系統(tǒng)，具備了低延遲、即時性和跨平臺的特點(diǎn)，成為了廣泛應(yīng)用的解決方案。本文將介紹如何使用WebSocket和JavaScript來實現(xiàn)線上語音辨識系
如何利用Java和WebSocket實現(xiàn)即時股票行情推送
Dec 17, 2023 pm 09:15 PM
如何利用Java和WebSocket實現(xiàn)即時股票行情推播引言：隨著網(wǎng)路的快速發(fā)展，股票行情即時推播成為了投資人關(guān)注的焦點(diǎn)之一。傳統(tǒng)的股票行情推送方式存在延遲較高、刷新速度慢等問題，對於投資人來說，無法及時獲得最新的股票行情資訊可能會導(dǎo)致投資決策的誤差。而基於Java和WebSocket的即時股票行情推送可以有效解決這個問題，使投資者能夠第一時間獲取到最新的
Java和WebSocket的結(jié)合：如何實現(xiàn)即時視訊串流播放
Dec 17, 2023 pm 05:50 PM
隨著網(wǎng)路技術(shù)的不斷發(fā)展，即時視訊串流已成為了網(wǎng)路領(lǐng)域的重要應(yīng)用。要實現(xiàn)即時視訊串流播放，其中的關(guān)鍵技術(shù)包括WebSocket和Java。本文將介紹如何結(jié)合使用WebSocket和Java實現(xiàn)即時視訊串流播放，並提供相關(guān)的程式碼範(fàn)例。一、什麼是WebSocketWebSocket是一種在單一TCP連線上進(jìn)行全雙工通訊的協(xié)議，它在Web
SSE 與 WebSocket
Apr 17, 2024 pm 02:18 PM
在本文中，我們將比較伺服器發(fā)送事件（SSE）和 WebSocket，兩者都是用於傳遞資料的可靠方法。我們將在八個方面對它們進(jìn)行分析，包括通訊方向、底層協(xié)定、安全性、易用性、效能、訊息結(jié)構(gòu)、易用性和測試工具。這些方面的比較總結(jié)如下：類別伺服器發(fā)送事件(SSE)WebSocket通訊方向單向雙向底層協(xié)定HTTPWebSocket 協(xié)定安全性與HTTP 相同存在安全漏洞易用性設(shè)定簡單設(shè)定複雜效能訊息傳送速度快受訊息處理和連線管理影響訊息結(jié)構(gòu)純文字文字或二進(jìn)位易用性廣泛可用對WebSocket 整合有
