乐趣区

关于物联网:在微信小程序中打造-MQTT-连接测试工具

jiezi

微信小程序是腾讯推出的一种不须要下载安装即可在微信平台上应用的应用程序。用户扫一扫或者搜一下即可开始应用利用，可能节约大量手机内存和工夫老本。

随着微信生态的一直倒退，相较于 APP 开发，小程序有着开发难度低、应用便捷、自带微信宏大用户量的劣势，因此失去了开发者越来越多的青眼。

微信作为一款 IM 工具，收发音讯是最为罕用的性能。在物联网业务场景中，若能通过微信小程序与设施端连贯，接管、发送音讯或是及时收到设施状态异样告警，将会大大提高近程智能操纵的可行性。

本文将以 MQTT 连贯测试场景为例，应用 MQTT.js 连贯到 MQTT 服务——EMQX Cloud 部署，在微信小程序中实现一个简略不便的 MQTT 连贯测试工具。

EMQX Cloud 是全托管的云原生 MQTT 音讯服务，以自动化、全托管的模式为用户提供牢靠、实时的海量物联网设施连贯、事件音讯解决、IoT 数据桥接等能力，罢黜基础设施治理保护累赘，减速物联网利用开发。

我的项目初始化

微信小程序侧相干筹备

证书及域名

  1. 证书

    因为微信小程序平安要求比拟高，在与后盾服务器之间的通信必须应用 https/wss 协定。因而咱们须要购买一份证书并进行 TLS/SSL 证书配置。登录返回 EMQX Cloud 控制台，进入相应部署的概览页面进行 TLS/SSL 配置。单 / 双向认证均可，留神 证书链必填，否则后续真机调试会失败。本文抉择的是单向认证。

    • 微信官网文档：https://developers.weixin.qq….
    • EMQX Cloud TLS/SSL 配置帮忙文档及证书限度阐明：https://docs.emqx.com/zh/clou…

    • 若抉择双向认证，小程序客户端连贯代码需携带服务端 CA、客户端证书及客户端私钥，请参考 https://github.com/mqttjs/MQTT.js/blob/main/examples/tls%20client/mqttclient.js

  2. 绑定域名

    EMQX Cloud 专业版部署默认连贯地址是 IP，因为小程序只能够跟指定的域名进行网络通信，所以须要 EMQX Cloud 用户将本人通过 ICP 备案 的域名和部署 IP 相绑定，并且返回 微信公众平台 ->【开发】->【开发治理】->【开发设置】->【服务器域名】中 增加 socket 非法域名。

创立我的项目

注册 微信小程序账号，并下载 微信开发者工具。关上微信开发者工具，点击新建一个小程序我的项目。

MQTT 库装置

举荐应用 MQTT.js v4.2.1（针对原生的微信小程序），若调试器能够连贯但真机调试仍有问题，倡议尝试切换 MQTT.js 版本。

原生微信小程序 MQTT.js 可用版本有 v4.2.1、v4.2.0、v4.1.0 和 v2.18.8

应用 uniapp 框架搭建微信小程序 MQTT.js 可用版本有 v4.1.0 和 v2.18.8

在我的项目根目录下新建 utils 文件夹，将下载好的对应版本的 mqtt.min.js 文件放入该文件夹中，在 index.js 中通过如下形式引入 mqtt

import mqtt from "../../utils/mqtt.min.js";

MQTT 连贯测试工具要害代码

建设连贯

只能应用 wss 协定，然而微信小程序中须要写为 wxs

端口为 8084（EMQX Cloud 专业版部署），但理论的端口号以 EMQX Cloud 控制台对应部署的概览页面信息为准

连贯地址开端不要忘了带上门路 /mqtt

EMQX Cloud 部署须要先在部署详情页面的【认证鉴权】->【认证】中增加用户名明码，而后写入 mqttOptions 中

