如何使用Workerman實現即時數據視覺化系統-Workerman-PHP中文網

如何使用Workerman實現即時數據視覺化系統

WBOY

發布： 2023-11-07 08:48:14

原創

743 人瀏覽過

如何使用Workerman實現即時數據視覺化系統

Workerman是基於PHP開發的高效能PHP socket框架，用於開發網路應用程序，具有高效、穩定、可擴展等優點。其中最大的特點就是支援高並發，可處理百萬級的TCP連線。

在本文中，我們將介紹如何使用Workerman實現即時資料視覺化系統，包括如何使用Workerman建立WebSocket伺服器，如何使用JavaScript的WebSocket API取得即時數據，以及如何使用工具庫D3.js繪製視覺化圖表。

安裝Workerman

Workerman的安裝非常簡單，建議使用Composer來進行安裝。在終端機中進行如下操作：

composer require workerman/workerman

登入後複製

建置WebSocket伺服器

建置WebSocket伺服器的步驟如下：

建立WebSocket伺服器檔案server .php，程式碼如下：

require_once __DIR__ . '/vendor/autoload.php';  

use WorkermanWorker;
use WorkermanLibTimer;
use WorkermanConnectionTcpConnection;

$ws_worker = new Worker("websocket://0.0.0.0:2346");

$ws_worker->onConnect = function (TcpConnection $connection) {
    echo "client connected
";
};

$ws_worker->onMessage = function (TcpConnection $connection, $data) {
    $connection->send(json_encode(array(
        'value' => rand(1, 100)
    )));
};

$ws_worker->onClose = function (TcpConnection $connection) {
    echo "client closed
";
};

$ws_worker->onWorkerStart = function (Worker $ws_worker) {
    // 每隔1秒钟向所有客户端推送一次随机数据
    Timer::add(1, function () use ($ws_worker) {
        foreach ($ws_worker->connections as $connection) {
            $connection->send(json_encode(array(
                'value' => rand(1, 100)
            )));
        }
    });
};

Worker::runAll();

登入後複製

程式碼主要實作以下功能：

#建立WebSocket伺服器；
監聽客戶端連線事件；
監聽客戶端發送訊息事件；
監聽客戶端關閉連線事件；
在伺服器啟動時，定時向所有客戶端推送一次隨機資料。

在終端機中執行WebSocket伺服器：

php server.php start

登入後複製

使用JavaScript取得即時資料

在瀏覽器中使用JavaScript的WebSocket API取得即時資料的程式碼如下：

var ws = new WebSocket('ws://localhost:2346');  

ws.onmessage = function (event) {  
    var data = JSON.parse(event.data);  
    console.log(data.value);  
}

登入後複製

程式碼主要實作以下功能：

建立WebSocket連線；
在接收到伺服器傳送數據時，解析資料並在控制台輸出。

使用D3.js繪製視覺化圖表

在瀏覽器中使用D3.js繪製視覺化圖表的程式碼如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Realtime Data Visualization</title>
    <script src="https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
<script>  
    var data = [];

    var width = 800;
    var height = 500;

    var svg = d3.select('body')
        .append('svg')
        .attr('width', width)
        .attr('height', height);

    var xScale = d3.scaleLinear()
        .range([0, width])
        .domain([0, 10]);

    var yScale = d3.scaleLinear()
        .range([height, 0])
        .domain([0, 100]);

    var line = d3.line()
        .x(function (d) {
            return xScale(d.index);
        })
        .y(function (d) {
            return yScale(d.value);
        });

    var path = svg.append('path')
        .attr('fill', 'none')
        .attr('stroke', 'steelblue')
        .attr('stroke-width', '1');

    var shift = 0;
    ws.onmessage = function (event) {
        var dataItem = JSON.parse(event.data);

        // 添加新数据
        data.push({
            index: shift,
            value: dataItem.value
        });

        // X轴平移
        if (shift >= 10) {
            shift--;
        }

        // 更新数据的X轴位置
        data.forEach(function (d) {
            d.index = d.index + 1;
        });

        // 更新路径数据
        path.attr('d', line(data));

        shift++;
    };
</script>
</body>
</html>

登入後複製

程式碼主要實作以下功能：