使用微信小程序連接到 MQTT 雲服務

微信小程序是騰訊於 2017 年 1 月 9 日推出的一種不需要下載安裝即可在微信平臺上使用的應用程序，用戶掃一掃或者搜一下即可打開應用。也體現了“用完即走”的理念，用戶不用關心是否安裝太多應用的問題。應用將無處不在，隨時可用，但又無需安裝卸載。對於開發者而言，小程序開發門檻相對較低，難度不及 APP，能夠滿足簡單的基礎應用，對於用戶來說，能夠節約使用時間成本和手機內存空間，對於開發者來說也能節約開發和推廣成本。

本文主要介紹如何在微信小程序項目中使用 MQTT，實現小程序客戶端與 MQTT 雲服務的連接、訂閱、收發消息、取消訂閱等功能。

MQTT 是一種基於發佈/訂閱模式的輕量級物聯網消息傳輸協議，可以用極少的代碼和帶寬爲聯網設備提供實時可靠的消息服務，它廣泛應用於物聯網、移動互聯網、智能硬件、車聯網、電力能源等行業。

項目初始化

前期準備

註冊微信小程序帳號，並下載微信開發者工具。由於微信小程序安全要求比較高，在與後臺服務器之間的通訊必須使用 https 或 wss 協議，因此要在微信小程序後臺設置域名服務器。

微信小程序僅支持通過 WebSocket 進行即時通信，EMQ X 的 MQTT Over WebSocket 能夠完全兼容使用在微信小程序上。但由於微信小程序的規範限制，EMQ X 使用微信小程序接入時需要注意以下幾點：

• 使用已經通過域名備案的域名接入

• 域名需要微信公衆平臺登錄後在主頁面的服務器域名下添加配置服務器域名地址

• 僅支持 WebSocket/TLS 協議，需要爲域名分配受信任 CA 頒發的證書

• 由於微信小程序 BUG，安卓真機必須使用 TLS/443 端口，否則會連接失敗（即連接地址不能帶端口）

添加服務器域名，這裏我們將 broker.emqx.io 爲例添加到服務器域名中，我們進入到頁面中選擇開始配置按鈕，在 socket 合法域名列下輸入 wss://broker.emqx.io，注意：必須以 wss 協議開頭，如下圖：

添加完成後，在微信小程序開發時才允許我們於該域名地址下的服務器進行通信與交互。

新建項目

準備完成前期網絡通訊相關工作後，我們打開已經下載好了的微信開發者工具，打開後在頁面點擊新建一個小程序項目，如下圖所示：

點擊確認後，微信開發者工具就自動初始化好了項目，我們就可以開始開發了。

安裝 MQTT 客戶端庫

因爲小程序是通過 JavaScript 開發的，因此可以使用 MQTT.js 作爲 MQTT 客戶端庫。

從小程序基礎庫版本 2.2.1 或以上、及開發者工具 1.02.1808300 或以上開始，小程序支持使用 npm 安裝第三方包。如感興趣的讀者可自行查看小程序 npm 支持的官方文檔來操作使用，本文爲簡化操作過程，將不使用 npm 的方式安裝。我們將在 utils 文件夾下新建一個 mqtt.js 文件，我們直接獲取在 MQTT.js CDN 上的打包構建後的源碼複製 mqtt.js 文件中。

MQTT.js CDN 地址：https://unpkg.com/[email protected]/dist/mqtt.min.js 可通過瀏覽器打開查看。

注意：截止目前最新的 mqtt.js v4.2.8 版本，在小程序中使用會報 net.createConnection 未定義的錯誤，需要回退和使用 4.0.1 版本。

完成後我們，在 index.js 主頁面中直接 import 即可：

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

MQTT 使用

本文將使用 EMQ X Cloud 提供的 免費公共 MQTT 服務器 作爲本次測試的 MQTT 服務器地址，服務器接入信息如下：

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

更多詳情請訪問 EMQ X Cloud 官網，或查看 EMQ X Cloud 文檔。

連接代碼

微信小程序使用 WebSocket 的方式連接到 MQTT 服務器，但連接的 URL 地址中請使用 wxs 協議名稱，連接及初始化數據的關鍵代碼：

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: '斷開連接成功'
  })
},

測試

我們在小程序中簡單編寫了如下應用界面，該應用具備：創建連接、訂閱主題、收發消息、取消訂閱、斷開連接等功能。

完整的項目示例代碼：https://github.com/emqx/MQTT-Client-Examples/tree/master/mqtt-client-wechat-miniprogram

使用 MQTT 5.0 客戶端工具 - MQTT X 作爲另一個客戶端進行消息收發測試。

可以看到 MQTT X 可以正常接收來到來自小程序發送過來的消息，同樣，使用 MQTT X 向該主題發送一條消息時，也可以看到小程序能正常接收到該消息。

總結

綜上所述，我們實現了在小程序項目中創建 MQTT 連接，模擬了小程序客戶端與 MQTT 服務器進行訂閱、收發消息、取消訂閱以及斷開連接的場景。

版權聲明： 本文爲 EMQ 原創，轉載請註明出處。

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

技術支持：如對本文或 EMQ 相關產品有疑問，可訪問 EMQ 問答社區 https://askemq.com 提問，我們將會及時回覆支持。

更多技術乾貨，歡迎關注我們公衆號【EMQ 中文社區】。