Workerman 개발: WebSocket 프로토콜을 기반으로 온라인 투표 시스템을 구현하는 방법
- 王林원래의
- 2023-11-07 10:28:44634검색
오늘날의 정보화 시대에 온라인 투표 시스템은 선거, 설문조사 및 기타 활동에 없어서는 안 될 부분이 되었습니다. 기존 투표 방식에 비해 온라인 투표 시스템은 조작이 간편할 뿐만 아니라 속도도 빠르고 실시간 통계 등의 기능을 구현할 수 있다.
이 기사에서는 PHP의 Workerman 프레임워크를 사용하여 WebSocket 프로토콜 기반 온라인 투표 시스템을 구축하는 방법을 소개합니다. 동시에 독자의 참조를 위해 특정 코드 예제가 제공됩니다.
1. 워커맨이란?
Workerman은 이벤트 기반 아이디어를 기반으로 하는 고성능 오픈 소스 PHP 비동기 프레임워크이며 WebSocket, 인스턴트 메시징 및 기타 애플리케이션과 같은 장기 연결 애플리케이션을 쉽게 구현할 수 있습니다.
Workerman은 TCP, UDP, HTTP 등의 프로토콜을 지원하며 동시성이 높고 메모리 소모가 적은 특징을 가지고 있습니다. 기존 웹 애플리케이션에 비해 Workerman은 더욱 강력한 실시간 성능과 안정성을 갖추고 있어 온라인 게임, 채팅방, 사격, 메시지 푸시 등 애플리케이션 시나리오에 적합합니다.
2. WebSocket 서버 구축
시작하기 전에 PHP 환경이 설치되어 있고 Workerman 프레임워크가 설치되어 있는지 확인해야 합니다. 구체적인 설치 절차는 공식 문서를 참조하세요.
다음으로 WebSocket 서버를 시작하고 클라이언트가 보낸 메시지를 수신하기 위한 새 PHP 파일을 만들어야 합니다. 로컬 127.0.0.1 포트 8080에서 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 对象将投票信息发送到服务器。在每次接收到服务器发送的投票结果时，我们会通过 updateVotesrrreee
Worker를 사용합니다. WebSocket 서버를 열고 127.0.0.1의 8080 포트를 수신하는 클래스입니다. count 속성은 시작된 프로세스 수를 지정합니다. 클라이언트가 연결되면 onConnect 콜백 함수가 트리거되고, 클라이언트가 메시지를 보내면 onMessage 콜백 함수가 트리거됩니다. 이 두 가지 콜백 함수에서 클라이언트 연결과 메시지를 처리할 수 있습니다. 3. 온라인 투표 시스템 구현투표 시스템에서는 여러 사용자가 동시에 투표할 수 있도록 지원하고 투표 결과를 실시간으로 표시해야 합니다. 이러한 기능을 구현하려면 PHP의 공유 메모리 메커니즘과 JSON 형식을 사용하여 클라이언트와 서버 간에 데이터를 전달해야 합니다. 🎜🎜먼저 각 투표 옵션에 대한 투표 수를 저장하기 위해 서버 측에서 연관 배열 $votes를 정의해야 합니다. 클라이언트로부터 투표 요청을 받을 때마다 해당 옵션에 대한 투표 수에 1을 추가하고 다양한 옵션에 대한 투표 수는 서로 다른 배열 요소에 저장됩니다. 🎜rrreee🎜위 코드에서는 PHP의 global 키워드를 사용하여 $ws_worker 개체를 broadcast 함수에 도입합니다. 매번 투표 후, 투표 결과는 JSON 형식으로 연결된 모든 클라이언트에 방송됩니다. 위 코드에서는 연결된 모든 클라이언트에 메시지를 보내는 broadcast 함수도 정의합니다. 🎜🎜다음으로 클라이언트 측에서 투표 기능을 구현해야 합니다. HTML 페이지에서는 서버와의 실시간 통신을 위해 JavaScript 코드를 통해 WebSocket 객체를 생성할 수 있습니다. 🎜rrreee🎜위 코드에서는 WebSocket 개체의 onopen 및 onmessage 두 콜백 함수를 사용합니다. 연결이 설정되었습니다. 서버에서 메시지를 기록하고 수신합니다. 양식에서는 submit 이벤트를 사용하여 사용자의 투표 동작을 캡처하고 WebSocket 개체를 통해 서버에 투표 정보를 보냅니다. 서버로부터 투표 결과를 받을 때마다 updateVotes 기능을 통해 HTML 페이지의 투표 데이터를 업데이트합니다. 🎜🎜IV. 요약🎜🎜이 글에서는 PHP의 Workerman 프레임워크를 사용하여 WebSocket 프로토콜 기반 온라인 투표 시스템을 구현하는 방법을 소개하고 구체적인 코드 예제를 제공합니다. 이 기사를 연구함으로써 독자는 Workerman 프레임워크, 공유 메모리 메커니즘, WebSocket 프로토콜 및 기타 지식을 더 깊이 이해하고 숙달해야 합니다. 🎜위 내용은 Workerman 개발: WebSocket 프로토콜을 기반으로 온라인 투표 시스템을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!