使用 WebSocket 連接 MQTT 服務器

近年來隨着 Web 前端的快速發展，瀏覽器新特性層出不窮，越來越多的應用可以在瀏覽器端通過瀏覽器渲染引擎實現，Web 應用的即時通信方式 WebSocket 也因此得到了廣泛的應用。

WebSocket 是一種在單個 TCP 連接上進行全雙工通訊的協議。WebSocket 通信協議於2011年被 IETF 定為標准 RFC 6455，並由 RFC 7936 補充規范。WebSocket API 也被 W3C 定為標准。

WebSocket 使得客戶端和服務器之間的數據交換變得更加簡單，允許服務端主動向客戶端推送數據。在 WebSocket API 中，瀏覽器和服務器只需要完成一次握手，兩者之間就直接可以創建持久性的連接，並進行雙向數據傳輸。 ^[1]

MQTT 協議第 6 章 詳細約定了 MQTT 在 WebSocket [RFC6455] 連接上傳輸需要滿足的條件，協議內容不在此詳細贅述。

兩款客戶端比較

Paho.mqtt.js

Paho 是 Eclipse 的一個 MQTT 客戶端項目，Paho JavaScript Client 是其中一個基於瀏覽器的庫，它使用 WebSockets 連接到 MQTT 服務器。相較於另一個 JavaScript 連接庫來說，其功能較少，不推薦使用。

MQTT.js

MQTT.js 是一個完全開源的 MQTT 協議的客戶端庫，使用 JavaScript 編寫，可用於 Node.js 和瀏覽器。在 Node.js 端可以通過全局安裝使用命令行連接，同時支持 MQTT/TCP、MQTT/TLS、MQTT/WebSocket 連接；值得一提的是 MQTT.js 還對微信小程序有較好的支持。

本文將使用 MQTT.js 庫進行 WebSocket 的連接講解。

安裝 MQTT.js

如果讀者機器上裝有 Node.js 運行環境，可直接使用 npm 命令安裝 MQTT.js。

在當前目錄安裝

npm install mqtt --save

CDN 引用

或免安裝直接使用 CDN 地址

<script src="https://unpkg.com/mqtt/dist/mqtt.min.js"></script>

<script>
    // 將在全局初始化一個 mqtt 變量
    console.log(mqtt)
</script>

連接至 MQTT 服務器

本文將使用 EMQ X 提供的 免費公共 MQTT 服務器，該服務基於 EMQ X 的 MQTT 物聯網雲平台 創建。服務器接入信息如下：

• Broker: broker.emqx.io
• TCP Port: 1883
• Websocket Port: 8083

EMQ X 使用 8083 端口用於普通連接，8084 用於 SSL 上的 WebSocket 連接。

為了簡單起見，讓我們將訂閱者和發布者放在同一個文件中：

const clientId = 'mqttjs_' + Math.random().toString(16).substr(2, 8)

const host = 'ws://broker.emqx.io:8083/mqtt'

const options = {
  keepalive: 60,
  clientId: clientId,
  protocolId: 'MQTT',
  protocolVersion: 4,
  clean: true,
  reconnectPeriod: 1000,
  connectTimeout: 30 * 1000,
  will: {
    topic: 'WillMsg',
    payload: 'Connection Closed abnormally..!',
    qos: 0,
    retain: false
  },
}

console.log('Connecting mqtt client')
const client = mqtt.connect(host, options)

client.on('error', (err) => {
  console.log('Connection error: ', err)
  client.end()
})

client.on('reconnect', () => {
  console.log('Reconnecting...')
})

連接地址

上文示范的連接地址可以拆分為： ws: // broker . emqx.io : 8083 /mqtt

即 協議 // 主機名 . 域名 : 端口 / 路徑

初學者容易出現以下幾個錯誤：

• 連接地址沒有指明協議：WebSocket 作為一種通信協議，其使用 ws (非加密)、wss (SSL 加密) 作為協議標識。MQTT.js 客戶端支持多種協議，連接地址需指明協議類型；
• 連接地址沒有指明端口：MQTT 並未對 WebSocket 接入端口做出規定，EMQ X 上默認使用 8083 8084 分別作為非加密連接、加密連接端口。而 WebSocket 協議默認端口同 HTTP 保持一致 (80/443)，不填寫端口則表明使用 WebSocket 的默認端口連接；而使用標准 MQTT 連接時則無需指定端口，如 MQTT.js 在 Node.js 端可以使用 mqtt://localhost 連接至標准 MQTT 1883 端口，當連接地址是 mqtts://localhost 則連接到 8884 端口；
• 連接地址無路徑：MQTT-WebSoket 統一使用 /path 作為連接路徑，連接時需指明，在 EMQ X 上使用的路徑為 /mqtt；
• 協議與端口不符：使用了 wss 連接卻連接到 8083 端口；
• 在 HTTPS 下使用非加密的 WebSocket 連接： Google 等機構在推進 HTTPS 的同時也通過瀏覽器約束進行了安全限定，即 HTTPS 連接下瀏覽器會自動禁止使用非加密的 ws 協議發起連接請求；
• 證書與連接地址不符： 篇幅較長，詳見下文 EMQ 啟用 SSL/TLS 加密連接。

連接選項

上面代碼中， options 是客戶端連接選項，以下是主要參數說明，其余參數詳見https://www.npmjs.com/package/mqtt#connect。

