Workerman is a high-performance PHP network communication framework that can quickly build functions such as real-time communication, message push, and data visualization. This article will introduce how to use Workerman to develop a real-time data visualization system based on HTTP protocol, and provide specific code examples.

1. System Design

This system adopts B/S architecture, that is, the browser (Browser) and the server (Server) communicate through the HTTP protocol.

1. Server side:

(1) Use the Workerman framework to establish an HTTP server and listen to the default port (80);

(2) Obtain data in real time through PHP scripts , and returns the data to the browser in JSON format;

(3) Use the Websocket protocol to implement real-time communication between the server and the client, which is used to handle the situation where multiple clients send requests at the same time.

2. Client:

(1) Use HTML, CSS and JavaScript to build front-end pages, including data visualization interface and data request interface;

(2) Through JavaScript Establish a Websocket connection with the server to push and visualize real-time data.

2. Specific implementation

1. Server side:

(1) Use Composer to install the Workerman framework:

composer require workerman/workerman

(2) Create index.php file and build the 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");//監(jiān)聽(tīng)默認(rèn)端口80

$http_worker->onMessage = function (Request $request) {
    $path = $request->path();//獲取請(qǐng)求路徑
    if ($path == '/') {//處理請(qǐng)求，返回HTML頁(yè)面
        $response_str = file_get_contents(__DIR__ . '/index.html');
        $response = new Response(200, [], $response_str);
        $request->send($response);
    } elseif ($path == '/data') {//處理請(qǐng)求，返回JSON數(shù)據(jù)
        $data = getData();//獲取實(shí)時(shí)數(shù)據(jù)
        $response = new Response(200, [], json_encode($data));//將數(shù)據(jù)轉(zhuǎn)化為JSON格式
        $request->send($response);
    }
};

$http_worker->onWorkerStart = function () {
    global $ws_worker;
    $ws_worker = new Worker("websocket://0.0.0.0:8080");//監(jiān)聽(tīng)WebSocket端口8080

    $ws_worker->count = 1;//設(shè)置Worker進(jìn)程數(shù)

    $ws_worker->onMessage = function ($connection, $data) {
        $message = json_decode($data, true);//接收來(lái)自客戶端的消息，并解析JSON格式數(shù)據(jù)
        switch ($message['type']) {
            case 'subscribe':
                //TODO 處理訂閱請(qǐng)求，并發(fā)送數(shù)據(jù)
                break;
            case 'unsubscribe':
                //TODO 處理取消訂閱請(qǐng)求
                break;
            default:
                break;
        }
    };

    Worker::runAll();//運(yùn)行HTTP服務(wù)器和WebSocket服務(wù)器
};

//TODO 獲取實(shí)時(shí)數(shù)據(jù)
function getData()
{
    return [];
}

(3) Implement the WebSocket protocol:

After the Http server is started, you need to create a new WebSocket server and listen to the specified port for use between the client and the server real-time communication. In the onMessage callback, different requests are processed according to different message types, and real-time data is forwarded to the subscribed client.

$ws_worker = new Worker("websocket://0.0.0.0:8080");//監(jiān)聽(tīng)WebSocket端口8080

$ws_worker->count = 1;//設(shè)置Worker進(jìn)程數(shù)

$ws_worker->onMessage = function ($connection, $data) {
    $message = json_decode($data, true);//接收來(lái)自客戶端的消息，并解析JSON格式數(shù)據(jù)
    switch ($message['type']) {
        case 'subscribe':
            //TODO 處理訂閱請(qǐng)求，并發(fā)送數(shù)據(jù)
            break;
        case 'unsubscribe':
            //TODO 處理取消訂閱請(qǐng)求
            break;
        default:
            break;
    }
};

2. Client:

(1) HTML page:

In the HTML page, you need to use WebSocket to establish a connection and subscribe to data. When new data arrives, the corresponding visualization chart needs to be updated. Here we take ECharts as an example to show how to use JavaScript to achieve data visualization.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>實(shí)時(shí)數(shù)據(jù)可視化</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連接

    //訂閱請(qǐng)求
    socket.onopen = () => {
        socket.send(JSON.stringify({type: 'subscribe', data: {}}));
    };

    //接收來(lái)自服務(wù)器的消息
    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);
        }
    };

    //取消訂閱請(qǐng)求
    window.onbeforeunload = () => {
        socket.send(JSON.stringify({type: 'unsubscribe', data: {}}));
    };
</script>
</body>
</html>

(2) JavaScript code:

In the JavaScript code, you need to monitor the connection and message events of WebSocket, and perform different processing according to different message types, such as subscribing to real-time data and updating visualization Charts etc.

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

//訂閱請(qǐng)求
socket.onopen = () => {
    socket.send(JSON.stringify({type: 'subscribe', data: {}}));
};

//接收來(lái)自服務(wù)器的消息
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);
    }
};

//取消訂閱請(qǐng)求
window.onbeforeunload = () => {
    socket.send(JSON.stringify({type: 'unsubscribe', data: {}}));
};

3. Summary

This article introduces how to use the Workerman framework to develop a real-time data visualization system based on the HTTP protocol, and provides specific code examples. Real-time communication between the client and the server through WebSocket can improve the system's response speed and concurrent processing capabilities, which has certain advantages.

The above is the detailed content of Workerman development: How to implement a real-time data visualization system based on HTTP protocol. For more information, please follow other related articles on the PHP Chinese website!