搜尋
首頁php框架WorkermanWorkerman開發:如何實現基於WebSocket協議的線上投票系統

Workerman開發:如何實現基於WebSocket協議的線上投票系統

Nov 07, 2023 am 10:28 AM
websocketworkerman線上投票系統

Workerman開發:如何實現基於WebSocket協議的線上投票系統

在今天的資訊時代,線上投票系統成為了選舉、調查等活動中必不可少的一部分。與傳統的投票方式相比,線上投票系統不僅便於操作,而且速度快,可以實現即時統計數據等功能。

本文將介紹如何使用 PHP 的 Workerman 框架建立一個基於 WebSocket 協定的線上投票系統。同時會給出具體的程式碼範例,供讀者參考。

一、什麼是 Workerman?

Workerman 是一款高效能、開源的 PHP 非同步框架,它基於事件驅動思想,可以輕鬆實現長連接應用,如 WebSocket、即時通訊等應用程式。

Workerman 支援 TCP、UDP 和 HTTP 等協議,具有高並發、低記憶體消耗等特性。相較於傳統的 Web 應用,Workerman 具有更強的即時性和穩定性,因此適用於線上遊戲、聊天室、彈幕、訊息推播等應用程式場景。

二、建立 WebSocket 伺服器

在開始之前,我們需要確保已經安裝了 PHP 環境,並且安裝了 Workerman 框架。具體的安裝流程可以參考官方文件。

接下來,我們需要新建一個 PHP 文件,用於啟動 WebSocket 伺服器,並且監聽客戶端發送的訊息。假設我們在本地127.0.0.18080 連接埠開啟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.18080 連接埠。 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 物件的onopenonmessage 兩個回呼函數,分別用於連線建立後輸出日誌和接收來自伺服器的訊息。在表單中,我們使用 submit 事件來捕獲使用者投票的行為,並透過 WebSocket 物件將投票資訊傳送到伺服器。每次接收到伺服器傳送的投票結果時,我們會透過 updateVotes 函數更新 HTML 頁面中的投票資料。

四、總結

本文介紹如何使用 PHP 的 Workerman 框架實作一個基於 WebSocket 協定的線上投票系統,並且給出了具體的程式碼範例。透過本文的學習,讀者應該對 Workerman 框架、共享記憶體機制、WebSocket 協定等知識有了更深入的了解與掌握。

以上是Workerman開發:如何實現基於WebSocket協議的線上投票系統的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

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

AI Clothes Remover

AI Clothes Remover

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

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

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

熱工具

Safe Exam Browser

Safe Exam Browser

Safe Exam Browser是一個安全的瀏覽器環境,安全地進行線上考試。該軟體將任何電腦變成一個安全的工作站。它控制對任何實用工具的訪問,並防止學生使用未經授權的資源。

EditPlus 中文破解版

EditPlus 中文破解版

體積小,語法高亮,不支援程式碼提示功能

SublimeText3 Linux新版

SublimeText3 Linux新版

SublimeText3 Linux最新版

SublimeText3 Mac版

SublimeText3 Mac版

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

PhpStorm Mac 版本

PhpStorm Mac 版本

最新(2018.2.1 )專業的PHP整合開發工具