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

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

WBOY

Libérer： 2023-11-07 08:48:14

original

751 Les gens l'ont consulté

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

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

Copier après la connexion

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();

Copier après la connexion

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

Copier après la connexion

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);  
}

Copier après la connexion

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>

Copier après la connexion

Le code implémente principalement les fonctions suivantes :

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!