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

本文主要介紹如何在**微信小程式**專案中使用 [MQTT](https://www.emqx.com/zh/mqtt)，實現小程式客戶端與 [MQTT 雲服務](https://www.emqx.com/zh/cloud)的連線、訂閱、收發訊息、取消訂閱等功能。

> MQTT 是一種基於釋出/訂閱模式的輕量級物聯網訊息傳輸協議，可以用極少的程式碼和頻寬為聯網裝置提供實時可靠的訊息服務，它廣泛應用於物聯網、移動網際網路、智慧硬體、車聯網、電力能源等行業。

## 專案初始化

### 前期準備

註冊微信小程式帳號，並下載[微信開發者工具](https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html)。由於微信小程式安全要求比較高，在與後臺伺服器之間的通訊必須使用 https 或 wss 協議，因此要在微信小程式後臺設定域名伺服器。

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

- 使用已經透過[域名備案](https://baike.baidu.com/item/域名備案)的**域名**接入

- 域名需要[微信公眾平臺](https://mp.weixin.qq.com/)登入後在主頁面的伺服器域名下新增配置伺服器域名地址
- 僅支援 WebSocket/TLS 協議，需要為域名分配受信任 CA 頒發的證照
- **由於微信小程式 BUG，安卓真機必須使用 TLS/443 埠，否則會連線失敗（即連線地址不能帶埠）**

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

![微信小程式新增 MQTT 伺服器域名](https://static.emqx.net/images/580dae268a35678e6d8fe14f90dabf45.png)

新增完成後，在微信小程式開發時才允許我們於該域名地址下的伺服器進行通訊與互動。

### 新建專案

準備完成前期網路通訊相關工作後，我們開啟已經下載好了的微信開發者工具，開啟後在頁面點選新建一個小程式專案，如下圖所示：

![新建小程式專案](https://static.emqx.net/images/70e3a461651c46a33f16c9624b32e9e6.png)

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

### 安裝 MQTT 客戶端庫

因為小程式是透過 JavaScript 開發的，因此可以使用 MQTT.js 作為 [MQTT 客戶端庫](https://www.emqx.com/zh/blog/introduction-to-the-commonly-used-mqtt-client-library)。

從小程式基礎庫版本 [2.2.1](https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html) 或以上、及[開發者工具](https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html) 1.02.1808300 或以上開始，小程式支援使用 npm 安裝第三方包。如感興趣的讀者可自行檢視小程式 [npm 支援的](https://developers.weixin.qq.com/miniprogram/dev/devtools/npm.html)官方文件來操作使用，本文為簡化操作過程，將不使用 npm 的方式安裝。我們將在 utils 資料夾下新建一個 mqtt.js 檔案，我們直接獲取在 MQTT.js CDN 上的打包構建後的原始碼複製 mqtt.js 檔案中。

MQTT.js CDN 地址：[https://unpkg.com/mqtt@4.0.1/dist/mqtt.min.js](https://unpkg.com/mqtt@4.0.1/dist/mqtt.min.js) 可透過瀏覽器開啟檢視。

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

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

```javascript
import mqtt from '../../utils/mqtt'
```

## MQTT 使用

本文將使用 EMQ X Cloud 提供的 [免費公共 MQTT 伺服器](https://www.emqx.com/zh/mqtt/public-mqtt5-broker) 作為本次測試的 MQTT 伺服器地址，伺服器接入資訊如下：

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

更多詳情請訪問 [EMQ X Cloud 官網](https://www.emqx.com/zh/cloud)，或檢視 [EMQ X Cloud 文件](https://docs.emqx.cn/cloud/latest/)。

### 連線程式碼

微信小程式使用 WebSocket 的方式連線到 [MQTT 伺服器](https://www.emqx.io/zh)，但連線的 URL 地址中請使用 `wxs` 協議名稱，連線及初始化資料的關鍵程式碼：

```javascript
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: '連線成功'
      })
    })
  },
})

```

### 訂閱主題

```javascript
subscribe() {
  this.data.client.subscribe(this.data.topic)
  wx.showToast({
    title: '主題訂閱成功'
  })
},
```

### 取消訂閱

```javascript
unsubscribe() {
  this.data.client.unsubscribe(this.data.topic)
  wx.showToast({
    title: '取消訂閱成功'
  })
},
```

### 訊息釋出

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

### 斷開連線

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

## 測試

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

完整的專案示例程式碼：[https://github.com/emqx/MQTT-Client-Examples/tree/master/mqtt-client-wechat-miniprogram](https://github.com/emqx/MQTT-Client-Examples/tree/master/mqtt-client-wechat-miniprogram)

![小程式示例應用](https://static.emqx.net/images/8f0d503051f21fd9ba36ace426c8ff64.png)

使用 [MQTT 5.0 客戶端工具 - MQTT X](https://mqttx.app/zh) 作為另一個客戶端進行訊息收發測試。

![MQTT 5.0 客戶端工具 - MQTT X](https://static.emqx.net/images/435e50c6d4616269fb952fb47a559892.png)

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

![微信小程式接收 MQTT 訊息](https://static.emqx.net/images/1158fb3ea9e5056ed66074771c45e8b6.png)

## 總結

綜上所述，我們實現了在小程式專案中建立 MQTT 連線，模擬了小程式客戶端與 MQTT 伺服器進行訂閱、收發訊息、取消訂閱以及斷開連線的場景。

>版權宣告： 本文為 EMQ 原創，轉載請註明出處。
>
>原文連結：[https://www.emqx.com/zh/blog/how-to-use-mqtt-in-wechat-miniprogram](https://www.emqx.com/zh/blog/how-to-use-mqtt-in-wechat-miniprogram)
>
>技術支援：如對本文或 EMQ 相關產品有疑問，可訪問 EMQ 問答社群 [https://askemq.com](https://askemq.com) 提問，我們將會及時回覆支援。
>
>更多技術乾貨，歡迎關注我們公眾號【EMQ 中文社群】。

使用微信小程式連線到 MQTT 雲服務

相關文章