ホームページ >PHPフレームワーク >Workerman >Workerman 開発: HTTP プロトコルに基づいたリアルタイム データ視覚化システムを実装する方法
Workerman 開発: HTTP プロトコルに基づいたリアルタイム データ視覚化システムを実装する方法
- PHPzオリジナル
- 2023-11-07 08:01:001235ブラウズ
Workerman は、リアルタイム通信、メッセージ プッシュ、データ視覚化などの機能を迅速に構築できる高性能 PHP ネットワーク通信フレームワークです。この記事では、Workerman を使用して HTTP プロトコルに基づいたリアルタイム データ視覚化システムを開発する方法を紹介し、具体的なコード例を示します。
1. システム設計
本システムは B/S アーキテクチャを採用しており、ブラウザ (Browser) とサーバー (Server) は HTTP プロトコルを介して通信します。
1. サーバー側:
(1) Workerman フレームワークを使用して HTTP サーバーを確立し、デフォルト ポート (80) をリッスンします;
(2) データを取得しますPHP スクリプトを通じてリアルタイムでデータを JSON 形式でブラウザに返します。
(3) Websocket プロトコルを使用して、サーバーとクライアント間のリアルタイム通信を実装します。複数のクライアントが同時にリクエストを送信する状況。
2. クライアント:
(1) HTML、CSS、および JavaScript を使用して、データ視覚化インターフェイスとデータ要求インターフェイスを含むフロントエンド ページを構築します;
(2) JavaScript を使用してサーバーとの Websocket 接続を確立し、リアルタイム データをプッシュして視覚化します。
2. 具体的な実装
1. サーバー側:
(1) Composer を使用して Workerman フレームワークをインストールします:
composer require workerman/workerman
(2) インデックスを作成します.php ファイルを作成し、HTTP サーバーを構築します:
<?php
require_once __DIR__ . '/vendor/autoload.php';//引入Workerman框架
use WorkermanProtocolsHttpRequest;
use WorkermanProtocolsHttpResponse;
use WorkermanWorker;
$http_worker = new Worker("http://0.0.0.0:80");//监听默认端口80
$http_worker->onMessage = function (Request $request) {
$path = $request->path();//获取请求路径
if ($path == '/') {//处理请求，返回HTML页面
$response_str = file_get_contents(__DIR__ . '/index.html');
$response = new Response(200, [], $response_str);
$request->send($response);
} elseif ($path == '/data') {//处理请求，返回JSON数据
$data = getData();//获取实时数据
$response = new Response(200, [], json_encode($data));//将数据转化为JSON格式
$request->send($response);
}
};
$http_worker->onWorkerStart = function () {
global $ws_worker;
$ws_worker = new Worker("websocket://0.0.0.0:8080");//监听WebSocket端口8080
$ws_worker->count = 1;//设置Worker进程数
$ws_worker->onMessage = function ($connection, $data) {
$message = json_decode($data, true);//接收来自客户端的消息，并解析JSON格式数据
switch ($message['type']) {
case 'subscribe':
//TODO 处理订阅请求，并发送数据
break;
case 'unsubscribe':
//TODO 处理取消订阅请求
break;
default:
break;
}
};
Worker::runAll();//运行HTTP服务器和WebSocket服务器
};
//TODO 获取实时数据
function getData()
{
return [];
}
(3) WebSocket プロトコルを実装します:
HTTP サーバーが起動したら、新しい WebSocket サーバーを作成し、指定されたサーバーをリッスンする必要があります。クライアントとサーバーの間のリアルタイム通信に使用するポート。 onMessage コールバックでは、さまざまなメッセージ タイプに応じてさまざまなリクエストが処理され、リアルタイム データがサブスクライブされたクライアントに転送されます。
$ws_worker = new Worker("websocket://0.0.0.0:8080");//监听WebSocket端口8080
$ws_worker->count = 1;//设置Worker进程数
$ws_worker->onMessage = function ($connection, $data) {
$message = json_decode($data, true);//接收来自客户端的消息，并解析JSON格式数据
switch ($message['type']) {
case 'subscribe':
//TODO 处理订阅请求，并发送数据
break;
case 'unsubscribe':
//TODO 处理取消订阅请求
break;
default:
break;
}
};2. クライアント:
(1) HTML ページ:
HTML ページでは、WebSocket を使用して接続を確立し、データをサブスクライブする必要があります。新しいデータが到着すると、対応する視覚化チャートを更新する必要があります。ここでは、ECharts を例として、JavaScript を使用してデータの視覚化を実現する方法を示します。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>实时数据可视化</title>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.2.1/echarts.min.js"></script>
</head>
<body>
<div id="chart" style="width: 800px;height:400px;"></div>
<script>
const socket = new WebSocket('ws://localhost:8080');//建立WebSocket连接
//订阅请求
socket.onopen = () => {
socket.send(JSON.stringify({type: 'subscribe', data: {}}));
};
//接收来自服务器的消息
socket.onmessage = (event) => {
const message = JSON.parse(event.data);
if (message.type === 'data') {//更新图表
const chart = echarts.init(document.getElementById('chart'));
const option = {
xAxis: {
type: 'category',
data: message.data.xAxisData
},
yAxis: {
type: 'value'
},
series: [{
data: message.data.seriesData,
type: 'line'
}]
};
chart.setOption(option);
}
};
//取消订阅请求
window.onbeforeunload = () => {
socket.send(JSON.stringify({type: 'unsubscribe', data: {}}));
};
</script>
</body>
</html>(2) JavaScript コード:
JavaScript コードでは、WebSocket の接続イベントとメッセージ イベントを監視し、メッセージの種類に応じて異なる処理 (サブスクライブなど) を実行する必要があります。リアルタイムデータと視覚化チャートの更新など。
const socket = new WebSocket('ws://localhost:8080');//建立WebSocket连接
//订阅请求
socket.onopen = () => {
socket.send(JSON.stringify({type: 'subscribe', data: {}}));
};
//接收来自服务器的消息
socket.onmessage = (event) => {
const message = JSON.parse(event.data);
if (message.type === 'data') {//更新图表
const chart = echarts.init(document.getElementById('chart'));
const option = {
xAxis: {
type: 'category',
data: message.data.xAxisData
},
yAxis: {
type: 'value'
},
series: [{
data: message.data.seriesData,
type: 'line'
}]
};
chart.setOption(option);
}
};
//取消订阅请求
window.onbeforeunload = () => {
socket.send(JSON.stringify({type: 'unsubscribe', data: {}}));
};3. 概要
この記事では、Workerman フレームワークを使用して HTTP プロトコルに基づくリアルタイム データ視覚化システムを開発する方法を紹介し、具体的なコード例を示します。 WebSocket を介したクライアントとサーバー間のリアルタイム通信により、システムの応答速度と同時処理能力が向上し、一定の利点があります。
以上がWorkerman 開発: HTTP プロトコルに基づいたリアルタイム データ視覚化システムを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。