ホームページ > 記事 > PHPフレームワーク > Workerman を使用してリアルタイムデータ視覚化システムを実装する方法

Workerman を使用してリアルタイムデータ視覚化システムを実装する方法

WBOYオリジナル: 2023-11-07 08:48:14639ブラウズ

Workerman は、PHP をベースに開発された高性能 PHP ソケットフレームワークで、ネットワークアプリケーションの開発に使用され、効率性、安定性、拡張性の利点があります。最大の特徴は、高い同時実行性をサポートし、数百万の TCP 接続を処理できることです。

この記事では、Workerman を使用して WebSocket サーバーを構築する方法、JavaScript の WebSocket API を使用してリアルタイムデータを取得する方法など、Workerman を使用してリアルタイムデータ視覚化システムを実装する方法を紹介します。、ツールライブラリ D3.js を使用して視覚化チャートを描画する方法について説明します。

Workerman のインストール

Workerman のインストールは非常に簡単ですが、Composer を使用してインストールすることをお勧めします。ターミナルで次の操作を実行します。

composer require workerman/workerman

WebSocket サーバーの構築

WebSocket サーバーを構築する手順は次のとおりです。

WebSocket サーバーファイルサーバー .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 サーバーの作成;
クライアント接続イベントをリッスンする;
クライアントがメッセージを送信するイベントをリッスンする;
クライアントが接続を閉じるイベントをリッスンする;
Whenサーバーが起動すると、定期的にランダムデータがすべてのクライアントにプッシュされます。

ターミナルで WebSocket サーバーを実行します:

php server.php start

JavaScript を使用してリアルタイムデータを取得します

Inブラウザ 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 を使用してブラウザーでビジュアルチャートを描画するコードは次のとおりです。

<!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>

コードは主に次の機能を実装します:

SVG 要素の作成;

スケールの定義;
パスジェネレーターの定義;
パス要素を追加します;
リアルタイムデータを受信し、パスデータを更新します。
これまでに、Workerman、JavaScript、D3.js を使用してリアルタイムデータ視覚化システムを実装するためのコードがすべて完成しました。ブラウザで HTML ファイルを開くと、継続的にプッシュされる乱数を表す常に更新される折れ線グラフが表示されます。

以上がWorkerman を使用してリアルタイムデータ視覚化システムを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

php JavaScript composer html 并发 JS 事件 websocket Workerman

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：Workerman 開発: TCP プロトコルに基づいたリモートファイル管理システムを実装する方法次の記事：Workerman 開発: TCP プロトコルに基づいたリモートファイル管理システムを実装する方法

続きを見る

Workerman を使用してリアルタイム データ視覚化システムを実装する方法

関連記事

Workerman を使用してリアルタイムデータ視覚化システムを実装する方法