• keepalive：心跳時間，默認 60秒，設置 0 為禁用；
• clientId： 客戶端 ID ，默認通過 'mqttjs_' + Math.random().toString(16).substr(2, 8) 隨機生成；
• username：連接用戶名（可選）；
• password：連接密碼（可選）；
• clean：true，設置為 false 以在離線時接收 QoS 1 和 2 消息；
• reconnectPeriod：默認 1000 毫秒，兩次重新連接之間的間隔，客戶端 ID 重復、認證失敗等客戶端會重新連接；
• connectTimeout：默認 30 * 1000毫秒，收到 CONNACK 之前等待的時間，即連接超時時間；
• will：遺囑消息，當客戶端嚴重斷開連接時，Broker 將自動發送的消息。 一般格式為：
  • topic：要發布的主題
  • payload：要發布的消息
  • qos：QoS
  • retain：保留標志

訂閱/取消訂閱

連接成功之后才能訂閱，且訂閱的主題必須符合 MQTT 訂閱主題規則；

注意 JavaScript 的異步非阻塞特性，只有在 connect 事件后才能確保客戶端已成功連接，或通過 client.connected 判斷是否連接成功：

client.on('connect', () => {
  console.log('Client connected:' + clientId)
  // Subscribe
  client.subscribe('testtopic', { qos: 0 })
})

// Unsubscribe
client.unubscribe('testtopic', () => {
  console.log('Unsubscribed')
})

發布/接收消息

發布消息到某主題，發布的主題必須符合 MQTT 發布主題規則，否則將斷開連接。發布之前無需訂閱該主題，但要確保客戶端已成功連接：

// Publish
client.publish('testtopic', 'ws connection demo...!', { qos: 0, retain: false })

// Received
client.on('message', (topic, message, packet) => {
  console.log('Received Message: ' + message.toString() + '\nOn topic: ' + topic)
})

微信小程序

MQTT.js 庫對微信小程序特殊處理，使用 wxs 協議標識符。注意小程序開發規范中要求必須使用加密連接，連接地址應類似為 wxs://broker.emqx.io:8084/mqtt。

EMQ X 啟用 SSL/TLS 加密連接

EMQ 內置自簽名證書，默認已經啟動了加密的 WebSocket 連接，但大部分瀏覽器會報證書無效錯誤如 net::ERR_CERT_COMMON_NAME_INVALID (Chrome、360 等 webkit 內核瀏覽器在開發者模式下， Console 選項卡 可以查看大部分連接錯誤)。導致該錯誤的原因是瀏覽器無法驗證自簽名證書的有效性，讀者需從證書頒發機構購買可信任證書，並參考該篇文章中的相應部分進行配置操作：EMQ X MQTT 服務器啟用 SSL/TLS 安全連接。

這里就總結啟用 SSL/TLS 證書需要具備的條件是：

• 將域名綁定到 MQTT 服務器公網地址：CA 機構簽發的證書簽名是針對域名的；
• 申請證書：向 CA 機構申請所用域名的證書，注意選擇一個可靠的 CA 機構且證書要區分泛域名與主機名；
• 使用加密連接的時候選擇 wss 協議，並 使用域名連接 ：綁定域名-證書之后，必須使用域名而非 IP 地址進行連接，這樣瀏覽器才會根據域名去校驗證書以在通過校驗后建立連接。

EMQ X 配置

打開 etc/emqx.conf 配置文件，修改以下配置：

# wss 監聽地址
listener.wss.external = 8084

# 修改密鑰文件地址
listener.wss.external.keyfile = etc/certs/cert.key

# 修改證書文件地址
listener.wss.external.certfile = etc/certs/cert.pem

完成后重啟 EMQ X 即可。

可以使用你的證書與密鑰文件直接替換到 etc/certs/ 下。

在 Nginx 上配置反向代理與證書

使用 Nginx 來反向代理並加密 WebSocket 可以減輕 EMQ X 服務器計算壓力，同時實現域名復用，同時通過 Nginx 的負載均衡可以分配多個后端服務實體。

# 建議 WebSocket 也綁定到 443 端口
listen 443, 8084;
server_name example.com;

ssl on;

ssl_certificate /etc/cert.crt;  # 證書路徑
ssl_certificate_key /etc/cert.key; # 密鑰路徑


# upstream 服務器列表
upstream emq_server {
    server 10.10.1.1:8883 weight=1;
    server 10.10.1.2:8883 weight=1;
    server 10.10.1.3:8883 weight=1;
}

# 普通網站應用
location / {
    root www;
    index index.html;
}

# 反向代理到 EMQ X 非加密 WebSocket
location / {
    proxy_redirect off;
    # upstream
    proxy_pass http://emq_server;
    
    proxy_set_header Host $host;
    # 反向代理保留客戶端地址
    proxy_set_header X-Real_IP $remote_addr;
    proxy_set_header X-Forwarded-For $remote_addr:$remote_port;
    # WebSocket 額外請求頭
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection “upgrade”;
}

其它資源

項目完整代碼請見：https://github.com/emqx/MQTT-Client-Examples/tree/master/mqtt-client-WebSocket

一款在線的 MQTT WebSocket 連接測試工具：https://www.emqx.io/cn/mqtt/mqtt-websocket-toolkit

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

原文鏈接：https://www.emqx.io/cn/blog/connect-to-mqtt-broker-with-websocket

---

1. https://zh.wikipedia.org/zh-hans/WebSocket ↩︎