大家好，很高兴又见面了，我是"高级前端?进阶?"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发，您的支持是我不断创作的动力。

今天给大家带来的主题是MQTT.js，即 MQTT 协议的客户端库，用 JavaScript 编写，适用于 Node.js 和浏览器环境。话不多说，直接进入正题！

1.什么是 MQTT

MQTT（MQ Telemetry Transport）是一种轻量级开放消息传递协议，为资源受限的网络客户端提供了一种在低带宽环境中分发遥测信息的简单方法。 该协议采用发布/订阅通信模式，用于机器对机器 (M2M) 通信。

MQTT 是一种低开销协议，适应带宽和 CPU 限制，旨在在嵌入式环境中运行，为通信提供可靠、有效的路径。 MQTT 适用于连接代码占用量较小的设备，对于因偶尔的带宽限制或不可靠的连接而出现不同程度的延迟的无线网络来说，它是一个不错的选择。 该协议在汽车、能源和电信等行业都有应用。

尽管 MQTT 最初是用于与石油和天然气行业的监控和数据采集 (SCADA) 系统进行通信的专有协议，但它已在智能设备领域变得流行，如今已成为连接物联网的领先开源协议（ IoT）和工业物联网（IIoT）设备。

MQTT 中的 TT 代表遥测传输（Telemetry Transport），而 MQ 则指称为 IBM MQ。 尽管 MQTT 有时被拼写为“消息队列遥测传输（Message Queuing Telemetry Transport）”，但 MQTT 通信中不存在消息队列。

MQTT 协议具有以下优势：

• 轻量、高效：IoT 设备上的 MQTT 需要最少的资源，甚至可以用于小型微控制器。例如，最小的 MQTT 控制消息可以少至两个数据字节。MQTT 消息的标头也很小，可以优化网络带宽。
• 可扩展：MQTT 需要最少的代码，在操作中消耗的功率非常少。该协议还具有支持与大量物联网设备通信的内置功能。因此可以实施 MQTT 协议来连接数百万台此类设备。
• 可靠：许多 IoT 设备通过低带宽、高延迟的不可靠蜂窝网络连接。MQTT 具有内置功能，可减少 IoT 设备重新连接云所需的时间。它还定义了三种不同的服务质量级别，以确保 IoT 用例的可靠性——最多一次（0）、至少一次（1）和恰好一次（2）。
• 安全：MQTT 使开发人员可以轻松地使用现代身份验证协议（例如 OAuth、TLS1.3、客户管理的证书等）加密消息并对设备和用户进行身份验证。
• 良好的语言支持：C、Java、Go、Erlang、Python 等编程语言对 MQTT 协议的实施提供广泛的支持。因此，开发人员可以在任何类型的应用程序中以最少的编码快速实现它。

2.什么是 MQTT.js

MQTT.js 是 MQTT 协议的客户端库，用 JavaScript 编写，适用于 Node.js 和浏览器环境。 它是目前 JavaScript 生态系统中使用最广泛的 MQTT 客户端库。

由于 JavaScript 的单线程特性，MQTT.js 是一个完全异步的 MQTT 客户端，支持： MQTT/TCP、MQTT/TLS 和 MQTT/WebSocket，不同运行环境的支持程度如下：

• 浏览器：基于 WebSocket 的 MQTT
• Node.js：MQTT 和基于 WebSocket 的 MQTT

目前 MQTT.js 在 Github 上通过 MIT 协议开源，有超过 7.8k 的 star、1.4k 的 fork、NPM 周平均下载量 720k+，妥妥的优质前端开源库。

3.如何使用 MQTT.js

3.1 安装依赖

首先需要安装客户端库：

npm install mqtt --save

也可以通过 CDN 引入相关资源：

<script src="https://unpkg.com/mqtt/dist/mqtt.min.js"></script>
<script>
    // Initialize a mqtt variable globally
    console.log(mqtt)
</script>

在安装了 Node.js 的环境中，可以通过 npm i mqtt -g 命令的命令行形式全局使用 MQTT.js。

npm i mqtt -g

mqtt help

