如何使用WebSocket連接MQTT服務器

本篇內容介紹了“如何使用WebSocket連接MQTT服務器”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

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

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

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

兩款客戶端比較

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”;
}

“如何使用WebSocket連接MQTT服務器”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！