Page({
  data: {
    client: null,
    conenctBtnText: "连贯",
    host: "wx.emqxcloud.cn",
    subTopic: "testtopic/miniprogram",
    pubTopic: "testtopic/miniprogram",
    pubMsg: "Hello! I am from WeChat miniprogram",
    receivedMsg: "",
    mqttOptions: {
      username: "test",
      password: "test",
      reconnectPeriod: 1000, // 1000 毫秒，设置为 0 禁用主动重连，两次从新连贯之间的间隔时间
      connectTimeout: 30 * 1000, // 30 秒，连贯超时工夫
      // 更多参数请参阅 MQTT.js 官网文档：https://github.com/mqttjs/MQTT.js#mqttclientstreambuilder-options
      // 更多 EMQ 相干 MQTT 应用教程可在 EMQ 官网博客中进行搜寻：https://www.emqx.com/zh/blog
    },
  },

  setValue(key, value) {
    this.setData({[key]: value,
    });
  },

  connect() {
    // MQTT-WebSocket 对立应用 /path 作为连贯门路，连贯时需指明，但在 EMQX Cloud 部署上应用的门路为 /mqtt
    // 因而不要忘了带上这个 /mqtt !!!
    // 微信小程序中须要将 wss 协定写为 wxs，且因为微信小程序出于平安限度，不反对 ws 协定
    try {this.setValue("conenctBtnText", "连贯中...");
      const clientId = new Date().getTime();
      this.data.client = mqtt.connect(`wxs://${this.data.host}:8084/mqtt`, {
        ...this.data.mqttOptions,
        clientId,
      });

      this.data.client.on("connect", () => {
        wx.showToast({title: "连贯胜利",});
        this.setValue("conenctBtnText", "连贯胜利");

        this.data.client.on("message", (topic, payload) => {
          wx.showModal({content: ` 收到音讯 - Topic: ${topic}，Payload: ${payload}`,
            showCancel: false,
          });
          const currMsg = this.data.receivedMsg ? `<br/>${payload}` : payload;
          this.setValue("receivedMsg", this.data.receivedMsg.concat(currMsg));
        });

        this.data.client.on("error", (error) => {this.setValue("conenctBtnText", "连贯");
          console.log("onError", error);
        });

        this.data.client.on("reconnect", () => {this.setValue("conenctBtnText", "连贯");
          console.log("reconnecting...");
        });

        this.data.client.on("offline", () => {this.setValue("conenctBtnText", "连贯");
          console.log("onOffline");
        });
        // 更多 MQTT.js 相干 API 请参阅 https://github.com/mqttjs/MQTT.js#api
      });
    } catch (error) {this.setValue("conenctBtnText", "连贯");
      console.log("mqtt.connect error", error);
    }
  },
});

订阅主题

subscribe() {if (this.data.client) {this.data.client.subscribe(this.data.subTopic)
    wx.showModal({content: ` 胜利订阅主题：${this.data.subTopic}`,
      showCancel: false,
    })
    return
  }
  wx.showToast({
    title: '请先点击连贯',
    icon: 'error',
  })
},

勾销订阅

unsubscribe() {if (this.data.client) {this.data.client.unsubscribe(this.data.subTopic)
    wx.showModal({content: ` 胜利勾销订阅主题：${this.data.subTopic}`,
      showCancel: false,
    })
    return
  }
  wx.showToast({
    title: '请先点击连贯',
    icon: 'error',
  })
},

公布音讯

publish() {if (this.data.client) {this.data.client.publish(this.data.pubTopic, this.data.pubMsg)
    return
  }
  wx.showToast({
    title: '请先点击连贯',
    icon: 'error',
  })
},

断开连接

disconnect() {this.data.client.end()
  this.data.client = null
  this.setValue('conenctBtnText', '连贯')
  wx.showToast({title: '胜利断开连接'})
},

我的项目残缺代码请参阅：https://github.com/emqx/MQTT-…

真机测试验证

本文应用 MQTT 5.0 客户端工具 – MQTT X 作为测试的客户端和小程序相互收发音讯。

小程序建设连贯，并订阅主题 testtopic/miniprogram，而后向该主题发送一条音讯。与此同时应用 MQTT X 连贯雷同的地址，订阅主题 testtopic/#。

能够看到 MQTT X 能够失常接管来自小程序发送过去的音讯。同样，应用 MQTT X 向主题 testtopic/miniprogram 发送一条音讯时，也能够看到小程序能失常接管到该音讯。

结语

通过本文，咱们介绍了如何在微信小程序中应用 MQTT.js 实现 MQTT 协定的连贯、订阅、勾销订阅、收发音讯和断开连接这些性能，胜利搭建了一个简略的 MQTT 连贯测试工具。除了将连贯地址裸露进去不便进行批改，其余相干连贯参数选项，也能够设置为表单的模式进行配置，会更加灵便高效。在理论生产环境中，能够在此示例的根底上进行优化，实现反对多个连贯同时在线，扩大可配置选项参数。

版权申明：本文为 EMQ 原创，转载请注明出处。

原文链接：https://www.emqx.com/zh/blog/how-to-use-mqtt-in-wechat-miniprogram

退出移动版