使用websockets实时更新css类

Question

我在浏览器游戏中遇到问题，这是一款风险游戏，所以我拥有拥有颜色的区域。

此svg数据的每个路径行都存储在具有唯一ID的数据库中，并且该类由＆＃34; faction＆＃34;然后在1-5之后添加了独特的区域所有权，这决定了所有者。

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

课程在这里：

区域看起来像这样：

只需添加一个内容，每个区域都有一个唯一的ID，每个路径行都会循环到这样的用户：

简而言之。

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

非常感谢你提前

Answer 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);
   });
});

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

Answer 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运行，请参阅状态