Workerman開發:如何實現基於WebSocket協議的線上投票系統
在今天的資訊時代,線上投票系統成為了選舉、調查等活動中必不可少的一部分。與傳統的投票方式相比,線上投票系統不僅便於操作,而且速度快,可以實現即時統計數據等功能。
本文將介紹如何使用 PHP 的 Workerman 框架建立一個基於 WebSocket 協定的線上投票系統。同時會給出具體的程式碼範例,供讀者參考。
一、什麼是 Workerman?
Workerman 是一款高效能、開源的 PHP 非同步框架,它基於事件驅動思想,可以輕鬆實現長連接應用,如 WebSocket、即時通訊等應用程式。
Workerman 支援 TCP、UDP 和 HTTP 等協議,具有高並發、低記憶體消耗等特性。相較於傳統的 Web 應用,Workerman 具有更強的即時性和穩定性,因此適用於線上遊戲、聊天室、彈幕、訊息推播等應用程式場景。
二、建立 WebSocket 伺服器
在開始之前,我們需要確保已經安裝了 PHP 環境,並且安裝了 Workerman 框架。具體的安裝流程可以參考官方文件。
接下來,我們需要新建一個 PHP 文件,用於啟動 WebSocket 伺服器,並且監聽客戶端發送的訊息。假設我們在本地127.0.0.1
的8080
連接埠開啟WebSocket 服務,程式碼如下:
<?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 伺服器,並監聽127.0.0.1
的8080
連接埠。 count
屬性指定了開啟的進程數。當有客戶端連線時,onConnect
回呼函數將會被觸發;當有客戶端傳送訊息時,onMessage
回呼函數將會被觸發。我們可以在這兩個回呼函數中處理客戶端的連線和訊息。
三、實現線上投票系統
在投票系統中,我們需要支援多個用戶同時進行投票,並且需要即時顯示投票結果。為了實現這樣的功能,我們需要使用 PHP 的共享記憶體機制,以及在客戶端和伺服器之間傳遞資料的 JSON 格式。
首先,我們需要在伺服器端定義一個關聯陣列 $votes
,用來儲存每個投票選項的得票數。每次接收到客戶端的投票請求時,我們會將對應的選項得票數加一,而不同選項的得票數則保存在不同的陣列元素中。
<?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']]++; // 广播投票结果 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
關鍵字,將$ws_worker
物件引入到broadcast
函數中,在每次投票後將投票結果以JSON 格式廣播給所有連線的用戶端。在上面的程式碼中,我們還定義了一個 broadcast
函數,用於將訊息傳送給所有已連接的用戶端。
接下來,我們需要實作客戶端的投票功能。在 HTML 頁面中,我們可以透過 JavaScript 程式碼建立 WebSocket 對象,用於與伺服器進行即時通訊。
<!DOCTYPE html> <html> <head> <title>WebSocket - Online Voting System</title> </head> <body> <h1 id="Online-Voting-System">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
兩個回呼函數,分別用於連線建立後輸出日誌和接收來自伺服器的訊息。在表單中,我們使用 submit
事件來捕獲使用者投票的行為,並透過 WebSocket
物件將投票資訊傳送到伺服器。每次接收到伺服器傳送的投票結果時,我們會透過 updateVotes
函數更新 HTML 頁面中的投票資料。
四、總結
本文介紹如何使用 PHP 的 Workerman 框架實作一個基於 WebSocket 協定的線上投票系統,並且給出了具體的程式碼範例。透過本文的學習,讀者應該對 Workerman 框架、共享記憶體機制、WebSocket 協定等知識有了更深入的了解與掌握。
以上是Workerman開發:如何實現基於WebSocket協議的線上投票系統的詳細內容。更多資訊請關注PHP中文網其他相關文章!

熱AI工具

Undresser.AI Undress
人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

Video Face Swap
使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱門文章

熱工具

記事本++7.3.1
好用且免費的程式碼編輯器

SublimeText3漢化版
中文版,非常好用

禪工作室 13.0.1
強大的PHP整合開發環境

Dreamweaver CS6
視覺化網頁開發工具

SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)

隨著網路科技的不斷發展,即時通訊已經成為了日常生活中不可或缺的一部分。利用WebSockets技術可以實現高效、低延遲的即時通信,而PHP作為互聯網領域使用最廣泛的開發語言之一,也提供了相應的WebSocket支援。本文將為大家介紹如何使用PHP和WebSocket實現即時通信,並提供具體的程式碼範例。一、什麼是WebSocketWebSocket是一種在單

如何使用WebSocket和JavaScript實現線上語音辨識系統引言:隨著科技的不斷發展,語音辨識技術已成為了人工智慧領域的重要組成部分。而基於WebSocket和JavaScript實現的線上語音辨識系統,具備了低延遲、即時性和跨平台的特點,成為了廣泛應用的解決方案。本文將介紹如何使用WebSocket和JavaScript來實現線上語音辨識系

隨著網路技術的不斷發展,即時視訊串流已成為了網路領域的重要應用。要實現即時視訊串流播放,其中的關鍵技術包括WebSocket和Java。本文將介紹如何結合使用WebSocket和Java實現即時視訊串流播放,並提供相關的程式碼範例。一、什麼是WebSocketWebSocket是一種在單一TCP連線上進行全雙工通訊的協議,它在Web

golangWebSocket與JSON的結合:實現資料傳輸和解析在現代的Web開發中,即時資料傳輸變得越來越重要。 WebSocket是一種用於實現雙向通訊的協議,與傳統的HTTP請求-回應模型不同,WebSocket允許伺服器向客戶端主動推送資料。而JSON(JavaScriptObjectNotation)是一種用於資料交換的輕量級格式,它簡潔易讀

WebSocket與JavaScript:實現即時監控系統的關鍵技術引言:隨著互聯網技術的快速發展,即時監控系統在各個領域中得到了廣泛的應用。而實現即時監控的關鍵技術之一就是WebSocket與JavaScript的結合使用。本文將介紹WebSocket與JavaScript在即時監控系統中的應用,並給出程式碼範例,詳細解釋其實作原理。一、WebSocket技

PHP和WebSocket:實現即時資料傳輸的最佳實踐方法引言:在Web應用程式開發中,即時資料傳輸是一項非常重要的技術需求。傳統的HTTP協定是一種請求-回應模式的協議,不能有效地實現即時資料傳輸。為了滿足即時資料傳輸的需求,WebSocket協定應運而生。 WebSocket是一種全雙工通訊協議,它提供了一種在單一TCP連接上進行全雙工通訊的方式。相比於H

如何利用Java和WebSocket實現即時股票行情推播引言:隨著網路的快速發展,股票行情即時推播成為了投資人關注的焦點之一。傳統的股票行情推送方式存在延遲較高、刷新速度慢等問題,對於投資人來說,無法及時獲得最新的股票行情資訊可能會導致投資決策的誤差。而基於Java和WebSocket的即時股票行情推送可以有效解決這個問題,使投資者能夠第一時間獲取到最新的

JavaWebsocket如何實現線上白板功能?在現代網路時代,人們越來越注重即時協作和互動的體驗。線上白板就是一種基於Websocket實現的功能,它能夠使多個使用者即時協作編輯同一個畫板,完成繪圖和標註等操作,為線上教育、遠端會議、團隊協作等場景提供了便捷的解決方案。一、技術背景WebSocket是HTML5提供的一種新的協議,它在同一條TCP連接上實
