MQTT.js

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: 当客户端关闭时的回调函数

MQTT API

https://www.emqx.com/zh/blog/mqtt-js-tutorial

MQTT在VUE中使用

https://www.emqx.com/zh/blog/how-to-use-mqtt-in-vue

MQTT在React中使用

https://www.emqx.com/zh/blog/how-to-use-mqtt-in-react

参考文章

MQTT.js 入门教程