So implementieren Sie mit Workerman ein Echtzeit-Datenvisualisierungssystem-Workerman-php.cn

So implementieren Sie mit Workerman ein Echtzeit-Datenvisualisierungssystem

WBOY

Freigeben： 2023-11-07 08:48:14

Original

690 Leute haben es durchsucht

So implementieren Sie mit Workerman ein Echtzeit-Datenvisualisierungssystem

Workerman ist ein leistungsstarkes PHP-Socket-Framework, das auf PHP basiert. Es wird zur Entwicklung von Netzwerkanwendungen verwendet und bietet die Vorteile von Effizienz, Stabilität und Skalierbarkeit. Das größte Merkmal ist, dass es eine hohe Parallelität unterstützt und Millionen von TCP-Verbindungen verarbeiten kann.

In diesem Artikel stellen wir vor, wie Sie Workerman zum Implementieren eines Echtzeit-Datenvisualisierungssystems verwenden, einschließlich der Verwendung von Workerman zum Erstellen eines WebSocket-Servers, der Verwendung der WebSocket-API von JavaScript zum Abrufen von Echtzeitdaten usw Verwenden Sie die Werkzeugbibliothek D3.js, um visuelle Diagramme zu zeichnen.

Workerman installieren

Die Installation von Workerman ist sehr einfach. Es wird empfohlen, Composer für die Installation zu verwenden. Führen Sie die folgenden Vorgänge im Terminal aus:

composer require workerman/workerman

Nach dem Login kopieren

Erstellen Sie einen WebSocket-Server

Die Schritte zum Erstellen eines WebSocket-Servers lauten wie folgt:

Erstellen Sie die WebSocket-Serverdatei server.php, der Code lautet wie folgt:

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

Nach dem Login kopieren

Der Code implementiert hauptsächlich die folgenden Funktionen:

php server.php start

Nach dem Login kopieren

Der Code für die Verwendung der WebSocket-API von JavaScript, um Echtzeitdaten im Browser abzurufen, lautet wie folgt:

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

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

Nach dem Login kopieren

Der Code implementiert hauptsächlich die folgenden Funktionen:

Verwenden Sie D3.js zum Zeichnen visueller Diagramme

Der Code für die Verwendung von D3.js zum Zeichnen visueller Diagramme im Browser lautet wie folgt:

<!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>

Nach dem Login kopieren

Der Code implementiert hauptsächlich die folgenden Funktionen:

Maßstab definieren;

Pfadelemente hinzufügen;

Echtzeitdaten empfangen;

Zu diesem Zeitpunkt haben wir den gesamten Code zur Implementierung eines Echtzeit-Datenvisualisierungssystems mit Workerman, JavaScript und D3.js fertiggestellt. Öffnen Sie die HTML-Datei in Ihrem Browser und Sie sehen ein ständig aktualisiertes Liniendiagramm, das die kontinuierlich übertragenen Zufallszahlen darstellt.

Das obige ist der detaillierte Inhalt vonSo implementieren Sie mit Workerman ein Echtzeit-Datenvisualisierungssystem. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!