Pembangunan pekerja: Bagaimana untuk melaksanakan sistem visualisasi data masa nyata berdasarkan protokol HTTP

Workerman ialah rangka kerja komunikasi rangkaian PHP berprestasi tinggi yang boleh membina fungsi dengan cepat seperti komunikasi masa nyata, tolakan mesej dan visualisasi data. Artikel ini akan memperkenalkan cara menggunakan Workerman untuk membangunkan sistem visualisasi data masa nyata berdasarkan protokol HTTP dan memberikan contoh kod khusus.

1. Reka Bentuk Sistem

Sistem ini mengamalkan seni bina B/S, iaitu pelayar (Pelayar) dan pelayan (Pelayan) berkomunikasi melalui protokol HTTP.

1. Bahagian pelayan:

(1) Gunakan rangka kerja Workerman untuk mewujudkan pelayan HTTP dan dengarkan port lalai (80)

(2) Dapatkan data dalam masa nyata melalui skrip PHP dan kembalikan data kepada pelayar dalam format JSON

(3) Gunakan protokol Websocket untuk mencapai komunikasi masa nyata antara pelayan dan klien, yang digunakan untuk mengendalikan situasi di mana berbilang pelanggan menghantar permintaan pada masa yang sama.

2. Pelanggan:

(1) Gunakan HTML, CSS dan JavaScript untuk membina halaman hadapan, termasuk antara muka visualisasi data dan antara muka permintaan data

(2) Wujudkan sambungan Websocket dengan pelayan melalui JavaScript untuk mencapainya tolakan dan Visualisasi data masa nyata.

2. Pelaksanaan khusus

1. Bahagian pelayan:

(1) Gunakan Komposer untuk memasang rangka kerja Workerman:

composer require workerman/workerman

(2) Cipta fail index.php dan bina pelayan 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)

Laksanakan protokol WebSocket:

Selepas pelayan Http dimulakan, anda perlu mencipta pelayan WebSocket baharu dan mendengar port yang ditentukan untuk komunikasi masa nyata antara klien dan pelayan. Dalam panggilan balik onMessage, permintaan yang berbeza diproses mengikut jenis mesej yang berbeza dan data masa nyata dimajukan kepada pelanggan yang dilanggan.

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

(1) halaman HTML:

Dalam halaman HTML, anda perlu menggunakan WebSocket untuk membuat sambungan dan melanggan data. Apabila data baharu tiba, carta visualisasi yang sepadan perlu dikemas kini. Di sini kami mengambil ECharts sebagai contoh untuk menunjukkan cara menggunakan JavaScript untuk mencapai visualisasi data.

<!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) Kod JavaScript:

Dalam kod JavaScript, anda perlu memantau sambungan dan peristiwa mesej WebSocket, dan melakukan pemprosesan yang berbeza mengikut jenis mesej yang berbeza, seperti melanggan data masa nyata dan mengemas kini carta visual , dsb.

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 Ringkasan

Artikel ini memperkenalkan cara menggunakan rangka kerja Workerman untuk membangunkan sistem visualisasi data masa nyata berdasarkan protokol HTTP, dan menyediakan contoh kod khusus. Komunikasi masa nyata antara pelanggan dan pelayan melalui WebSocket boleh meningkatkan kelajuan tindak balas sistem dan keupayaan pemprosesan serentak, yang mempunyai kelebihan tertentu.

Atas ialah kandungan terperinci Pembangunan pekerja: Bagaimana untuk melaksanakan sistem visualisasi data masa nyata berdasarkan protokol HTTP. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!