前言

在 Web 開發(fā)中，MQTT（Message Queuing Telemetry Transport）是一種輕量級的消息協(xié)議，非常適合物聯(lián)網(wǎng)（IoT）設(shè)備與應用之間的通信。它被廣泛應用于實時消息推送、設(shè)備狀態(tài)更新等場景。今天，我們將介紹如何利用原生 JavaScript 在瀏覽器中實現(xiàn) MQTT 通信，并解釋為什么瀏覽器連接需要使用 ws 協(xié)議。

1. 什么是 MQTT 協(xié)議？

MQTT 是一個基于發(fā)布/訂閱模式的輕量級通信協(xié)議。它的工作原理大致如下：

• 發(fā)布者（Publisher）：發(fā)送消息。

• 訂閱者（Subscriber）：接收消息。

• 消息代理（Broker）：負責接收、過濾、和轉(zhuǎn)發(fā)消息到相應的訂閱者。

它使用的是 TCP/IP 協(xié)議，適合低帶寬、高延遲的網(wǎng)絡(luò)環(huán)境，非常適合物聯(lián)網(wǎng)應用和實時通信。

2. 在瀏覽器中使用 MQTT

通常，MQTT 協(xié)議是基于 TCP/IP 協(xié)議來實現(xiàn)的，而瀏覽器中的 JavaScript 并不支持直接連接到 TCP 端口。但幸好，MQTT 協(xié)議也支持 WebSocket 協(xié)議，這使得瀏覽器可以通過 WebSocket 協(xié)議來連接到 MQTT 代理（Broker）。

WebSocket 協(xié)議（ws 或 wss）允許瀏覽器建立與服務器的持久連接，支持雙向數(shù)據(jù)傳輸。為了在瀏覽器中實現(xiàn) MQTT 通信，我們可以使用 ws 協(xié)議來與 MQTT 服務器進行連接。

3. MQTT.js 庫

為了簡化在瀏覽器中使用 MQTT 協(xié)議的過程，我們通常使用 MQTT.js 這個庫，它提供了一個簡單的 API 來幫助開發(fā)者快速實現(xiàn) MQTT 客戶端。

4. 代碼實現(xiàn)：原生 JavaScript 實現(xiàn) MQTT 通信

接下來，我們將通過一個簡單的示例來演示如何使用原生 JavaScript 和 MQTT.js 庫實現(xiàn) MQTT 通信。

4.1 引入 MQTT.js

首先，我們需要引入 MQTT.js 庫，這個庫可以通過 CDN 進行加載。

<script src="https://cdn.jsdelivr.net/npm/mqtt@4.3.7/dist/mqtt.min.js"></script>

4.2 代碼示例

// 使用 MQTT.js 庫通過 WebSocket 協(xié)議連接到 MQTT 服務器
const client = mqtt.connect('wss://test.mosquitto.org:8081'); // 使用 WebSocket 協(xié)議

// 連接成功時的回調(diào)函數(shù)
client.on('connect', () => {
  console.log('Connected to MQTT broker');
  // 訂閱主題
  client.subscribe('test/topic', (err) => {
    if (err) {
      console.log('Failed to subscribe:', err);
    } else {
      console.log('Subscribed to test/topic');
    }
  });
});

// 接收到消息時的回調(diào)函數(shù)
client.on('message', (topic, message) => {
  console.log(`Received message on ${topic}: ${message.toString()}`);
  // 可以在這里處理接收到的消息
});

// 發(fā)布消息到 "test/topic" 主題
function sendMessage(message) {
  if (message) {
    client.publish('test/topic', message);
    console.log(`Sent message: ${message}`);
  }
}

// 例子：發(fā)送一個消息
sendMessage('Hello, MQTT!');

4.3 代碼解析

1. 連接 MQTT 服務器：我們使用

   mqtt.connect('wss://test.mosquitto.org:8081') 

   連接到支持 WebSocket 協(xié)議的 MQTT 服務器。在這里使用的是公共的 Mosquitto 測試服務器，它支持 WebSocket 連接。

2. 訂閱主題：連接成功后，客戶端訂閱了 test/topic 主題，意味著它將接收到發(fā)送到這個主題的所有消息。

3. 發(fā)布消息：當用戶輸入消息并點擊“發(fā)送消息”按鈕時，客戶端將該消息發(fā)布到 test/topic 主題上。

4. 接收消息：每當接收到來自 test/topic 主題的消息時，客戶端會在頁面上顯示出來。

4.4 WebSocket 協(xié)議 (ws和wss)

• ws 協(xié)議：表示 WebSocket 協(xié)議的非加密版本，通常用于開發(fā)環(huán)境或信任的內(nèi)部網(wǎng)絡(luò)。

• wss 協(xié)議：表示 WebSocket 協(xié)議的加密版本，通常用于生產(chǎn)環(huán)境，通過 SSL/TLS 加密連接，確保數(shù)據(jù)的安全傳輸。

5. 總結(jié)

在這篇文章中，我們通過一個簡單的例子展示了如何在瀏覽器中使用原生 JavaScript 實現(xiàn) MQTT 通信，并且通過 WebSocket (ws 或 wss 協(xié)議) 來與 MQTT 服務器建立連接。WebSocket 協(xié)議使得瀏覽器能夠與 MQTT 服務器進行持久的雙向通信，非常適合實時數(shù)據(jù)更新、消息推送等應用場景。

如果你想在實際項目中使用 MQTT，只需將代碼中的 MQTT 服務器 URL 和主題更換為你自己的配置即可。

到此這篇關(guān)于如何利用原生JavaScript實現(xiàn)MQTT通信的文章就介紹到這了,更多相關(guān)JS實現(xiàn)MQTT通信內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論