微信小程序通过 MQTT Over Websocket 实时获取远程设备运行状态

需要实时拉取的数据

远程设备当前运行状态。比如，是运行中，还是已暂停
设备运行时长
设备上传感器的实时数值

如果通过微信小程序端定时轮询，例如，每 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 聊聊，或者关注我的个人公众号“大象工具”，查看更多联系方式