Workerman 開発: HTTP プロトコルに基づいたリアルタイムデータ視覚化システムを実装する方法-Workerman-php.cn

Workerman 開発: HTTP プロトコルに基づいたリアルタイムデータ視覚化システムを実装する方法

PHPz

リリース： 2023-11-07 08:01:00

オリジナル

1230 人が閲覧しました

Workerman 開発: HTTP プロトコルに基づいたリアルタイムデータ視覚化システムを実装する方法

Workerman は、リアルタイム通信、メッセージプッシュ、データ視覚化などの機能を迅速に構築できる高性能 PHP ネットワーク通信フレームワークです。この記事では、Workerman を使用して HTTP プロトコルに基づいたリアルタイムデータ視覚化システムを開発する方法を紹介し、具体的なコード例を示します。

1. システム設計

本システムは B/S アーキテクチャを採用しており、ブラウザ (Browser) とサーバー (Server) は HTTP プロトコルを介して通信します。

1. サーバー側:

(1) Workerman フレームワークを使用して HTTP サーバーを確立し、デフォルトポート (80) をリッスンします;

(2) データを取得しますPHP スクリプトを通じてリアルタイムでデータを JSON 形式でブラウザに返します。

(3) Websocket プロトコルを使用して、サーバーとクライアント間のリアルタイム通信を実装します。複数のクライアントが同時にリクエストを送信する状況。

2. クライアント:

(1) HTML、CSS、および JavaScript を使用して、データ視覚化インターフェイスとデータ要求インターフェイスを含むフロントエンドページを構築します;

(2) JavaScript を使用してサーバーとの Websocket 接続を確立し、リアルタイムデータをプッシュして視覚化します。

2. 具体的な実装

1. サーバー側:

(1) Composer を使用して Workerman フレームワークをインストールします:

composer require workerman/workerman

ログイン後にコピー

(2) インデックスを作成します.php ファイルを作成し、HTTP サーバーを構築します:

<?php
require_once __DIR__ . '/vendor/autoload.php';//引入Workerman框架
use WorkermanProtocolsHttpRequest;
use WorkermanProtocolsHttpResponse;
use WorkermanWorker;

$http_worker = new Worker("http://0.0.0.0:80");//监听默认端口80

$http_worker->onMessage = function (Request $request) {
    $path = $request->path();//获取请求路径
    if ($path == '/') {//处理请求，返回HTML页面
        $response_str = file_get_contents(__DIR__ . '/index.html');
        $response = new Response(200, [], $response_str);
        $request->send($response);
    } elseif ($path == '/data') {//处理请求，返回JSON数据
        $data = getData();//获取实时数据
        $response = new Response(200, [], json_encode($data));//将数据转化为JSON格式
        $request->send($response);
    }
};

$http_worker->onWorkerStart = function () {
    global $ws_worker;
    $ws_worker = new Worker("websocket://0.0.0.0:8080");//监听WebSocket端口8080

    $ws_worker->count = 1;//设置Worker进程数

    $ws_worker->onMessage = function ($connection, $data) {
        $message = json_decode($data, true);//接收来自客户端的消息，并解析JSON格式数据
        switch ($message['type']) {
            case 'subscribe':
                //TODO 处理订阅请求，并发送数据
                break;
            case 'unsubscribe':
                //TODO 处理取消订阅请求
                break;
            default:
                break;
        }
    };

    Worker::runAll();//运行HTTP服务器和WebSocket服务器
};

//TODO 获取实时数据
function getData()
{
    return [];
}

ログイン後にコピー

(3) WebSocket プロトコルを実装します:

HTTP サーバーが起動したら、新しい WebSocket サーバーを作成し、指定されたサーバーをリッスンする必要があります。クライアントとサーバーの間のリアルタイム通信に使用するポート。 onMessage コールバックでは、さまざまなメッセージタイプに応じてさまざまなリクエストが処理され、リアルタイムデータがサブスクライブされたクライアントに転送されます。

$ws_worker = new Worker("websocket://0.0.0.0:8080");//监听WebSocket端口8080

$ws_worker->count = 1;//设置Worker进程数

$ws_worker->onMessage = function ($connection, $data) {
    $message = json_decode($data, true);//接收来自客户端的消息，并解析JSON格式数据
    switch ($message['type']) {
        case 'subscribe':
            //TODO 处理订阅请求，并发送数据
            break;
        case 'unsubscribe':
            //TODO 处理取消订阅请求
            break;
        default:
            break;
    }
};

ログイン後にコピー

2. クライアント:

(1) HTML ページ:

HTML ページでは、WebSocket を使用して接続を確立し、データをサブスクライブする必要があります。新しいデータが到着すると、対応する視覚化チャートを更新する必要があります。ここでは、ECharts を例として、JavaScript を使用してデータの視覚化を実現する方法を示します。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>实时数据可视化</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.2.1/echarts.min.js"></script>
</head>
<body>
<div id="chart" style="width: 800px;height:400px;"></div>
<script>
    const socket = new WebSocket('ws://localhost:8080');//建立WebSocket连接

    //订阅请求
    socket.onopen = () => {
        socket.send(JSON.stringify({type: 'subscribe', data: {}}));
    };

    //接收来自服务器的消息
    socket.onmessage = (event) => {
        const message = JSON.parse(event.data);
        if (message.type === 'data') {//更新图表
            const chart = echarts.init(document.getElementById('chart'));
            const option = {
                xAxis: {
                    type: 'category',
                    data: message.data.xAxisData
                },
                yAxis: {
                    type: 'value'
                },
                series: [{
                    data: message.data.seriesData,
                    type: 'line'
                }]
            };
            chart.setOption(option);
        }
    };

    //取消订阅请求
    window.onbeforeunload = () => {
        socket.send(JSON.stringify({type: 'unsubscribe', data: {}}));
    };
</script>
</body>
</html>

ログイン後にコピー

(2) JavaScript コード:

JavaScript コードでは、WebSocket の接続イベントとメッセージイベントを監視し、メッセージの種類に応じて異なる処理 (サブスクライブなど) を実行する必要があります。リアルタイムデータと視覚化チャートの更新など。

const socket = new WebSocket('ws://localhost:8080');//建立WebSocket连接

//订阅请求
socket.onopen = () => {
    socket.send(JSON.stringify({type: 'subscribe', data: {}}));
};

//接收来自服务器的消息
socket.onmessage = (event) => {
    const message = JSON.parse(event.data);
    if (message.type === 'data') {//更新图表
        const chart = echarts.init(document.getElementById('chart'));
        const option = {
            xAxis: {
                type: 'category',
                data: message.data.xAxisData
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                data: message.data.seriesData,
                type: 'line'
            }]
        };
        chart.setOption(option);
    }
};

//取消订阅请求
window.onbeforeunload = () => {
    socket.send(JSON.stringify({type: 'unsubscribe', data: {}}));
};

ログイン後にコピー

3. 概要

この記事では、Workerman フレームワークを使用して HTTP プロトコルに基づくリアルタイムデータ視覚化システムを開発する方法を紹介し、具体的なコード例を示します。 WebSocket を介したクライアントとサーバー間のリアルタイム通信により、システムの応答速度と同時処理能力が向上し、一定の利点があります。

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