使用 websockets 实时更新 css 类答案

【问题标题】：Update css class in real-time with websockets使用 websockets 实时更新 css 类
【发布时间】：2015-05-02 01:26:35
【问题描述】：

我在浏览器游戏中遇到了问题，它是一款冒险风格的游戏，所以我在谁拥有它之后有带有颜色的区域。

此 svg 数据的每条路径线都以唯一 id 存储在数据库中，并且类由“派别”创建，然后在 1-5 之后添加唯一区域所有权，指示所有者。

当一个区域被捕获时，区域所有权发生变化，如果页面被刷新，它将具有正确的颜色，但这显然不适用于多达 200 个区域一直在变化，页面必须不断刷新。

课程在这里：

区域如下所示：

只是一个补充，每个区域都有一个唯一的 id，并且每条路径线都像这样循环出给用户：

所以简而言之就是问题。

如何向页面上的所有客户端实时更新课程？

非常感谢您

【问题讨论】：

这很简单。您需要尝试一下，然后包含您尝试过的代码。
blog.pusher.com/making-angular-js-realtime-with-pusher 在谷歌搜索“使用 websockets 实时更新”之后，我在这里包括的结果之一。您可以从那里进一步研究。
是的，我确实遇到了 Pusher，但不确定这是否是正确的方法。所以我很乐意接受更多建议，让我走上正确的道路。一个问题有这么多解决方案:)，顺便说一句，Pusher 获得了每个连接的定价，而对于我要获得的连接，这将花费我每月数百美元。所以这行不通。
我想它们实际上都是相同的解决方案。在伪代码中：socket.on('message', function(message) { myElem.className = message.className; });
大概每个路径都有一个唯一的 ID？

标签： php jquery html sockets websocket

【解决方案1】：

我给出了 Ajax 用例，因为我不知道如何在 php 中使用 Web 套接字。然而，整个部分应该非常简单地转换为网络套接字。

让我们假设每条路径都有一个分数。

所以我们创建 php 文件 refresh.php。

while($row = mysqli_fetch_array(result)){
$array[$row['RegionId']] = 'Fraction'.$row['FractionId'] ;
}
echo json_decode($array);

然后在 JS 中：

$.getJSON('refresh.php'/*path to refresh*/).done(function(data){
   $.each(data,function(index,value){
      $(index).attr('class',value);
   });
});

显然这个脚本缺少一些东西，但它是一个好的开始。

【讨论】：

你好，Maciej。我已经完成了更改区域“所有权”类别的代码。它只是对连接到此页面的所有其他用户的实时更新，我需要查看更新。但是谢谢你的时间
对不起，是的，只需将 ajax 包装在 setInterval 中，然后每秒重复一次。 Web Worker 将是更好的解决方案，但我强烈建议为此使用节点，特别是响应时间在这里非常重要，因为它是游戏。
这将是资源密集型的。 1场比赛会有上千个区域，会有很多场比赛。所以每次刷新都会占用大量资源。我只需要更新已更改的区域。我也在调查自己，也许用普通的 websockets 找到了解决方案。
所以你可以只发送那些改变的。我只想展示如何使用它的示例。这不是完整的解决方案，而只是应该展示如何解决这样的问题。如果您将使用 websockets，您可能仍然需要记住关于 ajax 的回退。通过将其与其他示例连接，您可以使其正常工作。您还可以通过不使用 jquery 和预选 dom 元素并将其保存在数组中或创建适当的面向对象的 Javascript 来加速它。
我尝试了 Web 套接字路径，我和另一个程序员认为它对我们来说太重了，没有足够的知识让我们遗憾地继续使用它。因此，我们将使用您示例的一个版本，然后当它对服务器来说变得很重时，可能会转移到 Web 套接字。感谢您的宝贵时间

【解决方案2】：

你可以试试https://github.com/walkor/workerman。它是一个用于 php 的套接字框架。

Websocket 示例：创建 websocket_server.php

<?php
require_once './Workerman/Autoloader.php';
use Workerman\Worker;
use Workerman\Lib\Timer;

// Listen 2347 port use websocket protocol
$websocket_worker = new Worker("Websocket://0.0.0.0:2347");

// Example create one process handle connections
$websocket_worker->count = 1;

// All websocket connections
$connections_array = array();
// RegionId
$region_id = 1;

// When connect
$websocket_worker->onConnect = function($connection)
{
    global $connections_array, $region_id;
    $connection->RegionId = $region_id++;
    $connections_array[$connection->RegionId] = $connection;
};

// When a message received from one client
$websocket_worker->onMessage = function($connection, $message)
{
    global $connections_array;
    foreach($connections_array as $conn)
    {
        $conn->send("region_id[{$connection->RegionId}] send a message:$message");
    }
};

// When connection closed
$websocket_worker->onClose = function($connection)
{
    global $connections_array;
    unset($connections_array[$connection->RegionId]);
};

// Also you can create a timer just read database for example every 0.5S. Broadcast to all client when data changed.
$websocket_worker->onWorkerStart = function()
{
    $time_interval = 0.5;
    Timer::add($time_interval, function(){
        // When data changed
        global $connections_array;
        foreach($connections_array as $conn)
        {
            $conn->send('{"type":"message","content":"data changed"}');
        }
    });
};

Worker::runAll();

使用php websocket_server.php 运行以进行调试

使用php websocket_server.php start -d 运行守护进程

使用php websocket_server.php stop 停止运行

使用php websocket_server.php status 运行查看状态

【讨论】：