【vue】項目使用mqtt消息隊列實現推送

簡介

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

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

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

MQTT 協議第 6 章詳細約定了 MQTT 在 WebSocket [RFC6455] 連接上傳輸需要滿足的條件，協議內容EMQ君不在此累述。由於協議實現細節較爲複雜，本文選取兩個常用的 JavaScript MQTT 客戶端進行連接測試。
兩款客戶端比較

Paho.mqtt.js

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

MQTT.js

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

EMQ 君將以 MQTT.js 庫進行連接講解。
安裝 MQTT.js

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

在當前目錄安裝

npm i mqtt

全局安裝

將註冊 mqtt mqtt_pub mqtt_sub 命令到當前用戶，此處藉助 iot.eclipse.org 講解一下命令行的使用

# 全局安裝
npm i mqtt -g
 
# 使用命令行訂閱
$ mqtt sub -t 'hello' -h 'iot.eclipse.org' -v
> hello 09860
 
# 成功連接到服務器並訂閱了主題 hello, 命令行將阻塞等待消息
 
 
# 在另一個終端上使用命令行發佈
mqtt pub -t 'hello' -h 'iot.eclipse.org' -m 'from MQTT.js'
 
# 命令行將進行 連接 -> 發佈 -> 斷開連接 操作，此時讀者會到訂閱命令行，應當收到來自 hello 主題的消息
 
> hello from MQTT.js

npm 在當前目錄安裝仍然可以使用 ./node_module/.bin/mqtt 命令來執行以上操作。

CDN 引用

MQTT.js 包可以通過 http://unpkg.com 獲得

<script src="https://unpkg.com/mqtt/dist/mqtt.min.js"></script>
 
<script>
    // 將在全局初始化一個 mqtt 變量
    console.log(mqtt)
</script>

連接至 MQTT 服務器

幾個公共的用於 WebSocket 測試連接服務器：

#test.mosquitto.org - 使用端口 8080 未加密，8081 用於 SSL 上的 WebSocket；
#iot.eclipse.org - 使用端口 80 未加密，443 用於 SSL 上的 WebSocket；
#broker.hivemq.com - 使用端口 8000 未加密，不支持 SSL 上的 WebSocket。

由於需要展示客戶端認證部分內容，但上述服務器未提供客戶端認證服務，筆者特通過 ActorCloud 平臺註冊了一個設備進行接入連接。

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

// <script src="https://unpkg.com/mqtt/dist/mqtt.min.js"></script>
// const mqtt = require('mqtt')
import mqtt from 'mqtt'
 
// 連接選項
const options = {
      connectTimeout: 4000, // 超時時間
      // 認證信息
      clientId: 'emqx-connect-via-websocket',
      username: 'emqx-connect-via-websocket',
      password: 'emqx-connect-via-websocket',
}
 
const client = mqtt.connect('wss://iot.actorcloud.io:8084/mqtt', options)
 
client.on('reconnect', (error) => {
    console.log('正在重連:', error)
})
 
client.on('error', (error) => {
    console.log('連接失敗:', error)
})

連接地址

上文示範的連接地址可以拆分爲： wss: // iot . actorcloud.io : 8084 /mqtt

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

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

連接地址沒有指明協議：WebSocket 作爲一種通信協議，其使用 ws(非加密)、wss(SSL 加密) 作爲協議標識。MQTT.js 客戶端支持多種協議，連接地址需指明協議類型；

連接地址沒有指明端口：MQTT 並未對 WebSocket 接入端口做出規定，EMQ 上默認使用 8083 8084 分別作爲非加密連接、加密連接端口。而 WebSocket 協議默認端口同 HTTP 保持一致 (80/443)，不填寫端口則表明使用 WebSocket 的默認端口連接；而使用標準 MQTT 連接時則無需指定端口，如 MQTT.js 在 Node.js 端可以使用 mqtt://localhost 連接至標準 MQTT 8083 端口，當連接地址是 mqtts://localhost 則連接到 8884 端口；

