当前位置：首页 > 前端开发 > 正文

html 如何使用mqtt

admin
前端开发
2025-07-13
3

HTML中使用MQTT，需引入Paho MQTT库，创建客户端实例，连接服务器，订阅主题，通过回调函数处理消息

HTML中使用MQTT，通常需要借助JavaScript客户端库来实现与MQTT服务器的通信,以下是详细的步骤和示例代码：

引入MQTT客户端库

需要在HTML文件中引入MQTT客户端库，常用的MQTT客户端库有Paho MQTT等，可以通过CDN方式加载Paho MQTT库,也可以下载库文件并本地引入。

<script src="https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.0.2/mqttws31.min.js"></script>

创建MQTT客户端实例

在JavaScript中，创建一个MQTT客户端实例，并指定MQTT服务器的地址、端口号以及客户端ID。

var client = new Paho.MQTT.Client("broker.hivemq.com", 8000, "clientId-" + Math.random().toString(16).substr(2, 8));

设置回调函数

设置连接状态变化事件和消息接收事件的回调函数,这些回调函数将在相应事件发生时被调用。

html 如何使用mqtt 第1张

// 当连接状态发生变化时触发此回调
client.onConnectionLost = function (responseObject) {
    console.log("connection lost: " + responseObject.errorMessage);
};
// 当接收到新消息时触发此回调
client.onMessageArrived = function (message) {
    console.log("topic:" + message.destinationName + ", payload:" + message.payloadString);
};

连接到MQTT服务器

使用connect方法连接到MQTT服务器，并在连接成功的回调函数中执行订阅主题、发布消息等操作。

client.connect({
    onSuccess: function () {
        console.log('Connected');
        // 订阅主题
        var topic = '/world';
        client.subscribe(topic);
        // 发布一条测试消息
        var msg = new Paho.MQTT.Message('Hello World!');
        msg.destinationName = topic;
        client.send(msg);
    },
    onFailure: function (e) {
        console.error(e.errorMessage);
    }
});

订阅主题和发布消息

订阅感兴趣的主题，以便接收MQTT服务器发布的消息，也可以使用publish方法向MQTT服务器发布消息。

// 订阅主题
client.subscribe('/world');
// 发布消息
var msg = new Paho.MQTT.Message('Hello MQTT!');
msg.destinationName = '/world';
client.send(msg);

断开连接

当不再需要连接到MQTT服务器时，可以调用disconnect方法来断开连接。

client.disconnect();

完整示例代码

以下是一个完整的HTML和JavaScript示例代码,展示了如何在HTML中使用MQTT进行消息的发布和订阅。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">MQTT Example</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.0.2/mqttws31.min.js"></script>
</head>
<body>
    <h1>MQTT Example</h1>
    <script>
        // 创建MQTT客户端实例
        var client = new Paho.MQTT.Client("broker.hivemq.com", 8000, "clientId-" + Math.random().toString(16).substr(2, 8));
        // 设置回调函数
        client.onConnectionLost = function (responseObject) {
            console.log("connection lost: " + responseObject.errorMessage);
        };
        client.onMessageArrived = function (message) {
            console.log("topic:" + message.destinationName + ", payload:" + message.payloadString);
        };
        // 连接到MQTT服务器
        client.connect({
            onSuccess: function () {
                console.log('Connected');
                // 订阅主题
                var topic = '/world';
                client.subscribe(topic);
                // 发布一条测试消息
                var msg = new Paho.MQTT.Message('Hello World!');
                msg.destinationName = topic;
                client.send(msg);
            },
            onFailure: function (e) {
                console.error(e.errorMessage);
            }
        });
    </script>
</body>
</html>