需要实时拉取的数据
- 远程设备当前运行状态。比如，是运行中，还是已暂停
- 设备运行时长
- 设备上传感器的实时数值
如果通过微信小程序端定时轮询，例如，每 10 秒拉取一次，体验上不够好，因为有肉眼可见的延迟。特殊是设备运行状态这里，点击开始，如果不能立即看已启动状态，那就太 low 了。而 MQTT 协议可以实现实时推送的效果。
小程序后台配置可信域名
在 socket 合法域名里填写。例如：
wss://www.sunzhongwei.com
这里是一个大坑，配置时候是 wss，用的时候是 wxs。
配置 WSS 证书
参考EMQX MQTT 服务配置 WSS 证书，由于 WSS 默认是使用 443 端口，跟 HTTPS 一致，可以在 Nginx 上直接设置转发规则。
微信小程序前端订阅 MQTT Topic
首先，下载 mqtt.js
https://unpkg.com/mqtt@4.2.1/dist/mqtt.min.js
放到小程序项目目录下。
连接参数
- 保证 client id 唯一。例如：wxapp-小程序用户id-时间戳；
- emqx 后台新建账号
- 权限控制还是有必要的。比如，限制小程序账号只能订阅指定主题。
实现代码
connectMQTT: function() {
const ts = new Date().getTime();
const clientId = `wxapp_${this.data.some_id}_${ts}`;
try {
let mqttClient = mqtt.connect(`${app.globalData.wssHost}`, {
...this.data.mqttOptions,
clientId,
});
this.setData({
mqttClient,
})
this.data.mqttClient.on("connect", () => {
console.log("mqtt sever connected");
this.data.mqttClient.on("message", (topic, payload) => {
console.log(`收到消息 - Topic: ${topic}，Payload: ${payload}`);
});
this.data.mqttClient.subscribe("device/sensor/" + this.data.deviceName)
});
} catch (e) {
console.log("fail to connect mqtt server.");
}
},
并发数
1.7.0 及以上版本，最多可以同时存在 5 个 WebSocket 连接。
TypeError: WebSocket is not a constructor
let mqttClient = mqtt.connect(`wss://www.sunzhongwei.com/mqtt`, {
...this.data.mqttOptions,
clientId,
});
wss 改成 wxs 就可以了。恶心。
断开连接
注意，如果业务流程结束，比如要跳转到其他页面。
需要在 onHide 中主动断开 mqtt 连接，否则还会在其他页面继续收到订阅的主题消息。
wx.redirectTo 并没有触发 onHide，还是自己写逻辑吧。
- wx.redirectTo 触发当前页面的 onUnload()
- wx.navigateTo 触发当前页面的 onHide()
- wx.reLaunch 触发除了即将要跳转的页面以外的页面的 onHide()
继续阅读 🌳
参考
- https://www.emqx.com/zh/blog/how-to-use-mqtt-in-wechat-miniprogram
微信关注我哦 👍
我是来自山东烟台的一名开发者，有感兴趣的话题，或者软件开发需求，欢迎加微信 zhongwei 聊聊， 查看更多联系方式