搜尋

首頁  >  文章  >  php框架  >  Workerman開發：如何實現基於WebSocket協議的線上投票系統

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

王林
王林原創
2023-11-07 10:28:44638瀏覽

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>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中文網其他相關文章！

php JavaScript json html 关联数组 count 回调函数 并发 对象 事件 异步 http udp websocket Workerman
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
上一篇：Workerman開發：如何實現基於UDP協定的廣播系統下一篇：Workerman開發：如何實現基於UDP協定的廣播系統

相關文章

看更多