今日の情報(bào)化時(shí)代において、オンライン投票システムは選挙、調(diào)査、その他の活動(dòng)に不可欠な要素となっています。従來(lái)の投票方法に比べ、オンライン投票システムは操作が簡(jiǎn)単なだけでなく、高速でリアルタイム統(tǒng)計(jì)などの機(jī)能も実現(xiàn)できます。
この記事では、PHP の Workerman フレームワークを使用して、WebSocket プロトコルに基づいたオンライン投票システムを構(gòu)築する方法を紹介します。同時(shí)に、読者の參考のために具體的なコード例を示します。
1. ワーカーマンとは何ですか?
Workerman は、高性能のオープン ソース PHP 非同期フレームワークであり、イベント駆動(dòng)型のアイデアに基づいており、WebSocket、インスタント メッセージング、その他のアプリケーションなど、長(zhǎng)時(shí)間接続するアプリケーションを簡(jiǎn)単に実裝できます。
Workerman は、TCP、UDP、HTTP などのプロトコルをサポートしており、高い同時(shí)実行性と低いメモリ消費(fèi)という特徴があります。従來(lái)の Web アプリケーションと比較して、Workerman はリアルタイム パフォーマンスと安定性が優(yōu)れているため、オンライン ゲーム、チャット ルーム、弾幕、メッセージ プッシュなどのアプリケーション シナリオに適しています。
2. WebSocket サーバーの構(gòu)築
始める前に、PHP 環(huán)境と Workerman フレームワークがインストールされていることを確認(rèn)する必要があります。具體的なインストール手順については、公式ドキュメントを參照してください。
次に、WebSocket サーバーを起動(dòng)し、クライアントから送信されたメッセージをリッスンするための新しい PHP ファイルを作成する必要があります。ローカル 127.0.0.1 の 8080 ポートで WebSocket サービスを開(kāi)くとします。コードは次のとおりです。
<?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 サーバーを開(kāi)き、127.0.0.1 の 8080 ポートでリッスンするクラス。 count 屬性は、開(kāi)始されたプロセスの數(shù)を指定します。クライアントが接続すると、onConnect コールバック関數(shù)がトリガーされ、クライアントがメッセージを送信すると、onMessage コールバック関數(shù)がトリガーされます。これら 2 つのコールバック関數(shù)でクライアント接続とメッセージを処理できます。
3. オンライン投票システムの実裝
投票システムでは、複數(shù)のユーザーの同時(shí)投票をサポートし、投票結(jié)果をリアルタイムで表示する必要があります。このような機(jī)能を?qū)g裝するには、PHP の共有メモリ メカニズムと JSON 形式を使用して、クライアントとサーバー間でデータを渡す必要があります。
まず、サーバー側(cè)で連想配列 $votes を定義して、各投票オプションの投票數(shù)を保存する必要があります。クライアントから投票リクエストを受け取るたびに、対応するオプションの投票數(shù)に 1 が加算され、さまざまなオプションの投票數(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']])) {
// 投票選項(xiàng)不存在或者為空
$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 キーワードを使用して、$ws_worker オブジェクトを broadcast 関數(shù)に導(dǎo)入します。 、投票結(jié)果は、接続されているすべてのクライアントに JSON 形式でブロードキャストされます。上記のコードでは、接続されているすべてのクライアントにメッセージを送信する broadcast 関數(shù)も定義しています。
次に、クライアントの投票機(jī)能を?qū)g裝する必要があります。 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 つのコールバック関數(shù)を使用します。これらは接続後に使用されます。ログを出力し、サーバーからのメッセージを受信します。フォームでは、submit イベントを使用してユーザーの投票行動(dòng)をキャプチャし、WebSocket オブジェクトを通じて投票情報(bào)をサーバーに送信します。サーバーから投票結(jié)果を受け取るたびに、updateVotes 関數(shù)を通じて HTML ページ內(nèi)の投票データを更新します。
4. 概要
この記事では、PHP の Workerman フレームワークを使用して WebSocket プロトコルに基づいたオンライン投票システムを?qū)g裝する方法を紹介し、具體的なコード例を示します。この記事を読むことで、読者は Workerman フレームワーク、共有メモリ メカニズム、WebSocket プロトコル、その他の知識(shí)をより深く理解し、習(xí)得できるようになります。
以上がWorkerman 開(kāi)発: WebSocket プロトコルに基づいたオンライン投票システムを?qū)g裝する方法の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。