本篇內(nèi)容介紹了“如何使用WebSocket連接MQTT服務(wù)器”的有關(guān)知識，在實(shí)際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

創(chuàng)新互聯(lián)主營茌平網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營網(wǎng)站建設(shè)方案,app軟件開發(fā),茌平h5微信小程序開發(fā)搭建,茌平網(wǎng)站營銷推廣歡迎茌平等地區(qū)企業(yè)咨詢

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

WebSocket 是一種在單個(gè) TCP 連接上進(jìn)行全雙工通訊的協(xié)議。WebSocket 通信協(xié)議于2011年被 IETF 定為標(biāo)準(zhǔn) RFC 6455，并由 RFC 7936 補(bǔ)充規(guī)范。WebSocket API 也被 W3C 定為標(biāo)準(zhǔn)。

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

兩款客戶端比較

Paho.mqtt.js

Paho 是 Eclipse 的一個(gè) MQTT 客戶端項(xiàng)目，Paho JavaScript Client 是其中一個(gè)基于瀏覽器的庫，它使用 WebSockets 連接到 MQTT 服務(wù)器。相較于另一個(gè) JavaScript 連接庫來說，其功能較少，不推薦使用。

MQTT.js

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

本文將使用 MQTT.js 庫進(jìn)行 WebSocket 的連接講解。

安裝 MQTT.js

如果讀者機(jī)器上裝有 Node.js 運(yùn)行環(huán)境，可直接使用 npm 命令安裝 MQTT.js。

在當(dāng)前目錄安裝

npm install mqtt --save

cdn 引用

或免安裝直接使用 CDN 地址

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

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

連接至 MQTT 服務(wù)器

本文將使用 EMQ X 提供的 免費(fèi)公共 MQTT 服務(wù)器，該服務(wù)基于 EMQ X 的 MQTT 物聯(lián)網(wǎng)云平臺 創(chuàng)建。服務(wù)器接入信息如下：

• Broker: broker.emqx.io

• TCP Port: 1883

• Websocket Port: 8083

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

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

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

即 協(xié)議 // 主機(jī)名 . 域名 : 端口 / 路徑

初學(xué)者容易出現(xiàn)以下幾個(gè)錯(cuò)誤：

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

• 連接地址沒有指明端口：MQTT 并未對 WebSocket 接入端口做出規(guī)定，EMQ X 上默認(rèn)使用 8083 8084 分別作為非加密連接、加密連接端口。而 WebSocket 協(xié)議默認(rèn)端口同 HTTP 保持一致 (80/443)，不填寫端口則表明使用 WebSocket 的默認(rèn)端口連接；而使用標(biāo)準(zhǔn) MQTT 連接時(shí)則無需指定端口，如 MQTT.js 在 Node.js 端可以使用 mqtt://localhost 連接至標(biāo)準(zhǔn) MQTT 1883 端口，當(dāng)連接地址是 mqtts://localhost 則連接到 8884 端口；

• 連接地址無路徑：MQTT-WebSoket 統(tǒng)一使用 /path 作為連接路徑，連接時(shí)需指明，在 EMQ X 上使用的路徑為 /mqtt；

• 協(xié)議與端口不符：使用了 wss 連接卻連接到 8083 端口；

• 在 HTTPS 下使用非加密的 WebSocket 連接： Google 等機(jī)構(gòu)在推進(jìn) HTTPS 的同時(shí)也通過瀏覽器約束進(jìn)行了安全限定，即 HTTPS 連接下瀏覽器會自動禁止使用非加密的 ws 協(xié)議發(fā)起連接請求；

• 證書與連接地址不符： 篇幅較長，詳見下文 EMQ 啟用 SSL/TLS 加密連接。

連接選項(xiàng)

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

• keepalive：心跳時(shí)間，默認(rèn) 60秒，設(shè)置 0 為禁用；

• clientId： 客戶端 ID ，默認(rèn)通過 'mqttjs_' + Math.random().toString(16).substr(2, 8) 隨機(jī)生成；

• username：連接用戶名（可選）；

• password：連接密碼（可選）；

• clean：true，設(shè)置為 false 以在離線時(shí)接收 QoS 1 和 2 消息；

• reconnectPeriod：默認(rèn) 1000 毫秒，兩次重新連接之間的間隔，客戶端 ID 重復(fù)、認(rèn)證失敗等客戶端會重新連接；

• connectTimeout：默認(rèn) 30 * 1000毫秒，收到 CONNACK 之前等待的時(shí)間，即連接超時(shí)時(shí)間；

• will：遺囑消息，當(dāng)客戶端嚴(yán)重?cái)嚅_連接時(shí)，Broker 將自動發(fā)送的消息。 一般格式為：

• topic：要發(fā)布的主題

• payload：要發(fā)布的消息

• qos：QoS

• retain：保留標(biāo)志

訂閱/取消訂閱

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

注意 JavaScript 的異步非阻塞特性，只有在 connect 事件后才能確?？蛻舳艘殉晒B接，或通過 client.connected 判斷是否連接成功：

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

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

發(fā)布/接收消息

發(fā)布消息到某主題，發(fā)布的主題必須符合 MQTT 發(fā)布主題規(guī)則，否則將斷開連接。發(fā)布之前無需訂閱該主題，但要確?？蛻舳艘殉晒B接：

// 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 協(xié)議標(biāo)識符。注意小程序開發(fā)規(guī)范中要求必須使用加密連接，連接地址應(yīng)類似為 wxs://broker.emqx.io:8084/mqtt。

EMQ X 啟用 SSL/TLS 加密連接

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

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

• 將域名綁定到 MQTT 服務(wù)器公網(wǎng)地址：CA 機(jī)構(gòu)簽發(fā)的證書簽名是針對域名的；

• 申請證書：向 CA 機(jī)構(gòu)申請所用域名的證書，注意選擇一個(gè)可靠的 CA 機(jī)構(gòu)且證書要區(qū)分泛域名與主機(jī)名；

• 使用加密連接的時(shí)候選擇 wss 協(xié)議，并 使用域名連接：綁定域名-證書之后，必須使用域名而非 IP 地址進(jìn)行連接，這樣瀏覽器才會根據(jù)域名去校驗(yàn)證書以在通過校驗(yàn)后建立連接。

EMQ X 配置

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

# wss 監(jiān)聽地址
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 服務(wù)器計(jì)算壓力，同時(shí)實(shí)現(xiàn)域名復(fù)用，同時(shí)通過 Nginx 的負(fù)載均衡可以分配多個(gè)后端服務(wù)實(shí)體。

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

ssl on;

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


# upstream 服務(wù)器列表
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;
}

# 普通網(wǎng)站應(yīng)用
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服務(wù)器”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！

網(wǎng)頁題目：如何使用WebSocket連接MQTT服務(wù)器
網(wǎng)站鏈接：http://jinyejixie.com/article4/igoioe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供靜態(tài)網(wǎng)站、商城網(wǎng)站、移動網(wǎng)站建設(shè)、做網(wǎng)站、面包屑導(dǎo)航、響應(yīng)式網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)