创建商务站点的主要工作,wordpress多个页面,免费营销课程培训,苏州建设是哪家公司MQTT.js mqtt.js简介MQTT测试工具mqttboxMQTTX mqtt使用mqtt引入#xff08;方式一#xff09;mqtt引入#xff08;方式二#xff09;创建mqtt客户端连接到mqtt代理订阅topic处理接收到的消息重新连接取消订阅发布消息断开连接关闭客户端MQTT APIMQTT在VUE中使用MQTT在Reac… MQTT.js mqtt.js简介MQTT测试工具mqttboxMQTTX mqtt使用mqtt引入方式一mqtt引入方式二创建mqtt客户端连接到mqtt代理订阅topic处理接收到的消息重新连接取消订阅发布消息断开连接关闭客户端MQTT APIMQTT在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 srchttps://unpkg.com/mqtt/dist/mqtt.min.js/script
script// 将在全局初始化一个 mqtt 变量console.log(mqtt)
/script创建mqtt客户端
/***
* 浏览器环境* 使用协议为 ws 和 wss 的 MQTT over WebSocket 连接* EMQX 的 ws 连接默认端口为 8083wss 为 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 入门教程
