使用PHP和MQTT实现实时数据监控和可视化的最佳实践

composer require phpmqtt/phpmqtt

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

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

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