> MQTT.js command line interface, available commands are:

  * publish     publish a message to the broker
  * subscribe   subscribe for updates from the broker
  * version     the current MQTT.js version
  * help        help about commands

> Launch 'mqtt help [command]' to know more about the commands.

如果使用 webpack，只需像导入任何其他模块一样导入 MQTT.js。

import mqtt from "mqtt";
const client = mqtt.connect("ws://test.mosquitto.org:8080");

如果在使用 webpack v5 构建应用程序时遇到错误，那是因为从 v5 开始，webpack 不再填充 Node.js 核心模块。可以通过将以下内容添加到 webpack 配置来解决此问题：

const NodePolyfillPlugin = require("node-polyfill-webpack-plugin");
module.exports = {
  // Other rules...
  plugins: [new NodePolyfillPlugin()],
};

也可以手动添加缺少的 polyfill：

module.exports = {
  // Other rules...
  resolve: {
    fallback: {
      buffer: require.resolve("buffer/"),
      stream: require.resolve("stream-browserify"),
      process: require.resolve("process/browser"),
      path: require.resolve("path-browserify"),
      fs: false,
    },
  },
};

如果使用 vite 构建项目，只需像导入任何其他模块一样导入 MQTT.js。如果遇到类似 process is not Defined 的错误，可以通过将以下内容添加到 vite 配置来修复它：

export default defineConfig({
  // Other rules...
  define: {
    "process.env": {},
  },
});

或者手动添加相应的 polyfill：

export default defineConfig({
  // Other rules...
  resolve: {
    alias: {
      process: "process/browser",
    },
  },
});

3.2 使用 MQTT.js

下面的代码示例包含 JavaScript 语言的 MQTT.js 连接 EMQX Broker、发送和接收消息的完整代码：

// const mqtt = require('mqtt')
import mqtt from "mqtt";
// 链接选项
const options = {
  clean: true,
  // retain session
  connectTimeout: 4000,
  // Timeout period
  // Authentication information
  clientId: "emqx_test",
  username: "emqx_test",
  password: "emqx_test",
};
// 连接字符串，并通过协议指定连接方式
// ws 未加密的 WebSocket 连接
// wss 加密的 WebSocket 连接
// mqtt 未加密的 TCP 连接
// mqtts 加密 TCP 连接
// wxs微信小程序连接
// alis支付宝小程序连接
const connectUrl = "wss://broker.emqx.io:8084/mqtt";
const client = mqtt.connect(connectUrl, options);

client.on("reconnect", (error) => {
  console.log("reconnecting:", error);
});

client.on("error", (error) => {
  console.log("Connection failed:", error);
});

client.on("message", (topic, message) => {
  console.log("receive message：", topic, message.toString());
});

3.3 微信、阿里小程序支持

MQTT.js 通过使用 wxs 协议支持微信小程序：

const mqtt = require("mqtt");
const client = mqtt.connect("wxs://test.mosquitto.org");

通过使用 alis 协议支持阿里小程序：

const mqtt = require("mqtt");
const client = mqtt.connect("alis://test.mosquitto.org");

本文总结

本文主要和大家介绍 MQTT.js，即 MQTT 协议的客户端库，用 JavaScript 编写，适用于 Node.js 和浏览器环境。相信通过本文的阅读，大家对 MQTT.js 会有一个初步的了解。

因为篇幅有限，文章并没有过多展开，如果有兴趣，可以在我的主页继续阅读，同时文末的参考资料提供了大量优秀文档以供学习。最后，欢迎大家点赞、评论、转发、收藏！

参考资料

https://github.com/mqttjs/MQTT.js

https://aws.amazon.com/cn/what-is/mqtt/

https://psiborg.in/advantages-of-using-mqtt-for-iot-devices/

https://www.npmjs.com/package/mqtt

https://www.emqx.com/en/blog/mqtt-js-tutorial

https://www.emqx.com/en/blog/how-to-use-mqtt-in-nodejs

https://www.emqx.io/docs/en/v5.0/development/python.html

https://iot4beginners.com/what-is-new-in-mqtt-5-features-and-specifications/