使用 websockets 实时更新 css class

Question

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

此 svg 数据的每条路径线都以唯一 ID 存储在数据库中，class 由 "faction" 创建，然后在 1-5 之后添加唯一区域所有权指示所有者。

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

class 在这里：

区域如下所示：

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

所以问题简而言之。

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

非常感谢您

Answer 1

我给出 Ajax 用例，因为我不知道如何在 php 中使用网络套接字。然而，整个部分应该很容易翻译成网络套接字。

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

因此我们创建 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 查看状态

使用 websockets 实时更新 css class

Update css class in real-time with websockets

html

php

sockets

jquery

websocket