vue连接mqtt实现收发消息组件超级详细

在这里插入图片描述
基本概念:

MQTT(Message Queuing Telemetry Transport)是一种基于发布/订阅模式的轻量级消息传输协议,专为低带宽、高延迟或不稳定的网络环境设计。以下是MQTT实现收发消息的基本原理:

  1. 客户端-服务器模型:
    MQTT基于客户端-服务器模型工作。客户端(可以是发布者或订阅者)发起连接请求到服务器(也称为代理Broker),并可以订阅主题、发布消息到主题或从订阅的主题接收消息。
  2. 发布/订阅模式:
    MQTT使用发布/订阅模式进行消息传递。发布者(Publisher)将消息发布到特定的主题(Topic),而订阅者(Subscriber)通过订阅这些主题来接收消息。这种解耦的通信方式使得数据分发变得非常灵活高效。
  3. 消息结构:
    MQTT传输的消息分为两部分:主题(Topic)和负载(Payload)。主题可以理解为消息的类型,而负载是消息的具体内容。订阅者订阅某个主题后,就会收到该主题下的消息内容。
  4. 服务质量(QoS):
    MQTT协议支持三种不同的QoS级别,分别是至多一次(QoS 0)、至少一次(QoS 1)和恰好一次(QoS 2)。这些级别的选择能够保证消息传递的可靠性和效率。例如,QoS 1确保消息至少被传送一次,但可能会导致消息重复;而QoS 2则确保消息只被传送一次,避免了消息的重复或丢失。
  5. 保留消息:
    发布者发布的消息可以被设置为保留消息。当订阅者订阅该主题时,它会接收到最新的保留消息。这确保了订阅者不会错过任何重要的信息,即使在它离线期间也有消息发布。
  6. 遗嘱消息:
    发布者可以设置一个遗嘱消息(Last Will and Testament,LWT)。当发布者意外断开连接时,MQTT代理会自动发布这个遗嘱消息到指定的主题上。这样,即使发布者离线,订阅者也能接收到相关通知。
  7. 会话保持:
    MQTT客户端和代理之间的连接具有会话保持机制。这确保了在网络不稳定或客户端重启的情况下,连接状态和订阅信息能够得到保持,从而保证了消息传递的稳定性和连续性。

综上所述,MQTT通过客户端-服务器模型、发布/订阅模式、主题和负载结构、服务质量选择、保留消息、遗嘱消息以及会话保持等机制实现了高效可靠的消息收发功能。这些特性使得MQTT在物联网(IoT)领域得到了广泛应用,如智能家居、工业自动化等场景。

组件封装(mqttComp.vue)

@vue/cli-plugin-babel 版本<5 —> npm i mqtt@4.3.7 --save
@vue/cli-plugin-babel 版本>=5 —> npm i mqtt@5.6.2 --save
注意: 在mqtt4.x版本的时候,请求路径后面的"/mqtt"是直接在 brokerUrl中配置,即本文的(tailPath)
但是在mqtt5+版本的时候,请求路径后面的"/mqtt"是在opts中配置的,即本文的(mqttOpts.path)
请根据你的版本选择对应的拼接方式

