首页 > 网络编程 > JavaScript > javascript技巧 > JS实现MQTT通信

如何利用原生JavaScript实现MQTT通信详解

2025-11-15 14:03:23 作者：__Mustang?

MQTT是一种轻量级的消息传输协议,常用于物联网设备间的通信,这篇文章主要介绍了如何利用原生JavaScript实现MQTT通信的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下

前言

在 Web 开发中，MQTT（Message Queuing Telemetry Transport）是一种轻量级的消息协议，非常适合物联网（IoT）设备与应用之间的通信。它被广泛应用于实时消息推送、设备状态更新等场景。今天，我们将介绍如何利用原生 JavaScript 在浏览器中实现 MQTT 通信，并解释为什么浏览器连接需要使用 ws 协议。

1. 什么是 MQTT 协议？

MQTT 是一个基于发布/订阅模式的轻量级通信协议。它的工作原理大致如下：

发布者（Publisher）：发送消息。
订阅者（Subscriber）：接收消息。
消息代理（Broker）：负责接收、过滤、和转发消息到相应的订阅者。

它使用的是 TCP/IP 协议，适合低带宽、高延迟的网络环境，非常适合物联网应用和实时通信。

2. 在浏览器中使用 MQTT

通常，MQTT 协议是基于 TCP/IP 协议来实现的，而浏览器中的 JavaScript 并不支持直接连接到 TCP 端口。但幸好，MQTT 协议也支持 WebSocket 协议，这使得浏览器可以通过 WebSocket 协议来连接到 MQTT 代理（Broker）。

WebSocket 协议（ws 或 wss）允许浏览器建立与服务器的持久连接，支持双向数据传输。为了在浏览器中实现 MQTT 通信，我们可以使用 ws 协议来与 MQTT 服务器进行连接。

3. MQTT.js 库

为了简化在浏览器中使用 MQTT 协议的过程，我们通常使用 MQTT.js 这个库，它提供了一个简单的 API 来帮助开发者快速实现 MQTT 客户端。

4. 代码实现：原生 JavaScript 实现 MQTT 通信

接下来，我们将通过一个简单的示例来演示如何使用原生 JavaScript 和 MQTT.js 库实现 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 协议连接到 MQTT 服务器
const client = mqtt.connect('wss://test.mosquitto.org:8081'); // 使用 WebSocket 协议

// 连接成功时的回调函数
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');
    }
  });
});

// 接收到消息时的回调函数
client.on('message', (topic, message) => {
  console.log(`Received message on ${topic}: ${message.toString()}`);
  // 可以在这里处理接收到的消息
});

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

// 例子：发送一个消息
sendMessage('Hello, MQTT!');

4.3 代码解析

连接 MQTT 服务器：我们使用
```
mqtt.connect('wss://test.mosquitto.org:8081') 
```
连接到支持 WebSocket 协议的 MQTT 服务器。在这里使用的是公共的 Mosquitto 测试服务器，它支持 WebSocket 连接。
订阅主题：连接成功后，客户端订阅了 test/topic 主题，意味着它将接收到发送到这个主题的所有消息。
发布消息：当用户输入消息并点击“发送消息”按钮时，客户端将该消息发布到 test/topic 主题上。
接收消息：每当接收到来自 test/topic 主题的消息时，客户端会在页面上显示出来。

4.4 WebSocket 协议 (ws和wss)

ws 协议：表示 WebSocket 协议的非加密版本，通常用于开发环境或信任的内部网络。
wss 协议：表示 WebSocket 协议的加密版本，通常用于生产环境，通过 SSL/TLS 加密连接，确保数据的安全传输。

5. 总结

在这篇文章中，我们通过一个简单的例子展示了如何在浏览器中使用原生 JavaScript 实现 MQTT 通信，并且通过 WebSocket (ws 或 wss 协议) 来与 MQTT 服务器建立连接。WebSocket 协议使得浏览器能够与 MQTT 服务器进行持久的双向通信，非常适合实时数据更新、消息推送等应用场景。

如果你想在实际项目中使用 MQTT，只需将代码中的 MQTT 服务器 URL 和主题更换为你自己的配置即可。

到此这篇关于如何利用原生JavaScript实现MQTT通信的文章就介绍到这了,更多相关JS实现MQTT通信内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！