在今天的信息时代,在线投票系统成为了选举、调查等活动中必不可少的一部分。与传统的投票方式相比,在线投票系统不仅便于操作,而且速度快,可以实现实时统计数据等功能。
本文将介绍如何使用 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 协议等知识有了更深入的了解和掌握。