微信小程式是騰訊推出的一種不需要下載安裝即可在微信平臺上使用的應用程式。使用者掃一掃或者搜一下即可開始使用應用，能夠節約大量手機記憶體和時間成本。

隨著微信生態的不斷髮展，相較於 APP 開發，小程式有著開發難度低、使用便捷、自帶微信龐大使用者量的優勢，因而得到了開發者越來越多的青睞。

微信作為一款 IM 工具，收發訊息是最為常用的功能。在物聯網業務場景中，若能透過微信小程式與裝置端連線，接收、傳送訊息或是及時收到裝置狀態異常告警，將會大大提高遠端智慧操縱的可行性。

本文將以 [MQTT 連線](https://www.emqx.com/zh/blog/reaching-100m-mqtt-connections-with-emqx-5-0)測試場景為例，使用 MQTT.js 連線到 MQTT 服務——[EMQX Cloud ](https://www.emqx.com/zh/cloud)部署，在微信小程式中實現一個簡單方便的 MQTT 連線測試工具。

> EMQX Cloud 是全託管的雲原生 MQTT 訊息服務，以自動化、全託管的形式為使用者提供可靠、實時的海量物聯網裝置連線、事件訊息處理、IoT 資料橋接等能力，免除基礎設施管理維護負擔，加速物聯網應用開發。

## 專案初始化

### 微信小程式側相關準備

#### 證書及域名

1. 證書

由於微信小程式安全要求比較高，在與後臺伺服器之間的通訊必須使用 https/wss 協議。因此我們需要購買一份證書並進行 TLS/SSL 證書配置。登入前往 [EMQX Cloud 控制檯](https://cloud.emqx.com/console/)，進入相應部署的概覽頁面進行 TLS/SSL 配置。單/雙向認證均可，注意**證書鏈必填**，否則後續真機除錯會失敗。本文選擇的是單向認證。

- 微信官方文件：https://developers.weixin.qq.com/miniprogram/dev/framework/ability/network.html

- EMQX Cloud TLS/SSL 配置幫助文件及證書限制說明：https://docs.emqx.com/zh/cloud/latest/deployments/tls_ssl.html

- 若選擇雙向認證，小程式客戶端連線程式碼需攜帶服務端 CA、客戶端證書及客戶端私鑰，請參考 [https://github.com/mqttjs/MQTT.js/blob/main/examples/tls%20client/mqttclient.js](https://github.com/mqttjs/MQTT.js/blob/main/examples/tls client/mqttclient.js)

[![小程式雙向認證](http://img.blog.itpub.net/blog/2022/06/17/a5b2ab2045ad2280.png?x-oss-process=style/bb "小程式雙向認證")](https://www.emqx.com/zh/blog/how-to-use-mqtt-in-wechat-miniprogram "小程式雙向認證")

2. 繫結域名

EMQX Cloud 專業版部署預設連線地址是 IP，由於小程式只可以跟指定的域名進行網路通訊，所以需要 EMQX Cloud 使用者將自己經過 [ICP 備案](https://kf.qq.com/faq/180123AZnmEZ180123zIFR3Q.html) 的域名和部署 IP 相繫結，並且前往 [微信公眾平臺](https://mp.weixin.qq.com/) ->【開發】->【開發管理】->【開發設定】->【伺服器域名】中**新增 socket 合法域名**。

[![小程式繫結域名](http://img.blog.itpub.net/blog/2022/06/17/8577c45c8f9da2fd.png?x-oss-process=style/bb "小程式繫結域名")](https://www.emqx.com/zh/blog/how-to-use-mqtt-in-wechat-miniprogram "小程式繫結域名")

#### 建立專案

[註冊](https://mp.weixin.qq.com/wxopen/waregister?action=step1&token=&lang=zh_CN) 微信小程式賬號，並下載 [微信開發者工具](https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html)。開啟微信開發者工具，點選新建一個小程式專案。

[![建立小程式](http://img.blog.itpub.net/blog/2022/06/17/a5884488674d4a69.png?x-oss-process=style/bb "建立小程式")](https://www.emqx.com/zh/blog/how-to-use-mqtt-in-wechat-miniprogram "建立小程式")

### MQTT 庫安裝

推薦使用 MQTT.js v4.2.1:
https: //unpkg.com/mqtt@4.2.1/dist/mqtt.min.js （針對原生的微信小程式）
**若偵錯程式可以連線但真機除錯仍有問題，建議嘗試切換 MQTT.js 版本**。

> 原生微信小程式 MQTT.js 可用版本有 v4.2.1、v4.2.0、v4.1.0 和 v2.18.8
>
> 使用 uniapp 框架搭建微信小程式 MQTT.js 可用版本有 v4.1.0 和 v2.18.8

在專案根目錄下新建 utils 資料夾，將下載好的對應版本的 mqtt.min.js 檔案放入該資料夾中，在 index.js 中透過如下方式引入 mqtt

```capnproto
import mqtt from "../../utils/mqtt.min.js";
```

## MQTT 連線測試工具關鍵程式碼

### 建立連線

> 只能使用 wss 協議，但是微信小程式中需要寫為 wxs
>
> 埠為 8084（EMQX Cloud 專業版部署），但實際的埠號以 EMQX Cloud 控制檯對應部署的概覽頁面資訊為準
>
> 連線地址末尾不要忘了帶上路徑 /mqtt
>
> EMQX Cloud 部署需要先在部署詳情頁面的【認證鑑權】->【認證】中新增使用者名稱密碼，然後寫入 mqttOptions 中

```kotlin
Page({
  data: {
    client: null,
    conenctBtnText: "連線",
    host: "wx.emqxcloud.cn",
    subTopic: "testtopic/miniprogram",
    pubTopic: "testtopic/miniprogram",
    pubMsg: "Hello! I am from WeChat miniprogram",
    receivedMsg: "",
    mqttOptions: {
      username: "test",
      password: "test",
      reconnectPeriod: 1000, // 1000毫秒，設定為 0 禁用自動重連，兩次重新連線之間的間隔時間
      connectTimeout: 30 * 1000, // 30秒，連線超時時間
      // 更多引數請參閱 MQTT.js 官網文件：https://github.com/mqttjs/MQTT.js#mqttclientstreambuilder-options
      // 更多 EMQ 相關 MQTT 使用教程可在 EMQ 官方部落格中進行搜尋：https://www.emqx.com/zh/blog
    },
  },

setValue(key, value) {
    this.setData({
      [key]: value,
    });
  },

connect() {
    // MQTT-WebSocket 統一使用 /path 作為連線路徑，連線時需指明，但在 EMQX Cloud 部署上使用的路徑為 /mqtt
    // 因此不要忘了帶上這個 /mqtt !!!
    // 微信小程式中需要將 wss 協議寫為 wxs，且由於微信小程式出於安全限制，不支援 ws 協議
    try {
      this.setValue("conenctBtnText", "連線中...");
      const clientId = new Date().getTime();
      this.data.client = mqtt.connect(`wxs://${this.data.host}:8084/mqtt`, {
        ...this.data.mqttOptions,
        clientId,
      });

this.data.client.on("connect", () => {
        wx.showToast({
          title: "連線成功",
        });
        this.setValue("conenctBtnText", "連線成功");

this.data.client.on("message", (topic, payload) => {
          wx.showModal({
            content: `收到訊息 - Topic: ${topic}，Payload: ${payload}`,
            showCancel: false,
          });
          const currMsg = this.data.receivedMsg ? `<br>${payload}` : payload;
          this.setValue("receivedMsg", this.data.receivedMsg.concat(currMsg));
        });

this.data.client.on("error", (error) => {
          this.setValue("conenctBtnText", "連線");
          console.log("onError", error);
        });

this.data.client.on("reconnect", () => {
          this.setValue("conenctBtnText", "連線");
          console.log("reconnecting...");
        });

this.data.client.on("offline", () => {
          this.setValue("conenctBtnText", "連線");
          console.log("onOffline");
        });
        // 更多 MQTT.js 相關 API 請參閱 https://github.com/mqttjs/MQTT.js#api
      });
    } catch (error) {
      this.setValue("conenctBtnText", "連線");
      console.log("mqtt.connect error", error);
    }
  },
});
```

### 訂閱主題

```kotlin
subscribe() {
  if (this.data.client) {
    this.data.client.subscribe(this.data.subTopic)
    wx.showModal({
      content: `成功訂閱主題：${this.data.subTopic}`,
      showCancel: false,
    })
    return
  }
  wx.showToast({
    title: '請先點選連線',
    icon: 'error',
  })
},
```

### 取消訂閱

```kotlin
unsubscribe() {
  if (this.data.client) {
    this.data.client.unsubscribe(this.data.subTopic)
    wx.showModal({
      content: `成功取消訂閱主題：${this.data.subTopic}`,
      showCancel: false,
    })
    return
  }
  wx.showToast({
    title: '請先點選連線',
    icon: 'error',
  })
},
```

### 釋出訊息

```kotlin
publish() {
  if (this.data.client) {
    this.data.client.publish(this.data.pubTopic, this.data.pubMsg)
    return
  }
  wx.showToast({
    title: '請先點選連線',
    icon: 'error',
  })
},
```

### 斷開連線

```stylus
disconnect() {
  this.data.client.end()
  this.data.client = null
  this.setValue('conenctBtnText', '連線')
  wx.showToast({
    title: '成功斷開連線'
  })
},
```

專案完整程式碼請參閱：https://github.com/emqx/MQTT-Client-Examples/tree/master/mqtt-client-wechat-miniprogram

## 真機測試驗證

本文使用 [MQTT 5.0 客戶端工具 - MQTT X](https://mqttx.app/zh) 作為測試的客戶端和小程式互相收發訊息。

小程式建立連線，並訂閱主題 `testtopic/miniprogram`，然後向該主題傳送一條訊息。與此同時使用 MQTT X 連線相同的地址，訂閱主題 `testtopic/#` 。

[![MQTT 客戶端](http://img.blog.itpub.net/blog/2022/06/17/9b1b77fe47a8c3f8.png?x-oss-process=style/bb "MQTT 客戶端")](https://www.emqx.com/zh/blog/how-to-use-mqtt-in-wechat-miniprogram "MQTT 客戶端")

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

[![微信小程式 MQTT](http://img.blog.itpub.net/blog/2022/06/17/c84490999a547a00.png?x-oss-process=style/bb "微信小程式 MQTT")](https://www.emqx.com/zh/blog/how-to-use-mqtt-in-wechat-miniprogram "微信小程式 MQTT")

## 結語

透過本文，我們介紹瞭如何在微信小程式中使用 MQTT.js 實現 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)

在微信小程式中打造 MQTT 連線測試工具

相關文章