Développement Workerman : Comment implémenter un système de vote en ligne basé sur le protocole WebSocket-Workerman-php.cn

Table des matières

Online Voting System

Maison

cadre php

Workerman

Développement Workerman : Comment implémenter un système de vote en ligne basé sur le protocole WebSocket

Nov 07, 2023 am 10:28 AM

websocket workerman 在线投票系统

Développement Workerman : Comment implémenter un système de vote en ligne basé sur le protocole WebSocket

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

本文将介绍如何使用 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();

Copier après la connexion

以上代码中，我们使用 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);
    }
}

Copier après la connexion

以上代码中，我们使用了 PHP 的 global 关键字，将 $ws_worker 对象引入到 broadcast 函数中，在每次投票后将投票结果以 JSON 格式广播给所有连接的客户端。在上面的代码中，我们还定义了一个 broadcast 函数，用于将消息发送给所有已连接的客户端。

接下来，我们需要实现客户端的投票功能。在 HTML 页面中，我们可以通过 JavaScript 代码创建 WebSocket 对象，用于与服务器进行实时通信。

<!DOCTYPE html>
<html>
<head>
    <title>WebSocket - Online Voting System</title>
</head>
<body>
    <h1 id="Online-Voting-System">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>

Copier après la connexion

以上代码中，我们使用了 WebSocket 对象的 onopen、onmessage 两个回调函数，分别用于在连接建立后输出日志和接收来自服务器的消息。在表单中，我们使用 submit 事件来捕获用户投票的行为，并通过 WebSocket 对象将投票信息发送到服务器。在每次接收到服务器发送的投票结果时，我们会通过 updateVotes 函数更新 HTML 页面中的投票数据。

四、总结

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn