Best practices for real-time data visualization using PHP and MQTT-PHP Tutorial-php.cn

Best practices for real-time data visualization using PHP and MQTT

PHPz

Release： 2023-07-07 17:56:01

Original

870 people have browsed it

Best practices for real-time data visualization using PHP and MQTT

Introduction:
With the continuous development of IoT technology, we can easily collect various sensor data. How to visualize this data in real time is an important challenge. This article will introduce the best practices on how to use PHP and MQTT protocols to achieve real-time data visualization.

1. What is the MQTT protocol?
MQTT is a lightweight communication protocol used for communication between IoT devices. It is simple, lightweight, and open source, making it very suitable for IoT applications.

2. Why choose PHP and MQTT?

As a scripting language, PHP is easy to learn and use.
The MQTT protocol has the characteristics of low bandwidth, low power consumption and high reliability, making it very suitable for IoT applications.
PHP has rich MQTT client libraries, such as Mosquitto, PHPMQTT, etc., which can easily communicate with the MQTT server.

3. Best practices for real-time data visualization
In the process of realizing real-time data visualization, we need to carry out the following steps:

Preparing the environment
First, we need to install the MQTT server, such as Mosquitto, on the server. Then, we need to install the MQTT client library for PHP, such as Mosquitto-PHP. It can be installed by running the following command:
```
sudo apt-get install mosquitto mosquitto-clients
sudo apt-get install php-pear
sudo apt-get install php-dev
sudo pecl install Mosquitto-alpha
sudo echo "extension=mosquitto.so" > /etc/php/7.2/cli/conf.d/20-mosquitto.ini
```
Copy after login

Create MQTT Client
Next, we need to create an MQTT client to communicate with the MQTT server. We can use the Mosquitto-PHP library to create the client. The sample code is as follows:

<?php
$mqtt = new MosquittoClient();
$mqtt->onConnect('connectHandler');
$mqtt->onMessage('messageHandler');
$mqtt->connect('mqtt.example.com', 1883, 60); // 连接到MQTT服务器

function connectHandler($r)
{
 // 连接成功后的处理逻辑
}

function messageHandler($m)
{
 // 接收到消息后的处理逻辑
}

$mqtt->loopForever(); //开启循环监听

Copy after login

Publish data
Where data needs to be published, we can use the following code to publish data:
```
$mqtt->publish('topic', 'message', 2, false); // 发布消息
```
Copy after login
Subscribe data
Where we need to subscribe to data, we can use the following code to subscribe to the data:
```
$mqtt->subscribe('topic', 2); // 订阅消息
```
Copy after login
Data visualization
After receiving the data, we can use the corresponding chart library to perform data visualization. This can be achieved using chart libraries such as Highcharts and Echarts.

4. Example Demonstration
Let’s implement a simple real-time temperature monitoring system. First, we create a client that publishes data, such as a sensor device:

$mqtt = new MosquittoClient();
$mqtt->connect('mqtt.example.com', 1883, 60);

while (true) {
    $temperature = getTemperature(); // 获取温度数据
    $mqtt->publish('temperature', $temperature, 2, false);
    sleep(1); // 每隔1秒发布一次数据
}

Copy after login

Then, we create a client that subscribes to data to receive and display real-time temperature data:

$mqtt = new MosquittoClient();
$mqtt->connect('mqtt.example.com', 1883, 60);
$mqtt->subscribe('temperature', 2);

$mqtt->onMessage(function ($message){
    $temperature = $message->payload;
    echo '当前温度：' . $temperature . '℃';
});

$mqtt->loopForever();

Copy after login

Finally , we use Highcharts to achieve real-time temperature visualization. First, we need to introduce the Highcharts library, then create a temperature chart, and update the chart after receiving the data:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="https://code.highcharts.com/highcharts.js"></script>
    <script src="https://code.highcharts.com/modules/exporting.js"></script>
</head>
<body>
    <div id="container"></div>

    <script>
        var chart = Highcharts.chart('container', {
            title: {
                text: '实时温度监控'
            },
            series: [{
                name: 'Temperature',
                data: []
            }]
        });

        var topic = 'temperature';

        var client = new Paho.MQTT.Client("mqtt.example.com", 1883, "clientId");

        client.onConnectionLost = function (responseObject) {
            if (responseObject.errorCode !== 0) {
                console.log("连接丢失: " + responseObject.errorMessage);
            }
        };

        client.onMessageArrived = function (message) {
            var temperature = parseFloat(message.payloadString);
            chart.series[0].addPoint(temperature);
        };

        client.connect({
            onSuccess: function () {
                client.subscribe(topic);
            }
        });
    </script>
</body>
</html>

Copy after login

Conclusion:
Through PHP and MQTT protocols, we can achieve real-time data visualization. In practice, we can flexibly use the functions and features provided by PHP and MQTT according to specific needs to achieve richer data visualization effects.

The above is the detailed content of Best practices for real-time data visualization using PHP and MQTT. For more information, please follow other related articles on the PHP Chinese website!