使用微信小程序連接到 MQTT 云服務(wù)
2021-09-03 20:12:52

微信小程序是騰訊于 2017 年 1 月 9 日推出的一種不需要下載安裝即可在微信平臺(tái)上使用的應(yīng)用程序，用戶掃一掃或者搜一下即可打開(kāi)應(yīng)用。也體現(xiàn)了“用完即走”的理念，用戶不用關(guān)心是否安裝太多應(yīng)用的問(wèn)題。應(yīng)用將無(wú)處不在，隨時(shí)可用，但又無(wú)需安裝卸載。對(duì)于開(kāi)發(fā)者而言，小程序開(kāi)發(fā)門(mén)檻相對(duì)較低，難度不及 APP，能夠滿足簡(jiǎn)單的基礎(chǔ)應(yīng)用，對(duì)于用戶來(lái)說(shuō)，能夠節(jié)約使用時(shí)間成本和手機(jī)內(nèi)存空間，對(duì)于開(kāi)發(fā)者來(lái)說(shuō)也能節(jié)約開(kāi)發(fā)和推廣成本。

本文主要介紹如何在微信小程序項(xiàng)目中使用 MQTT，實(shí)現(xiàn)小程序客戶端與 MQTT 云服務(wù)的連接、訂閱、收發(fā)消息、取消訂閱等功能。

MQTT 是一種基于發(fā)布/訂閱模式的輕量級(jí)物聯(lián)網(wǎng)消息傳輸協(xié)議，可以用極少的代碼和帶寬為聯(lián)網(wǎng)設(shè)備提供實(shí)時(shí)可靠的消息服務(wù)，它廣泛應(yīng)用于物聯(lián)網(wǎng)、移動(dòng)互聯(lián)網(wǎng)、智能硬件、車聯(lián)網(wǎng)、電力能源等行業(yè)。

項(xiàng)目初始化

前期準(zhǔn)備

注冊(cè)微信小程序帳號(hào)，并下載微信開(kāi)發(fā)者工具。由于微信小程序安全要求比較高，在與后臺(tái)服務(wù)器之間的通訊必須使用 https 或 wss 協(xié)議，因此要在微信小程序后臺(tái)設(shè)置域名服務(wù)器。

微信小程序僅支持通過(guò) WebSocket 進(jìn)行即時(shí)通信，EMQ X 的 MQTT Over WebSocket 能夠完全兼容使用在微信小程序上。但由于微信小程序的規(guī)范限制，EMQ X 使用微信小程序接入時(shí)需要注意以下幾點(diǎn)：

• 使用已經(jīng)通過(guò)域名備案的域名接入

• 域名需要微信公眾平臺(tái)登錄后在主頁(yè)面的服務(wù)器域名下添加配置服務(wù)器域名地址
• 僅支持 WebSocket/TLS 協(xié)議，需要為域名分配受信任 CA 頒發(fā)的證書(shū)
• 由于微信小程序 BUG，安卓真機(jī)必須使用 TLS/443 端口，否則會(huì)連接失?。催B接地址不能帶端口）

添加服務(wù)器域名，這里我們將 broker.emqx.io 為例添加到服務(wù)器域名中，我們進(jìn)入到頁(yè)面中選擇開(kāi)始配置按鈕，在 socket 合法域名列下輸入 wss://broker.emqx.io，注意：必須以 wss 協(xié)議開(kāi)頭，如下圖：

添加完成后，在微信小程序開(kāi)發(fā)時(shí)才允許我們于該域名地址下的服務(wù)器進(jìn)行通信與交互。

新建項(xiàng)目

準(zhǔn)備完成前期網(wǎng)絡(luò)通訊相關(guān)工作后，我們打開(kāi)已經(jīng)下載好了的微信開(kāi)發(fā)者工具，打開(kāi)后在頁(yè)面點(diǎn)擊新建一個(gè)小程序項(xiàng)目，如下圖所示：

點(diǎn)擊確認(rèn)后，微信開(kāi)發(fā)者工具就自動(dòng)初始化好了項(xiàng)目，我們就可以開(kāi)始開(kāi)發(fā)了。

安裝 MQTT 客戶端庫(kù)

