本文已获授权，原文发布于微信公众号【轻前端】（ID:gh_ec1c60eb836a），作者：轻前端，原文链接：mp.weixin.qq.com/s/dojoJa3iT…
在某个风和日丽的下午，小轻正在悠闲的享受午后时光（摸鱼）。此时，一个悠悠的声音从背后传来。
“小轻，明天你给咱们小组分享一下 MQTT 协议吧，我看到隔壁组的xx图就是用这个做出来的，反响不错”。
“哎哟，大佬”，小轻缓缓的转动椅子，提起得了腱鞘炎的手微微的撩拨了所剩无几的秀发。
“咱们用 http 不也照样用嘛，啥图需要这什么 tt 啊？”
“咳咳，是 MQTT，小轻，咱隔壁组都已经用上了，你找他们勾兑勾兑，过两天这技术也要在我们组落地哈，辛苦辛苦。”
说罢，大佬头也不回的走了，留下了一个孤独的身影，顺带一个临时的任务，附加在了小轻的身上。
俗话说，“干不死就往死里干”，“活到老，学到老”。
既然隔壁组的哥们要卷，那我们当然也不能郁郁屈居人后啊。
就在转身的瞬间，小轻已经点开了 豆包，输入了“帮我写一篇前端使用 mqtt 的文章，要求有文章，代码...”。
闲话少说，接下来，小轻就先给列位简单的划拉划拉，如有不足之处，还望各位不吝赐教。
什么是 MQTT ？
万事开头难，大佬只说了这几个字母，那不得先搞清楚这玩意是什么。
MQTT（Message Queuing Telemetry Transport）是一种轻量级的发布/订阅模式消息传输协议，专为低带宽、高延迟网络环境设计。
相比WebSocket，MQTT具有以下优势：
💡更小的协议开销（最小2字节头部）
💡服务质量分级（QoS 0/1/2）
💡自动重连机制
💡主题(Topic)层级管理
豆包
嗨，看起来确实是比 HTTP 更好哈，至于 WS 嘛，那还得有待考究 👀。
结合自己的实际业务，小轻发现大佬并不是质疑自己在摸鱼，而是真的想要一些东西，看来是没法愉快的摸鱼了。
现在基本上已经明牌了，想要使用 MQTT，那么就得两头抓，不能简简单单的归结为前端的技术栈了，还得需要后端童鞋一起，让他起一个服务来用。
这也不难，既然隔壁组已经搞定了，那么借来用用，应该不会扣扣搜搜的吧。
经过一番不可描述的沟通后，小轻终于心力交瘁的拿到了一段信息。
url：wss://192.168.0.10:1883/mqtt;
topic：test/qing
隔壁组XX佬
好的，服务已经起来，那么该是小轻大施拳脚了。
安装 MQTT
经过一番DeepSeek，小轻发现，需要先安装如下 npm 包
npm install mqtt --save
或者通过 CDN 引入
<script src="https://unpkg.com/mqtt/dist/mqtt.min.js"></script>
官方示例
const mqtt = require("mqtt");
const client = mqtt.connect("mqtt://test.mosquitto.org");
client.on("connect", () => {
client.subscribe("presence", (err) => {
if (!err) {
client.publish("presence", "Hello mqtt");
}
});
});
client.on("message", (topic, message) => {
// message is Buffer
console.log(message.toString());
client.end();
});
就这？小轻默默的打开了 VS Code，将以上代码使用CV大法，一套动作行云流水，就已经保存成了 mqtt.js。
这不，麻溜的将 url 和 topic 替换掉，这还不是分分钟就完成任务啊。
跟 WebSocket 对比
说了这么久，感觉也没什么新鲜东西啊，感觉跟 WebSocket 差不多啊，那么，小轻给列位简单列个对比，一目了然
| MQTT | Web Socket | |
|---|---|---|
| 协议类型 | 基于TCP的应用层消息协议 | 基于TCP的传输层协议 |
| 通信模式 | 发布/订阅（Pub/Sub）模型 | 全双工双向通信（点对点） |
| 头部开销 | 最小 2 字节 | 2-14 字节（基于掩码和长度） |
| 消息可靠性 | 支持 QoS 0/1/2 等级 | 依赖应用层实现（需自行处理重传） |
| 连接保持 | 心跳机制（默认 60 秒） | 无内置心跳（需手动实现 Ping/Pong） |
| 适用网络 | 高延迟、不稳定网络（如移动网络） | 稳定低延迟网络（如局域网） |
| 浏览器支持 | 需通过 WebSocket 隧道传输 | 原生支持（HTML5 标准） |
如上，如果没有专门针对 Web Socket 的封装，那么使用 mqtt 确实有诸多便利之处，尤其是在局域网的情况下。
尤其是针对图表向的数据展示类页面，无需进行双向通信，甚至是一对多的情况下，那么就可以愉快的使用 mqtt了。
应用场景
说到应用场景，那么就简单的列几个吧，具体的还是要根据业务，自行决定技术是否可用哦。
-
物联网设备通信（低功耗、支持离线消息、QoS 保障）
-
远程设备控制（如智能家居）
-
传感器数据上报（温度、湿度等）
-
-
跨平台消息总线（多主题路由机制解耦生产者和消费者）
-
多端数据同步（App/Web/设备）
-
微服务间异步通信
-
-
弱网络环境（自动重连 + 小数据包优化）
-
移动应用（如物流轨迹更新）
-
卫星通信场景
-
以上，小轻已经简单的了解了 MQTT，那么你呢？
