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

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

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

項目初始化

前期準備

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

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

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

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

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

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

新建項目

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

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

安裝 MQTT 客戶端庫

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

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

MQTT.js CDN 地址：https://unpkg.com/mqtt@4.0.1/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 服務(wù)器 作為本次測試的 MQTT 服務(wù)器地址，服務(wù)器接入信息如下：

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

更多詳情請訪問 EMQ X Cloud 官網(wǎng)，或查看 EMQ X Cloud 文檔。

連接代碼

微信小程序使用 WebSocket 的方式連接到 MQTT 服務(wù)器，但連接的 URL 地址中請使用 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 // 如果連接斷開并重新連接，則會再次自動訂閱已訂閱的主題（默認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)
},

斷開連接

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

測試

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

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

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

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

總結(jié)

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

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

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

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

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