<!--* @Description: mqtt连接和消息发送组件 页面* @Author: mhf* @Date: 2024-05-25 00:49:23* @params:
-->
<template><div></div>
</template><script>
import mqtt from "mqtt";export default {name: "mqttComp",props: {topic: String, // 订阅主题mqttUrl: {type: Object,default: () => {return {head: "ws", // 必须是 ws 或 wss (mqtt:// 或 mqtts:// 必须让后端开放websocket服务)host: "xx.xxx.xx.xxx", // ip地址port: 8083, // 服务端口tailPath: "mqtt", // 服务路径};},}, // 服务地址mqttOpts: {type: Object,default: () => {return {keepalive: 60,clientId: "clientId-" + Math.random().toString(16).substr(2, 8),username: "username",password: "password",connectTimeout: 10 * 1000,path: "/mqtt"};},}, // 连接配置},data() {return {client: "",clientCount: 0,receivedMessage: null, // 用于存储接收到的消息};},watch: {topic(newTopic) {if (newTopic && this.client) {this.client.unsubscribe(this.topic);this.client.subscribe(newTopic);}},},methods: {async initMqtt() {let opts = JSON.parse(JSON.stringify(this.mqttOpts));this.client = mqtt.connect(`${this.mqttUrl.head}://${this.mqttUrl.host}:${this.mqttUrl.port}/${this.mqttUrl.tailPath}`,opts);this.client.on("connect", this.handleConnect);this.client.on("message", this.handleMessage);this.client.on("reconnect", this.handleReconnect);this.client.on("error", this.handleError);},handleConnect() {console.log("mqtt_连接成功");this.client.subscribe(this.topic);},handleMessage(topic, message) {this.receivedMessage = JSON.parse(message?.toString() || {});this.$emit("message-received", this.receivedMessage);},handleReconnect(error) {console.log(`正在第${this.clientCount}重连`, error);this.clientCount++;if (this.clientCount >= 10) {this.client.end();}},handleError(error) {console.log("连接失败", error);},/*** MQTT实现发送消息* @param: topic: 主题* @param: message: 消息体* @author: mhf* @time: 2024-05-24 14:26:51**/mqttPublish(topic, message) {this.client.publish(topic, JSON.stringify(message));},},async mounted() {await this.initMqtt();},beforeDestroy() {this.client.end();},
};
</script><style lang="scss" scoped></style>

组件使用

<template><div><mqttComp ref="mqttComp" :mqttUrl="mqttUrl" :mqttOpts="mqttOpts" :topic="parentTopic" @message-received="getMqttMessage"/><el-button @click="sendMqttMessage">发送MQTT消息</el-button></div>
</template><script>
import mqttComp from "./mqttComp.vue";export default {components: {mqttComp,},data() {return {parentTopic: "aaa",mqttUrl: {}, // todo 填写你的配置信息mqttOpts: {}, // todo 填写你的配置信息};},methods: {getMqttMessage(receivedMessage) {console.log("mqtt接收到的消息是:", receivedMessage);},sendMqttMessage() {this.$refs.mqttComp.mqttPublish("parentTopic", "来自父组件的消息");},},
};
</script>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/14784.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

快速排序详解——多种实现方式

快速排序 快速排序是一种交换排序&#xff0c;是基于二叉树结构的交换排序方法&#xff0c;基本思想如下&#xff1a; 任取待排序元素序列中的某元素作为基准值&#xff0c;按照该排序码将待排序集合分割成两子序列&#xff0c;左子序列中所有元素均小于基准值&#xff0c;右子…

亚信安慧AntDB:可靠的数据处理和存储工具

AntDB数据库具有高性能、高可用性和高扩展性等诸多优点&#xff0c;能够高效应对庞大数据存储和处理需求&#xff0c;同时保障数据的安全和稳定。不论是企业级业务系统还是政府信息管理平台&#xff0c;AntDB都能够轻松胜任&#xff0c;展现出其强大的适应能力和可靠性。 其强…

数据量较小的表是否有必要添加索引问题分析

目录 前言一、分析前准备1.1、准备测试表和数据1.2、插入测试数据1.3、测试环境说明 二、具体业务分析2.1、单次查询耗时分析2.2、无索引并发查询服务器CPU占用率分析2.3、添加索引并发查询服务器CPU占用率分析 三、总结 前言 在一次节日活动我们系统访问量到达了平时的两倍&am…

【小沐学GIS】GDAL库安装和使用(C++、Python)

文章目录 1、简介2、下载和编译&#xff08;C&#xff09;2.1 二进制构建2.1.1 Conda2.1.2 Vcpkg 2.2 源代码构建2.2.1 nmake.opt方式构建2.2.2 generate_vcxproj.bat方式构建 2.3 命令行测试2.3.1 获取S57海图数据 2.4 代码测试2.4.1 读取tiff信息 3、Python3.1 安装3.2 测试3…

零基础入门篇④ 初识Python(注释、编码规范、关键字...)

Python从入门到精通系列专栏面向零基础以及需要进阶的读者倾心打造,9.9元订阅即可享受付费专栏权益,一个专栏带你吃透Python,专栏分为零基础入门篇、模块篇、网络爬虫篇、Web开发篇、办公自动化篇、数据分析篇…学习不断,持续更新,火热订阅中🔥专栏订阅地址 👉Python从…

C语言:通讯录管理系统的实现

如何来实现通信录呢&#xff1f; 人的信息包括&#xff1a;名字年龄性别电话地址&#xff0c;等来表示 想要实现的功能&#xff1a; 1、默认存放100个人的信息 2、增加联系人信息 3、删除指定联系人信息 4、查找联系人信息 5、修改联系人信息 6、对联系人信息排序 7、显示联系人…

C语言 | Leetcode C语言题解之第110题平衡二叉树

题目&#xff1a; 题解&#xff1a; int height(struct TreeNode* root) {if (root NULL) {return 0;}int leftHeight height(root->left);int rightHeight height(root->right);if (leftHeight -1 || rightHeight -1 || fabs(leftHeight - rightHeight) > 1) {…

Fortran: select type

Fortran: select type 实现类似C的template函数功能 module M_reduceuse mpi_f08interface reducemodule procedure reduce_scalar,reduce_arrayend interface reducecontains!!https://docs.open-mpi.org/en/v5.0.x/man-openmpi/man3/MPI_Reduce.3.htmlsubroutine reduce_ar…

Android硬件渲染环境初始化

Android硬件渲染环境初始化 一.硬件加速渲染的开启1.ThreadedRenderer的初始化2.RenderProxy的创建 二.RenderProxy中组件的初始化1.RenderThread的创建2.CanvasContext的创建3.DrawFrameTask的初始化 三.RenderThread的启动1.RenderThread中组件的初始化2.RenderThread中任务的…

arXiv AI 综述列表(2024.05.20~2024.05.24)

公众号&#xff1a;EDPJ&#xff08;进 Q 交流群&#xff1a;922230617 或加 VX&#xff1a;CV_EDPJ 进 V 交流群&#xff09; 每周末更新&#xff0c;完整版进群获取。 Q 群在群文件&#xff0c;VX 群每周末更新。 目录 1. Beyond Traditional Single Object Tracking: A …

基于yolov2深度学习网络的昆虫检测算法matlab仿真,并输出昆虫数量和大小判决

目录 1.算法运行效果图预览 2.算法运行软件版本 3.部分核心程序 4.算法理论概述 5.算法完整程序工程 1.算法运行效果图预览 2.算法运行软件版本 matlab2022A 3.部分核心程序 .......................................................... for i 1:12 % 遍历结…

播兔短剧模板:图鸟UI在前端短剧平台中的应用与实践

一、引言 随着移动互联网的快速发展&#xff0c;短剧平台因其短小精悍、内容丰富的特点&#xff0c;逐渐成为用户休闲娱乐的新宠。为了满足短剧平台对前端技术的需求&#xff0c;图鸟播兔短剧模板应运而生。该模板基于图鸟UI进行开发&#xff0c;采用纯前端技术&#xff0c;支…

layui-左侧递归菜单-js实现

完整代码 两种下拉风格 <!DOCTYPE html> <html lang"en"><head><meta charset"utf-8" /><meta name"viewport" content"widthdevice-width, initial-scale1.0" /><title>Document</title>…

【C语言回顾】文件操作

前言1. 文件打开模式2. 示例代码2.1 打开和关闭文件2.2 读写文件2.3 二进制文件操作 结语 #include<GUIQU.h> int main { 上期回顾: 【C语言回顾】动态内存管理 个人主页&#xff1a;C_GUIQU 专栏&#xff1a;【C语言学习】 return 一键三连; } 前言 各位小伙伴大家好&…

美国空军出版物:网络空间作战

这份文件是《AIR FORCE DOCTRINE PUBLICATION 3-12: CYBERSPACE OPERATIONS》&#xff0c;即美国空军教义出版物3-12&#xff0c;关于网络空间作战。 该文件详细阐述了美国空军在网络空间领域的组织、规划、执行、评估以及相关的政策、角色和责任。 以下是其核心内容的概述&a…

搜索引擎索引是什么

搜索引擎索引是搜索引擎中的关键组件&#xff0c;用于存储和管理网页、文档、图片等信息&#xff0c;并提供快速的检索功能。索引包括索引基础、单词词典、倒排列表、建立索引、动态索引、索引更新策略、查询处理、多字段索引、短语查询和分布式索引。 索引基础&#xff1a;索…

特定情况下docker run --restart=always重启失效的情况

特定情况下解决cicd中docker run --restartalways重启失效的情况_c 执行exit后 restartalways失效-CSDN博客

分享:怎么才能保证大数据查询的准确性?

随着大数据应用到金融风控领域&#xff0c;大数据越来越重要了&#xff0c;很多朋友在查大数据的时候都会遇到一个问题&#xff0c;那就是自己查询的大数据什么信息都没有&#xff0c;要么就是很少&#xff0c;这是什么原因呢?要怎么才能保证大数据查询的准确性呢?下面小编就…

给JTextArea添加右键菜单

给JTextArea添加右键菜单 package jTextarea;import java.awt.event.ActionEvent; import java.awt.event.ActionListener; import java.awt.event.MouseAdapter; import java.awt.event.MouseEvent;import javax.swing.JMenuItem; import javax.swing.JPopupMenu; import jav…

Java进阶学习笔记3——static修饰成员方法

成员方法的分类&#xff1a; 类方法&#xff1a;有static修饰的成员方法&#xff0c;属于类&#xff1a; 成员方法&#xff1a;无static修饰的成员方法&#xff0c;属于对象。 Student类&#xff1a; package cn.ensource.d2_staticmethod;public class Student {double scor…