
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:
1 | 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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 | 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 ) {
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:
Erstellen eines WebSocket-Servers; , Übertragen Sie regelmäßig zufällige Daten an alle Clients. Führen Sie den WebSocket-Server im Terminal aus: 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:
1 2 3 4 5 6 | 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:
Erstellen Sie eine WebSocket-Verbindung. 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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 | <!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
});
if (shift >= 10) {
shift--;
}
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:
SVG-Elemente erstellen ; - 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!