使用微信小程序连接到 MQTT 云服务

MQTT 是一种基于发布/订阅模式的轻量级物联网消息传输协议，可以用极少的代码和带宽为联网设备提供实时可靠的消息服务，它广泛应用于物联网、移动互联网、智能硬件、车联网、电力能源等行业。

项目初始化

前期准备

使用已经通过的域名接入 域名需要登录后在主页面的服务器域名下添加配置服务器域名地址 仅支持 WebSocket/TLS 协议，需要为域名分配受信任 CA 颁发的证书

添加服务器域名，这里我们将 broker.emqx.io 为例添加到服务器域名中，我们进入到页面中选择开始配置按钮，在 socket 合法域名列下输入 wss://broker.emqx.io，注意：必须以 wss 协议开头，如下图：

新建项目

安装 MQTT 客户端库

因为小程序是通过 JavaScript 开发的，因此可以使用 MQTT.js 作为 。

从小程序基础库版本 或以上、及 1.02.1808300 或以上开始，小程序支持使用 npm 安装第三方包。如感兴趣的读者可自行查看小程序 官方文档来操作使用，本文为简化操作过程，将不使用 npm 的方式安装。我们将在 utils 文件夹下新建一个 mqtt.js 文件，我们直接获取在 MQTT.js CDN 上的打包构建后的源码复制 mqtt.js 文件中。

MQTT.js CDN 地址： 可通过浏览器打开查看。

注意：截止目前最新的 mqtt.js v4.2.8 版本，在小程序中使用会报 net.createConnection 未定义的错误，需要回退和使用 4.0.1 版本。

完成后我们，在 index.js 主页面中直接 import 即可：

import mqtt from ../../utils/mqtt

MQTT 使用

本文将使用 EMQ X Cloud 提供的 作为本次测试的 MQTT 服务器地址，服务器接入信息如下：

Broker: broker.emqx.io TCP Port: 1883 SSL/TLS Port: 8883

更多详情请访问 ，或查看 。

连接代码

Page({
          
   
  data: {
          
   
    client: null,
    host: broker.emqx.io:8084,
    topic: testtopic/miniprogram,
    msg: Hello! I am from WeChat miniprogram,
    mqttOptions: {
          
   
      protocolVersion: 4, //MQTT连接协议版本
      clientId: emqx_cloud_miniprogram,
      clean: true,
      password: ,
      username: ,
      reconnectPeriod: 1000, // 1000毫秒，两次重新连接之间的间隔
      connectTimeout: 30 * 1000, // 1000毫秒，两次重新连接之间的间隔
      resubscribe: true // 如果连接断开并重新连接，则会再次自动订阅已订阅的主题（默认true）
    },
  },
  connect() {
          
   
    this.data.client = mqtt.connect(`wxs://${
            
     this.data.host}/mqtt`, this.data.mqttOptions)
    this.data.client.on(connect, () => {
          
   
      wx.showToast({
          
   
        title: 连接成功
      })
    })
  },
})

订阅主题

subscribe() {
          
   
  this.data.client.subscribe(this.data.topic)
  wx.showToast({
          
   
    title: 主题订阅成功
  })
},

取消订阅

unsubscribe() {
          
   
  this.data.client.unsubscribe(this.data.topic)
  wx.showToast({
          
   
    title: 取消订阅成功
  })
},

消息发布

publish() {
          
   
  this.data.client.publish(this.data.topic, this.data.msg)
},

断开连接

disconnect() {
          
   
  this.data.client.end()
  wx.showToast({
          
   
    title: 断开连接成功
  })
},

测试

我们在小程序中简单编写了如下应用界面，该应用具备：创建连接、订阅主题、收发消息、取消订阅、断开连接等功能。

完整的项目示例代码：

使用 作为另一个客户端进行消息收发测试。

可以看到 MQTT X 可以正常接收来到来自小程序发送过来的消息，同样，使用 MQTT X 向该主题发送一条消息时，也可以看到小程序能正常接收到该消息。

总结

综上所述，我们实现了在小程序项目中创建 MQTT 连接，模拟了小程序客户端与 MQTT 服务器进行订阅、收发消息、取消订阅以及断开连接的场景。

技术支持：如对本文或 EMQ 相关产品有疑问，可访问 EMQ 问答社区 提问，我们将会及时回复支持。