連接地址無路徑：MQTT-WebSoket 統一使用 /path 作爲連接路徑，連接時需指明；

協議與端口不符：使用了 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 之前等待的時間，即連接超時時間。

訂閱/取消訂閱

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

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

// 錯誤示例
client.on('connect', handleConnect)
client.subscribe('hello')
client.publish('hello', 'Hello EMQ')
 
// 正確示例
 
client.on('connect', (e) => {
    console.log('成功連接服務器')
    
    // 訂閱一個主題
    client.subscribe('hello', { qos: 1 }, (error) => {
        if (!error) {
            cosnole.log('訂閱成功')
            client.publish('hello', 'Hello EMQ', { qos: 1, rein: false }, (error) => {
                cosnole.log(error || '發佈成功')
            })
        }
    })
    
    // 訂閱多個主題
    client.subscribe(['hello', 'one/two/three/#', '#'], { qos: 1 },  onSubscribeSuccess)
    
    // 訂閱不同 qos 的不同主題
    client.subscribe(
        [
            { hello: 1 }, 
            { 'one/two/three': 2 }, 
            { '#': 0 }
        ], 
        onSubscribeSuccess,
    )
})
 
// 取消訂閱
client.unubscribe(
    // topic, topic Array, topic Array-Onject
    'hello',
    onUnubscribeSuccess,
)

發佈/接收消息

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

// 監聽接收消息事件
client.on('message', (topic, message) => {
    console.log('收到來自', topic, '的消息', message.toString())
})
 
// 發佈消息
if (!client.connected) {
    console.log('客戶端未連接')
    return
}
 
client.publish('hello', 'hello EMQ', (error) => {
    console.log(error || '消息發佈成功')
})

微信小程序

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

EMQ 內置自簽名證書，默認已經啓動了加密的 WebSocket 連接，但大部分瀏覽器會報證書無效錯誤如net::ERR_CERT_COMMON_NAME_INVALID (Chrome、360 等 webkit 內核瀏覽器在開發者模式下， Console 選項卡可以查看大部分連接錯誤)。

準備工作

這篇文章 https流程和原理中對證書認證進行了詳細的闡述，EMQ 君總結啓用 SSL/TLS 證書需要具備的條件是：

將域名綁定到 EMQ 服務器公網地址：CA 機構簽發的證書籤名是針對域名的；

申請證書：向 CA 機構申請所用域名的證書，注意選擇一個可靠的 CA 機構且證書要區分泛域名與主機名；

使用加密連接的時候選擇 wss 協議，並使用域名連接：綁定域名-證書之後，必須使用域名而非 IP 地址進行連接，這樣瀏覽器纔會根據域名去校驗證書以在通過校驗後建立連接。

在 EMQ 上配置

打開 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 即可。

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

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

使用 nginx 來反向代理並加密 WebSocket 可以減輕 EMQ 服務器計算壓力，同時實現域名複用，同時通過 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 非加密 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”;

}

其他資源

MQTT.js 官方例子給出了詳細的連接與使用操作實例代碼，讀者可前往查看；

EMQ Dashboard 中的 WebSocket 工具、ActorCloud 測試工具 -> MQTT 客戶端 (需到 ActorCloud 商城開通)，均使用 MQTT.js 構建，讀者可體驗參考。

【vue】項目使用mqtt消息隊列實現推送

如何使用 JS 判斷用戶是否處於活躍狀態

lightdb秒級增加列和刪除列（not null帶默認值）

lightdb數據庫超時相關控制參數

通過HPA+CronHPA組合應對業務複雜彈性伸縮場景

❤️‍🔥 Solon Cloud Event 新的事務特性與應用

lightdb mysql 8.0兼容之不可見主鍵

使用 JS 實現在瀏覽器控制檯打印圖片 console.image()

基於Ubuntu-22.04安裝K8s-v1.28.2實驗（四）使用域名訪問網站應用

h5 頁面適配iphone6等手機

【值得收藏的帝國cms技巧】帝國cms常用標籤總結

【vue】項目使用mqtt消息隊列實現推送

mqtt消息推送

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結