Maison >cadre php >Workerman >Comment utiliser Workerman pour mettre en œuvre un système de visualisation de données en temps réel

Comment utiliser Workerman pour mettre en œuvre un système de visualisation de données en temps réel

WBOYoriginal: 2023-11-07 08:48:14751parcourir

Workerman est un framework de socket PHP hautes performances développé sur la base de PHP. Il est utilisé pour développer des applications réseau et présente les avantages d'efficacité, de stabilité et d'évolutivité. La plus grande fonctionnalité est qu'il prend en charge une concurrence élevée et peut gérer des millions de connexions TCP.

Dans cet article, nous présenterons comment utiliser Workerman pour implémenter un système de visualisation de données en temps réel, notamment comment utiliser Workerman pour créer un serveur WebSocket, comment utiliser l'API WebSocket de JavaScript pour obtenir des données en temps réel et comment utilisez la bibliothèque d'outils D3.js pour dessiner des graphiques visuels.

Installation de Workerman

L'installation de Workerman est très simple. Il est recommandé d'utiliser Composer pour l'installation. Effectuez les opérations suivantes dans le terminal :

composer require workerman/workerman

Construire un serveur WebSocket

Les étapes pour construire un serveur WebSocket sont les suivantes :

Créez le fichier server.php du serveur WebSocket, le code est le suivant :

require_once __DIR__ . '/vendor/autoload.php';  

use WorkermanWorker;
use WorkermanLibTimer;
use WorkermanConnectionTcpConnection;

$ws_worker = new Worker("websocket://0.0.0.0:2346");

$ws_worker->onConnect = function (TcpConnection $connection) {
    echo "client connected
";
};

$ws_worker->onMessage = function (TcpConnection $connection, $data) {
    $connection->send(json_encode(array(
        'value' => rand(1, 100)
    )));
};

$ws_worker->onClose = function (TcpConnection $connection) {
    echo "client closed
";
};

$ws_worker->onWorkerStart = function (Worker $ws_worker) {
    // 每隔1秒钟向所有客户端推送一次随机数据
    Timer::add(1, function () use ($ws_worker) {
        foreach ($ws_worker->connections as $connection) {
            $connection->send(json_encode(array(
                'value' => rand(1, 100)
            )));
        }
    });
};

Worker::runAll();

Le code implémente principalement les fonctions suivantes :

Créer un serveur WebSocket ;
Écouter les événements de connexion du client ;
Écouter les événements de connexion du client ; , envoyez régulièrement des données aléatoires à tous les clients.
Exécutez le serveur WebSocket dans le terminal :

php server.php start

Utilisez JavaScript pour obtenir des données en temps réel

var ws = new WebSocket('ws://localhost:2346');  

ws.onmessage = function (event) {  
    var data = JSON.parse(event.data);  
    console.log(data.value);  
}

Créer une connexion WebSocket

Lors de la réception des données du serveur, analyser les données et les afficher sur la console ;

Utilisez D3.js pour dessiner des graphiques visuels

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Realtime Data Visualization</title>
    <script src="https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
<script>  
    var data = [];

    var width = 800;
    var height = 500;

    var svg = d3.select('body')
        .append('svg')
        .attr('width', width)
        .attr('height', height);

    var xScale = d3.scaleLinear()
        .range([0, width])
        .domain([0, 10]);

    var yScale = d3.scaleLinear()
        .range([height, 0])
        .domain([0, 100]);

    var line = d3.line()
        .x(function (d) {
            return xScale(d.index);
        })
        .y(function (d) {
            return yScale(d.value);
        });

    var path = svg.append('path')
        .attr('fill', 'none')
        .attr('stroke', 'steelblue')
        .attr('stroke-width', '1');

    var shift = 0;
    ws.onmessage = function (event) {
        var dataItem = JSON.parse(event.data);

        // 添加新数据
        data.push({
            index: shift,
            value: dataItem.value
        });

        // X轴平移
        if (shift >= 10) {
            shift--;
        }

        // 更新数据的X轴位置
        data.forEach(function (d) {
            d.index = d.index + 1;
        });

        // 更新路径数据
        path.attr('d', line(data));

        shift++;
    };
</script>
</body>
</html>

Créer des éléments SVG ;

Définir l'échelle ;

Définir un générateur de chemin ;
Ajouter des éléments de chemin ;
Recevoir des données en temps réel et mettre à jour les données de chemin.
À ce stade, nous avons terminé tout le code pour implémenter un système de visualisation de données en temps réel utilisant Workerman, JavaScript et D3.js. Ouvrez le fichier HTML dans votre navigateur et vous pourrez voir un graphique linéaire constamment mis à jour représentant les nombres aléatoires poussés en continu.

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!

php JavaScript composer html 并发 JS 事件 websocket Workerman

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Développement Workerman : Comment implémenter un système de gestion de fichiers à distance basé sur le protocole TCPArticle suivant：Développement Workerman : Comment implémenter un système de gestion de fichiers à distance basé sur le protocole TCP

Articles Liés

Voir plus