网站优化与seo的区别seo技术培训价格表
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: 当客户端关闭时的回调函数
 
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 入门教程
