Workerman-Entwicklung: So implementieren Sie ein Echtzeit-Datenvisualisierungssystem basierend auf dem HTTP-Protokoll

Workerman ist ein leistungsstarkes PHP-Netzwerkkommunikations-Framework, mit dem schnell Funktionen wie Echtzeitkommunikation, Nachrichten-Push und Datenvisualisierung erstellt werden können. In diesem Artikel wird erläutert, wie Sie mit Workerman ein Echtzeit-Datenvisualisierungssystem basierend auf dem HTTP-Protokoll entwickeln, und es werden spezifische Codebeispiele bereitgestellt.

1. Systemdesign

Dieses System verwendet die B/S-Architektur, das heißt, der Browser (Browser) und der Server (Server) kommunizieren über das HTTP-Protokoll.

1. Serverseite:

(1) Verwenden Sie das Workerman-Framework, um einen HTTP-Server einzurichten und den Standardport (80) abzuhören.

(2) Erhalten Sie Daten in Echtzeit über PHP-Skripte und geben Sie die Daten an den Server zurück Browser im JSON-Format;

(3) Verwenden Sie das Websocket-Protokoll, um eine Echtzeitkommunikation zwischen dem Server und dem Client zu erreichen, die zur Bewältigung der Situation verwendet wird, in der mehrere Clients gleichzeitig Anfragen senden.

2. Client:

(1) Verwenden Sie HTML, CSS und JavaScript, um Front-End-Seiten zu erstellen, einschließlich Datenvisualisierungsschnittstelle und Datenanforderungsschnittstelle Zeitlicher Daten-Push und Visualisierung.

2. Spezifische Implementierung

1. Serverseite:

(1) Verwenden Sie Composer, um das Workerman-Framework zu installieren:

composer require workerman/workerman

(2) Erstellen Sie die Datei index.php und erstellen Sie einen HTTP-Server:

<?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) Implementieren Sie das WebSocket-Protokoll:

Nachdem der HTTP-Server gestartet wurde, müssen Sie einen neuen WebSocket-Server erstellen und den angegebenen Port für die Echtzeitkommunikation zwischen dem Client und dem Server abhören. Beim onMessage-Rückruf werden unterschiedliche Anforderungen je nach Nachrichtentyp verarbeitet und Echtzeitdaten an den abonnierten Client weitergeleitet.

$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. Client:

(1) HTML-Seite:

Auf der HTML-Seite müssen Sie WebSocket verwenden, um eine Verbindung herzustellen und Daten zu abonnieren. Wenn neue Daten eintreffen, muss das entsprechende Visualisierungsdiagramm aktualisiert werden. Hier nehmen wir ECharts als Beispiel, um zu zeigen, wie JavaScript zur Datenvisualisierung verwendet wird.

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

Im JavaScript-Code müssen Sie die Verbindungs- und Nachrichtenereignisse von WebSocket überwachen und je nach Nachrichtentyp unterschiedliche Verarbeitungen durchführen, z. B. das Abonnieren von Echtzeitdaten und das Aktualisieren visueller Diagramme , usw.

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. Zusammenfassung

In diesem Artikel wird die Verwendung des Workerman-Frameworks zur Entwicklung eines Echtzeit-Datenvisualisierungssystems basierend auf dem HTTP-Protokoll vorgestellt und spezifische Codebeispiele bereitgestellt. Die Echtzeitkommunikation zwischen dem Client und dem Server über WebSocket kann die Reaktionsgeschwindigkeit und die gleichzeitige Verarbeitungsfähigkeit des Systems verbessern, was bestimmte Vorteile mit sich bringt.

Das obige ist der detaillierte Inhalt vonWorkerman-Entwicklung: So implementieren Sie ein Echtzeit-Datenvisualisierungssystem basierend auf dem HTTP-Protokoll. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!