当前位置 : 主页 > 网络编程 > PHP >

Workerman开发:如何实现基于WebSocket协议的在线投票系统

来源:互联网 收集:自由互联 发布时间:2023-12-28
在今天的信息时代,在线投票系统成为了选举、调查等活动中必不可少的一部分。与传统的投票方式相比,在线投票系统不仅便于操作,而且速度快,可以实现实时统计数据等功能。

Workerman开发:如何实现基于WebSocket协议的在线投票系统

在今天的信息时代,在线投票系统成为了选举、调查等活动中必不可少的一部分。与传统的投票方式相比,在线投票系统不仅便于操作,而且速度快,可以实现实时统计数据等功能。

本文将介绍如何使用 PHP 的 Workerman 框架搭建一个基于 WebSocket 协议的在线投票系统。同时会给出具体的代码示例,供读者参考。

一、什么是 Workerman?

Workerman 是一款高性能、开源的 PHP 异步框架,它基于事件驱动思想,可以轻松地实现长连接应用,如 WebSocket、即时通讯等应用。

Workerman 支持 TCP、UDP 和 HTTP 等协议,具有高并发、低内存消耗等特点。相较于传统的 Web 应用,Workerman 具有更强的实时性和稳定性,因此适用于在线游戏、聊天室、弹幕、消息推送等应用场景。

二、搭建 WebSocket 服务器

在开始之前,我们需要确保已经安装了 PHP 环境,并且安装了 Workerman 框架。具体的安装流程可以参考官方文档。

接下来,我们需要新建一个 PHP 文件,用于启动 WebSocket 服务器,并且监听客户端发送的消息。假设我们在本地 127.0.0.18080 端口开启 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.18080 端口。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 对象的 onopenonmessage 两个回调函数,分别用于在连接建立后输出日志和接收来自服务器的消息。在表单中,我们使用 submit 事件来捕获用户投票的行为,并通过 WebSocket 对象将投票信息发送到服务器。在每次接收到服务器发送的投票结果时,我们会通过 updateVotes 函数更新 HTML 页面中的投票数据。

四、总结

本文介绍了如何使用 PHP 的 Workerman 框架实现一个基于 WebSocket 协议的在线投票系统,并且给出了具体的代码示例。通过本文的学习,读者应该对 Workerman 框架、共享内存机制、WebSocket 协议等知识有了更深入的了解和掌握。

上一篇:如何使用Hyperf框架进行任务调度
下一篇:没有了
网友评论