Heim >PHP-Framework >Workerman >So implementieren Sie mit Workerman ein Echtzeit-Datenvisualisierungssystem

So implementieren Sie mit Workerman ein Echtzeit-Datenvisualisierungssystem

WBOYOriginal: 2023-11-07 08:48:14751Durchsuche

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

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

Der Code implementiert hauptsächlich die folgenden Funktionen:

Führen Sie den WebSocket-Server im Terminal aus:
```
php server.php start
```
Verwenden Sie JavaScript, um Echtzeitdaten abzurufen.

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

Der Code implementiert hauptsächlich die folgenden Funktionen:

Wenn Sie Daten vom Server empfangen, analysieren Sie die Daten und geben Sie sie auf der Konsole aus.

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>

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!

php JavaScript composer html 并发 JS 事件 websocket Workerman

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Workerman-Entwicklung: So implementieren Sie ein Remote-Dateiverwaltungssystem basierend auf dem TCP-ProtokollNächster Artikel：Workerman-Entwicklung: So implementieren Sie ein Remote-Dateiverwaltungssystem basierend auf dem TCP-Protokoll

In Verbindung stehende Artikel

Mehr sehen