Développement Workerman : Comment implémenter un système de visualisation de données en temps réel basé sur le protocole HTTP

Workerman est un framework de communication réseau PHP hautes performances qui peut créer rapidement des fonctions telles que la communication en temps réel, l'envoi de messages et la visualisation de données. Cet article expliquera comment utiliser Workerman pour développer un système de visualisation de données en temps réel basé sur le protocole HTTP et fournira des exemples de code spécifiques.

1. Conception du système

Ce système adopte l'architecture B/S, c'est-à-dire que le navigateur (Browser) et le serveur (Server) communiquent via le protocole HTTP.

1. Côté serveur :

(1) Utilisez le framework Workerman pour établir un serveur HTTP et écoutez le port par défaut (80) 

(2) Obtenez des données en temps réel via des scripts PHP et renvoyez les données au serveur ; navigateur au format JSON ;

(3) Utilisez le protocole Websocket pour établir une communication en temps réel entre le serveur et le client, qui est utilisé pour gérer la situation où plusieurs clients envoient des requêtes en même temps.

2. Client :

(1) Utiliser HTML, CSS et JavaScript pour créer des pages frontales, y compris une interface de visualisation de données et une interface de demande de données ;

(2) Établir une connexion Websocket avec le serveur via JavaScript pour obtenir un résultat réel ; -Push de données temporelles et visualisation.

2. Implémentation spécifique

1. Côté serveur :

(1) Utilisez Composer pour installer le framework Workerman :

composer require workerman/workerman

(2) Créez le fichier index.php et construisez un serveur 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) Implémentez le protocole WebSocket :

Après le démarrage du serveur Http, vous devez créer un nouveau serveur WebSocket et écouter le port spécifié pour la communication en temps réel entre le client et le serveur. Dans le rappel onMessage, différentes demandes sont traitées en fonction de différents types de messages et les données en temps réel sont transmises au client abonné.

$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) Page HTML :

Dans la page HTML, vous devez utiliser WebSocket pour établir une connexion et vous abonner aux données. Lorsque de nouvelles données arrivent, le graphique de visualisation correspondant doit être mis à jour. Ici, nous prenons ECharts comme exemple pour montrer comment utiliser JavaScript pour réaliser la visualisation des données.

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

Dans le code JavaScript, vous devez surveiller les événements de connexion et de message de WebSocket, et effectuer différents traitements en fonction des différents types de messages, tels que l'abonnement aux données en temps réel et la mise à jour des graphiques visuels. , etc.

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. Résumé

Cet article présente comment utiliser le framework Workerman pour développer un système de visualisation de données en temps réel basé sur le protocole HTTP et fournit des exemples de code spécifiques. La communication en temps réel entre le client et le serveur via WebSocket peut améliorer la vitesse de réponse du système et les capacités de traitement simultané, ce qui présente certains avantages.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!