PHP と MQTT を使用したリアルタイムのデータ監視と視覚化のベスト プラクティス

PHP および MQTT を使用したリアルタイム データの監視と視覚化のベスト プラクティス

要約:
この記事では、PHP および MQTT プロトコルを使用してリアルタイム データの監視と視覚化を実装する方法を紹介します。メッセージングには MQTT を使用し、メッセージの処理とデータのレンダリングには PHP を使用します。この記事のガイドを通じて、シンプルなリアルタイム データ監視システムを構築する方法と、データを視覚的に表示する方法を学びます。

はじめに:
インターネットの普及により、さまざまなセンサーやデバイスを通じて大量のリアルタイムデータを取得できるようになりました。データをより深く理解し、意思決定を行えるように、これらのデータをどのように監視および視覚化するかが重要な問題となっています。この記事では、PHP と MQTT を使用したリアルタイム データの監視と視覚化のベスト プラクティスに焦点を当てます。

1. MQTT プロトコルとは何ですか?
MQTT (Message Queuing Telemetry Transport) は、軽量でオープンな、実装が簡単なメッセージング プロトコルです。ネットワーク全体の送信、低帯域幅、不安定なネットワーク環境に適しており、IoT シナリオに非常に適しています。 MQTT は、パブリッシュ/サブスクライブ モデルを使用してメッセージを配信します。これには、低リソース消費と低遅延という特徴があります。

2. MQTT サーバーの構築
MQTT プロトコルを使用する前に、MQTT サーバーを構築する必要があります。 Mosquitto、EMQ X など、多くのオープンソース MQTT サーバーから選択できます。ここではMosquittoを例に挙げて紹介します。

まず、Mosquitto サーバーをインストールします。コマンドラインまたはグラフィカルインターフェースからインストールできますが、具体的な方法についてはMosquittoの公式ドキュメントを参照してください。インストールが完了したら、Mosquitto サーバーを起動します。

3. PHP を使用して MQTT サーバーに接続する
PHP で MQTT プロトコルを使用するには、PHP の MQTT クライアント ライブラリを使用する必要があります。ここでは phpmqtt/phpmqtt ライブラリを使用します。このライブラリは Composer を通じてインストールできます。

composer require phpmqtt/phpmqtt

インストールが完了したら、次のコードを使用して MQTT サーバーのトピックに接続してサブスクライブできます。

<?php
require("vendor/autoload.php");

use PhpMqttClientMqttClient;

$client = new MqttClient("mqtt://localhost:1883");
$client->connect();

$client->subscribe("topic_name", function (string $topic, string $message){
    // 处理接收到的消息
    // 在这里可以对接收到的消息进行处理，如存储到数据库等
});

while (true) {
    $client->loop(true);
}

コード内では、まず MqttClient オブジェクトを作成し、次に connect メソッドを使用して Mosquitto サーバーに接続します。次に、subscribe メソッドを使用してトピックをサブスクライブします。メッセージを受信するコールバック関数では、受信したメッセージを処理できます。最後に、ループ内でループ メソッドを呼び出して、MQTT メッセージのリッスンを続けます。

4. データの視覚化
MQTT サーバーに正常に接続し、関連トピックをサブスクライブしたら、データの視覚化を開始できます。ここでは、Chart.js ライブラリを使用してグラフをレンダリングします。

まず、Chart.js ライブラリ ファイルを導入します:

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

次に、チャートを表示するために HTML で Canvas 要素を作成します:

<canvas id="myChart" width="400" height="400"></canvas>

次に、以下を使用します。データを取得してグラフを表示するコード:

var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: [], // x轴上的标签
        datasets: [{
            label: '实时数据', // 数据集的标签
            data: [], // 数据值
            fill: false, // 是否填充
            borderColor: 'rgb(75, 192, 192)',
            tension: 0.1 // 曲线的张力
        }]
    },
    options: {
        responsive: true,
        animation: false,
        scales: {
            x: {
                display: true
                // 其他相关配置
            },
            y: {
                display: true
                // 其他相关配置
            }
        }
    }
});

// 定义一个数组，用于存储接收到的数据
var dataArr = [];

// 在消息回调函数中更新图表数据
client.subscribe("topic_name", function (topic, message) {
    var data = parseFloat(message);
    dataArr.push(data.toFixed(2));
    if (dataArr.length > 10) {
        dataArr.shift();
    }

    // 更新图表数据
    myChart.data.labels = Array.from({length: dataArr.length}, (_, i) => i + 1);
    myChart.data.datasets[0].data = dataArr;
    myChart.update();
});

上記のコードでは、まず Chart オブジェクトを作成し、グラフの種類を折れ線グラフに設定します。次に、受信したデータを格納する配列 dataArr を定義します。メッセージ コールバック関数では、受信したデータを dataArr 配列に追加し、チャート データを更新します。最後に、update メソッドを呼び出してチャートの表示を更新します。

結論:
この記事では、PHP および MQTT プロトコルを使用してリアルタイムのデータ監視と視覚化を実現する方法に関するベスト プラクティスを紹介しました。 MQTT サーバーを構築し、PHP ライブラリを使用してサーバーに接続してトピックをサブスクライブし、Chart.js ライブラリを使用してグラフを描画することで、シンプルなリアルタイム データ監視システムを迅速に構築し、データを視覚的に表示できます。この記事がリアルタイム データの監視と視覚化の開発に役立つことを願っています。

以上がPHP と MQTT を使用したリアルタイムのデータ監視と視覚化のベスト プラクティスの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。