前文

今天接到一个领导的需求，当后台管理平台向某个模块推送新的消息时，前端要实现无感刷新出这条消息，并且展现在对应模块，今天我们使用一段伪代码，复刻一下怎么实现的该功能。

一、使用什么技术？MQTT

（1）什么是MQTT?

MQTT（Message Queuing Telemetry Transport）是一种轻量级的、基于发布/订阅模式的通信协议，通常用于连接物联网设备和应用程序之间的通信。它最初由IBM开发，现在由OASIS（Organization for the Advancement of Structured Information Standards）进行标准化。

MQTT的工作原理很简单：它采用发布/订阅模式，其中设备（称为客户端）可以发布消息到特定的主题（topics），而其他设备可以订阅这些主题以接收消息。这种模式使得通信非常灵活，因为发送者和接收者之间的耦合度很低。MQTT还支持负载消息（payload message）的传输，这意味着可以发送各种类型的数据，如传感器读数、控制指令等。

MQTT的轻量级设计使其在网络带宽和资源受限的环境中表现出色，因此在物联网应用中得到了广泛应用。它可以在低带宽、不稳定的网络环境下可靠地运行，同时保持较低的能耗。MQTT也有许多开源实现和客户端库，使得它在各种平台上都能方便地使用。

（2）什么是发布订阅模式? 发布/订阅模式是一种消息传递范式，其中消息的发送者（发布者）和接收者（订阅者）之间是解耦的。在这种模式下，发布者将消息发送到一个特定的主题（topic），而订阅者则通过订阅这些主题来接收消息。

具体来说，发布者将消息发布到一个或多个主题，而订阅者则订阅一个或多个主题。当发布者发布消息到某个主题时，所有订阅了该主题的订阅者都会收到这条消息。这种模式使得消息的发送者和接收者之间没有直接的依赖关系，从而实现了松耦合的通信方式。

发布/订阅模式常用于分布式系统中，特别是在需要大规模消息传递的情况下，比如物联网应用、实时数据处理等。它提供了一种灵活、可扩展的方式来实现异步通信，同时允许多个订阅者同时接收相同的消息，从而满足了各种实时通信的需求。

（3）优点是什么？

轻量级和低带宽消耗： MQTT设计简单，协议头部小，有效地减少了网络带宽的使用，适合在带宽有限的网络环境中使用，尤其是在物联网设备和传感器等资源受限的场景下。
异步通信： MQTT采用发布/订阅模式，实现了异步通信，发布者和订阅者之间解耦合，无需即时连接，消息的发送和接收是异步的，这种设计提供了更灵活的通信方式。
可靠性： MQTT支持消息传输的可靠性。它提供了QoS（Quality of Service）级别，包括至多一次、至少一次和只有一次，以满足不同应用场景的需求。通过这些QoS级别，可以确保消息能够按照要求进行传输和接收。
容易实现和部署： MQTT具有简单的设计和实现，有许多开源的实现和客户端库可供选择，可以方便地在各种平台和编程语言中使用。这使得MQTT在物联网应用中广泛应用，并且容易部署和集成到现有系统中。
支持持久会话和遗嘱消息： MQTT支持客户端会话保持，即客户端断开连接后可以保持会话状态，同时支持遗嘱消息，即客户端异常断开连接时可以发送遗嘱消息给其他客户端。

基于这些优点，可以满足我们的需要。

二、MQTT在项目的运用

（1）安装MQTT

css 复制代码

npm i mqtt@5.5.2

（2）项目Vite和Vue版本

json 复制代码

"vue": "^3.4.21"
"vite": "^5.2.0"

（3）引入MQTT文件

python 复制代码

import mqtt from "mqtt"; // import namespace "mqtt"
import { onMounted } from 'vue'

（4）MQTT的具体使用

xml 复制代码

<script setup>
import HelloWorld from "./components/HelloWorld.vue";
import mqtt from "mqtt"; // import namespace "mqtt"
import { onMounted } from "vue";

onMounted(() => {
  // 建立连接
  // 注意此出的网址开头要使用ws:而不是tcp:
  let client = mqtt.connect("ws://192.168.1.131:8083/mqtt", {
    username: "admin",  // 用户名字
    password: "3Ha86294",  // 密码
  });
  // 订阅主题
  client.subscribe("test1", (topic) => {
    console.log(topic);  // 此处打印出订阅的主题名称
  });
  
  // 推送消息
  client.publish("test2", JSON.stringify({one: '1', two: '2'})); 

  //接受消息
  client.on("message", (topic, data) => {
    // 这里有可能拿到的数据格式是Uint8Array格式，所以可以直接用toString转成字符串
    // let dataArr = JSON.parse(data.toString());
    console.log(data);
  });

  // 重连
  client.on("reconnect", (error) => {
    console.log("正在重连:", error);
  });

  // 错误回调
  client.on("error", (error) => {
    console.log("MQTT连接已关闭");
  });
});
</script>

<template>
  <div></div>
</template>

前端实习：Vue3实现mqtt的订阅与发布（极简版）

前文

一、使用什么技术？MQTT

二、MQTT在项目的运用