MQTT.js

- mqtt.js简介
- MQTT测试工具
- - mqttbox
  - MQTTX
- mqtt使用
- - mqtt引入（方式一）
  - mqtt引入（方式二）
  - 创建mqtt客户端
  - 连接到mqtt代理
  - 订阅topic
  - 处理接收到的消息
  - 重新连接
  - 取消订阅
  - 发布消息
  - 断开连接
  - 关闭客户端
  - MQTT API
  - MQTT在VUE中使用
  - MQTT在React中使用
  - 参考文章

mqtt.js简介

mqtt.js是一个开源的MQTT协议的客户端库，使用 JavaScript 编写，主要用于 Node.js 和浏览器环境中。是目前 JavaScript 生态中使用最为广泛的 MQTT 客户端库。

MQTT 是一种基于发布/订阅模式的轻量级物联网消息传输协议，可以用极少的代码和带宽为联网设备提供实时可靠的消息服务

由于 JavaScript 单线程特性，MQTT.js 是全异步 MQTT 客户端，MQTT.js 支持 MQTT/TCP、MQTT/TLS、MQTT/WebSocket，在不同运行环境支持的度如下：
● 浏览器环境：MQTT over WebSocket（包括微信小程序、支付宝小程序等定制浏览器环境）
● Node.js 环境：MQTT、MQTT over WebSocket

MQTT测试工具

mqttbox

mqttbox 网盘下载地址：
链接：https://pan.baidu.com/s/1v0PIwD8D4xf-9wKe_bNomg
提取码：gl02

MQTTX

下载地址
https://mqttx.app/zh

mqtt使用

mqtt引入（方式一）

mqtt安装

npm i mqtt

引入mqtt

import mqtt from "mqtt";

mqtt引入（方式二）

<script src="https://unpkg.com/mqtt/dist/mqtt.min.js"></script>
<script>// 将在全局初始化一个 mqtt 变量console.log(mqtt)
</script>

创建mqtt客户端

/***
* 浏览器环境* 使用协议为 ws 和 wss 的 MQTT over WebSocket 连接* EMQX 的 ws 连接默认端口为 8083，wss 为 8084* 注意需要在连接地址后加上一个 path, 例如 /mqtt*/// 连接选项
// 根据协议规则必须传递userName: 'admin',password: 'password'
const options = {clean: true, // true: 清除会话, false: 保留会话connectTimeout: 4000, // 超时时间// 认证信息clientId: 'emqx_test',username: 'emqx_test',password: 'emqx_test',
}
const connectUrl = 'wss://broker.emqx.io:8084/mqtt'
const client = mqtt.connect(connectUrl, options)

连接到mqtt代理

client.on('connect', function () {console.log('Connected to MQTT broker');// 订阅主题client.subscribe('topic1');
});

订阅topic

client.subscribe('topic1', { qos: 0 }, function (error, granted) {if (error) {console.log(error)} else {console.log(`${granted[0].topic} was subscribed`)}
});
可以订阅1个或多个topic
// 参数1: 需要订阅的topic,可传入一个字符串，或者一个字符串数组，也可以是一个 topic 对象
// 参数2: 可选，订阅 Topic 时的配置信息
// 参数3: 可选，订阅 Topic 后的回调函数，参数为 error 和 granted，
当订阅失败时 error 参数才存在, granted 是一个 {topic, qos} 的数组，
其中 topic 是一个被订阅的主题，qos 是 Topic 是被授予的 QoS 等级

处理接收到的消息

client.on('message', function (topic, message,packet) {console.log('Received message:', topic.toString(), message.toString());//message 为接收到的消息内容//packet为MQTT报文信息
});

重新连接

client.on('reconnect', () => {console.log("客户端正在重连.....请稍后")$('#div1').text("客户端正在重连.....请稍后")
}

取消订阅

client.unsubscribe(topic,  function (error) {if (error) {console.log(error)} else {console.log('Unsubscribed')}
})
取消订阅1个或多个topic
// 参数1：一个字符串或者字符串数组
// 参数2：可选值，取消订阅时的配置信息
// 参数3：取消订阅时的回调函数，参数为 error，当取消订阅失败时 error 参数才存在

发布消息

client.publish('topic2', 'Hello MQTT',{ qos: 0, retain: false }, function (error) {if (error) {console.log(error)} else {console.log('Published')}
});
// 参数1：发送的topic
// 参数2：发送的消息内容
// 参数3：可选，发布消息时的配置信息
// 参数4：可选，发布消息后的回调函数，参数为 error，当发布失败时，该参数才存在

断开连接

client.on('close', function () {console.log('客户端以断开连接..... ')$('#div1').text("客户端以断开连接..... ")
});客户端无法连接或出现错误时触发回调
client.on("error", (error) => {console.log('客户端无法连接或出现错误..... ' + error)$('#div1').text("客户端无法连接或出现错误..... " + error)
});

关闭客户端

client.end();// 参数1: 可选，默认为 false。设置为 true 时将立即关闭客户端，而无需等待断开连接的消息被接受。
注意：使用该值为 true 时，Broker 无法接收到 disconnect 的报文
// 参数2: 可选值，关闭客户端时的配置信息，主要是可以配置 reasonCode，断开连接时的 Reason Code
// 参数3: 当客户端关闭时的回调函数