Workerman 開発: WebSocket プロトコルに基づいたオンライン投票システムを実装する方法-Workerman-php.cn

Workerman 開発: WebSocket プロトコルに基づいたオンライン投票システムを実装する方法

王林

リリース： 2023-11-07 10:28:44

オリジナル

655 人が閲覧しました

Workerman 開発: WebSocket プロトコルに基づいたオンライン投票システムを実装する方法

今日の情報化時代において、オンライン投票システムは選挙、調査、その他の活動に不可欠な要素となっています。従来の投票方法に比べ、オンライン投票システムは操作が簡単なだけでなく、高速でリアルタイム統計などの機能も実現できます。

この記事では、PHP の Workerman フレームワークを使用して、WebSocket プロトコルに基づいたオンライン投票システムを構築する方法を紹介します。同時に、読者の参考のために具体的なコード例を示します。

1. ワーカーマンとは何ですか?

Workerman は、高性能のオープンソース PHP 非同期フレームワークであり、イベント駆動型のアイデアに基づいており、WebSocket、インスタントメッセージング、その他のアプリケーションなど、長時間接続するアプリケーションを簡単に実装できます。

Workerman は、TCP、UDP、HTTP などのプロトコルをサポートしており、高い同時実行性と低いメモリ消費という特徴があります。従来の Web アプリケーションと比較して、Workerman はリアルタイムパフォーマンスと安定性が優れているため、オンラインゲーム、チャットルーム、弾幕、メッセージプッシュなどのアプリケーションシナリオに適しています。

2. WebSocket サーバーの構築

始める前に、PHP 環境と Workerman フレームワークがインストールされていることを確認する必要があります。具体的なインストール手順については、公式ドキュメントを参照してください。

次に、WebSocket サーバーを起動し、クライアントから送信されたメッセージをリッスンするための新しい PHP ファイルを作成する必要があります。ローカル 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 コールバック関数がトリガーされます。これら 2 つのコールバック関数でクライアント接続とメッセージを処理できます。

3. オンライン投票システムの実装

投票システムでは、複数のユーザーの同時投票をサポートし、投票結果をリアルタイムで表示する必要があります。このような機能を実装するには、PHP の共有メモリメカニズムと JSON 形式を使用して、クライアントとサーバー間でデータを渡す必要があります。

まず、サーバー側で連想配列 $votes を定義して、各投票オプションの投票数を保存する必要があります。クライアントから投票リクエストを受け取るたびに、対応するオプションの投票数に 1 が加算され、さまざまなオプションの投票数がさまざまな配列要素に格納されます。

<?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 という 2 つのコールバック関数を使用します。これらは接続後に使用されます。ログを出力し、サーバーからのメッセージを受信します。フォームでは、submit イベントを使用してユーザーの投票行動をキャプチャし、WebSocket オブジェクトを通じて投票情報をサーバーに送信します。サーバーから投票結果を受け取るたびに、updateVotes 関数を通じて HTML ページ内の投票データを更新します。

4. 概要

この記事では、PHP の Workerman フレームワークを使用して WebSocket プロトコルに基づいたオンライン投票システムを実装する方法を紹介し、具体的なコード例を示します。この記事を読むことで、読者は Workerman フレームワーク、共有メモリメカニズム、WebSocket プロトコル、その他の知識をより深く理解し、習得できるようになります。

以上がWorkerman 開発: WebSocket プロトコルに基づいたオンライン投票システムを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。