因?yàn)樾〕绦蚴峭ㄟ^(guò) JavaScript 開(kāi)發(fā)的，因此可以使用 MQTT.js 作為 MQTT 客戶端庫(kù)。

從小程序基礎(chǔ)庫(kù)版本 2.2.1 或以上、及開(kāi)發(fā)者工具 1.02.1808300 或以上開(kāi)始，小程序支持使用 npm 安裝第三方包。如感興趣的讀者可自行查看小程序 npm 支持的官方文檔來(lái)操作使用，本文為簡(jiǎn)化操作過(guò)程，將不使用 npm 的方式安裝。我們將在 utils 文件夾下新建一個(gè) mqtt.js 文件，我們直接獲取在 MQTT.js CDN 上的打包構(gòu)建后的源碼復(fù)制 mqtt.js 文件中。

MQTT.js CDN 地址：https://unpkg.com/mqtt@4.0.1/dist/mqtt.min.js 可通過(guò)瀏覽器打開(kāi)查看。

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

完成后我們，在 index.js 主頁(yè)面中直接 import 即可：

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

MQTT 使用

本文將使用 EMQ X Cloud 提供的 免費(fèi)公共 MQTT 服務(wù)器 作為本次測(cè)試的 MQTT 服務(wù)器地址，服務(wù)器接入信息如下：

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

更多詳情請(qǐng)?jiān)L問(wèn) EMQ X Cloud 官網(wǎng)，或查看 EMQ X Cloud 文檔。

連接代碼

微信小程序使用 WebSocket 的方式連接到 MQTT 服務(wù)器，但連接的 URL 地址中請(qǐng)使用 wxs 協(xié)議名稱，連接及初始化數(shù)據(jù)的關(guān)鍵代碼：

Page({
  data: {
    client: null,
    host: 'broker.emqx.io:8084',
    topic: 'testtopic/miniprogram',
    msg: 'Hello! I am from WeChat miniprogram',
    mqttOptions: {
      protocolVersion: 4, //MQTT連接協(xié)議版本
      clientId: 'emqx_cloud_miniprogram',
      clean: true,
      password: '',
      username: '',
      reconnectPeriod: 1000, // 1000毫秒，兩次重新連接之間的間隔
      connectTimeout: 30 * 1000, // 1000毫秒，兩次重新連接之間的間隔
      resubscribe: true // 如果連接斷開(kāi)并重新連接，則會(huì)再次自動(dòng)訂閱已訂閱的主題（默認(rèn)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: '取消訂閱成功'
  })
},

消息發(fā)布

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

斷開(kāi)連接

disconnect() {
  this.data.client.end()
  wx.showToast({
    title: '斷開(kāi)連接成功'
  })
},

測(cè)試

我們?cè)谛〕绦蛑泻?jiǎn)單編寫(xiě)了如下應(yīng)用界面，該應(yīng)用具備：創(chuàng)建連接、訂閱主題、收發(fā)消息、取消訂閱、斷開(kāi)連接等功能。

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

使用 MQTT 5.0 客戶端工具 - MQTT X 作為另一個(gè)客戶端進(jìn)行消息收發(fā)測(cè)試。

可以看到 MQTT X 可以正常接收來(lái)到來(lái)自小程序發(fā)送過(guò)來(lái)的消息，同樣，使用 MQTT X 向該主題發(fā)送一條消息時(shí)，也可以看到小程序能正常接收到該消息。

總結(jié)

綜上所述，我們實(shí)現(xiàn)了在小程序項(xiàng)目中創(chuàng)建 MQTT 連接，模擬了小程序客戶端與 MQTT 服務(wù)器進(jìn)行訂閱、收發(fā)消息、取消訂閱以及斷開(kāi)連接的場(chǎng)景。

版權(quán)聲明： 本文為 EMQ 原創(chuàng)，轉(zhuǎn)載請(qǐng)注明出處。

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

技術(shù)支持：如對(duì)本文或 EMQ 相關(guān)產(chǎn)品有疑問(wèn)，可訪問(wèn) EMQ 問(wèn)答社區(qū) https://askemq.com 提問(wèn)，我們將會(huì)及時(shí)回復(fù)支持。

更多技術(shù)干貨，歡迎關(guān)注我們公眾號(hào)【EMQ 中文社區(qū)】。