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

更新日期: 2023-06-15 阅读次数: 3078 字数: 562 分类: 微信小程序

需要实时拉取的数据

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

如果通过微信小程序端定时轮询,例如,每 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

tags: MQTT

关于作者 🌱

我是来自山东烟台的一名开发者,有敢兴趣的话题,或者软件开发需求,欢迎加微信 zhongwei 聊聊, 查看更多联系方式