PHP Websocket開發教程，構建實時問卷調查功能，需要具體代碼示例
Websocket技術是一種新興的網絡協議，它可以在 web 應用中構建實時通信功能。和傳統的 HTTP 協議不同，Websocket 協議可以實現雙向通信，并且能夠不間斷的發送和接收數據。在本文中，我們將會介紹如何使用 PHP 和 Websocket 技術構建實時問卷調查功能，并提供具體的代碼示例。
- 在服務器上安裝 Ratchet
Ratchet 是一個 PHP 庫，用于開發 Websocket 應用程序。在開始之前，你需要在服務器上安裝 Ratchet 。使用以下命令：
composer require cboden/ratchet
登錄后復制
- 編寫 Websocket 服務器代碼
首先，我們需要創建一個 Ratchet 的 WebSocket 服務器。本示例中，我們將把所有代碼放在一個 PHP 文件中。在此文件中，我們將創建一個類，該類將擴展 RatchetWebSocketWsServer 類。在構造函數中，我們將初始化一個實例變量 $clients，該變量將存儲已連接的客戶端。
以下是服務器代碼：
<?php
require __DIR__ . '/vendor/autoload.php'; // 引入 ratchet
use RatchetMessageComponentInterface;
use RatchetConnectionInterface;
use RatchetWebSocketWsServer;
class PollServer implements MessageComponentInterface {
protected $clients;
public function __construct() {
$this->clients = new SplObjectStorage;
}
public function onOpen(ConnectionInterface $conn) {
$this->clients->attach($conn);
echo 'Client ' . $conn->resourceId . ' connected
';
}
public function onClose(ConnectionInterface $conn) {
$this->clients->detach($conn);
echo 'Client ' . $conn->resourceId . ' disconnected
';
}
public function onMessage(ConnectionInterface $from, $msg) {
echo 'Received message ' . $msg . ' from client ' . $from->resourceId . "
";
// 在這里處理邏輯...
}
public function onError(ConnectionInterface $conn, Exception $e) {
echo "An error has occurred: {$e->getMessage()}
";
$conn->close();
}
}
$server = new RatchetApp('localhost', 8080); // 創建一個新的 WebSocket 服務器
$server->route('/poll', new WsServer(new PollServer())); // 定義路由
$server->run(); // 啟動服務器
登錄后復制
上述代碼定義了一個名為 PollServer 的類，該類實現了 RatchetMessageComponentInterface 接口。 MessageComponentInterface 接口非常簡單，它只有四個方法，分別是 onOpen、onClose、onMessage 和 onError。這些方法會在客戶端連接到服務器時、從服務器斷開連接時、接收到新消息時和遇到錯誤時調用。在上面的代碼中，我們只是簡單地輸出了一些日志，但在處理實際邏輯時，你可以根據需要進行更改。
接下來，我們需要將 PollServer 類傳遞給 RatchetWebSocketWsServer 類的構造函數中。這將創建一個新的 WebSocket 服務器，該服務器將使用 WebSocket 協議與客戶端進行通信。
最后，我們需要定義一個路由，以便客戶端可以連接到服務器。在上面的代碼中，我們定義了一個名為 /poll 的路由。在生產環境中，你應該為 WebSocket 服務器使用真實的域名和端口。
- 編寫客戶端代碼
在本示例中，我們將使用 JavaScript 編寫客戶端代碼。首先，在 HTML 文件中添加以下代碼來創建一個 WebSocket 連接：
<!DOCTYPE html>
<html>
<head>
<title>Real-time Poll</title>
</head>
<body>
<h1>Real-time Poll</h1>
<script>
const connection = new WebSocket('ws://localhost:8080/poll'); // 替換為真實的域名和端口
connection.addEventListener('open', () => {
console.log('Connected');
});
connection.addEventListener('message', event => {
const message = JSON.parse(event.data);
console.log('Received', message);
});
connection.addEventListener('close', () => {
console.log('Disconnected');
});
connection.addEventListener('error', error => {
console.error(error);
});
</script>
</body>
</html>
登錄后復制
上面的代碼創建了一個名為 connection 的新 WebSocket 對象，并使用 ws://localhost:8080/poll 作為服務器 URL。在生產環境中，你應該將此 URL 替換為真實的服務器域名和端口。
接下來，我們添加了幾個事件偵聽器，用于處理連接建立、接收消息、連接斷開和錯誤事件。在接收到消息時，我們使用 JSON.parse 將消息解析為 JavaScript 對象，并在控制臺上記錄。
- 實現實時問卷調查功能
現在我們已經創建了 WebSocket 服務器和客戶端，我們需要實現實時問卷調查功能。考慮以下代碼示例：
public function onMessage(ConnectionInterface $from, $msg) {
echo 'Received message ' . $msg . ' from client ' . $from->resourceId . "
";
$data = json_decode($msg, true);
switch ($data['action']) {
case 'vote':
$vote = $data['vote'];
$this->broadcast([
'action' => 'update',
'votes' => [
'yes' => $this->getVoteCount('yes'),
'no' => $this->getVoteCount('no')
]
]);
break;
}
}
private function broadcast($message) {
foreach ($this->clients as $client) {
$client->send(json_encode($message));
}
}
private function getVoteCount($option) {
// 在這里查詢投票選項的數量...
}
登錄后復制
在上面的代碼中，我們在 onMessage 方法中處理客戶端發送的消息。此方法對消息進行解碼，并使用 switch 語句檢查 action 字段。如果 action 等于 vote，則我們將更新投票計數并使用 broadcast 方法向所有客戶端發送更新結果。
在 broadcast 方法中，我們使用一個循環遍歷所有客戶端并將消息發送到每個客戶端。該方法將 JSON 編碼的消息發送到客戶端，客戶端將與 connection.addEventListener('message', ...) 事件處理程序中注冊的事件處理程序配合使用。
- 完整代碼示例
以下是本文中所有代碼示例的完整版本：
server.php：
<?php
require __DIR__ . '/vendor/autoload.php';
use RatchetMessageComponentInterface;
use RatchetConnectionInterface;
use RatchetWebSocketWsServer;
class PollServer implements MessageComponentInterface {
protected $clients;
public function __construct() {
$this->clients = new SplObjectStorage;
}
public function onOpen(ConnectionInterface $conn) {
$this->clients->attach($conn);
echo 'Client ' . $conn->resourceId . ' connected
';
}
public function onClose(ConnectionInterface $conn) {
$this->clients->detach($conn);
echo 'Client ' . $conn->resourceId . ' disconnected
';
}
public function onMessage(ConnectionInterface $from, $msg) {
echo 'Received message ' . $msg . ' from client ' . $from->resourceId . "
";
$data = json_decode($msg, true);
switch ($data['action']) {
case 'vote':
$vote = $data['vote'];
$this->broadcast([
'action' => 'update',
'votes' => [
'yes' => $this->getVoteCount('yes'),
'no' => $this->getVoteCount('no')
]
]);
break;
}
}
public function onError(ConnectionInterface $conn, Exception $e) {
echo "An error has occurred: {$e->getMessage()}
";
$conn->close();
}
private function broadcast($message) {
foreach ($this->clients as $client) {
$client->send(json_encode($message));
}
}
private function getVoteCount($option) {
// 在這里查詢投票選項的數量...
}
}
$server = new RatchetApp('localhost', 8080);
$server->route('/poll', new WsServer(new PollServer()));
$server->run();
登錄后復制
index.html：
<!DOCTYPE html>
<html>
<head>
<title>Real-time Poll</title>
</head>
<body>
<h1>Real-time Poll</h1>
<form>
<label><input type="radio" name="vote" value="yes"> Yes</label>
<label><input type="radio" name="vote" value="no"> No</label>
<button type="submit">Vote</button>
</form>
<ul>
<li>Yes: <span id="yes-votes">0</span></li>
<li>No: <span id="no-votes">0</span></li>
</ul>
<script>
const connection = new WebSocket('ws://localhost:8080/poll');
connection.addEventListener('open', () => {
console.log('Connected');
});
connection.addEventListener('message', event => {
const message = JSON.parse(event.data);
if (message.action === 'update') {
document.getElementById('yes-votes').textContent = message.votes.yes;
document.getElementById('no-votes').textContent = message.votes.no;
}
});
connection.addEventListener('close', () => {
console.log('Disconnected');
});
connection.addEventListener('error', error => {
console.error(error);
});
document.querySelector('form').addEventListener('submit', event => {
event.preventDefault();
const vote = document.querySelector('input[name="vote"]:checked').value;
connection.send(JSON.stringify({
action: 'vote',
vote: vote
}));
});
</script>
</body>
</html>
登錄后復制
在以上代碼示例中，我們提供了一個簡單的 HTML 表單，用于向服務器發送投票結果。當用戶提交表單時，我們將投票結果作為 JSON 對象發送到服務器上的 WebSocket 連接。
在客戶端收到更新消息時，我們在 HTML 中更新投票結果。
- 總結
在這篇文章中，我們介紹了如何使用 PHP 和 Websocket 技術構建實時問卷調查功能，并提供了具體的代碼示例。Websocket 技術可以用于實現各種實時通信功能，如聊天室、游戲、實時更新等。如果你想要深入學習 Websocket 技術，我們建議你查看 Ratchet 的文檔，該文檔提供了很多關于 Websocket 開發的詳細指南和示例。
