vue3中使用mqtt数据传输(封装)

使用版本

"mqtt": "^5.8.0",

安装指令

npm install mqtt --save
------
yarn add mqtt

介绍mqtt

参考使用文档

配置

connection: {protocol: "ws",host: "broker.emqx.io",port: 8083,endpoint: "/mqtt",clean: true,connectTimeout: 30 * 1000, // msreconnectPeriod: 4000, // msclientId: "emqx_vue_" + Math.random().toString(16).substring(2, 8),// 随机数 每次不能重复username: "emqx_test",password: "emqx_test",
},

连接

import mqtt from "mqtt";
let client = {}
client = mqtt.connect(url, options)client.on('connect', (e) => {// 订阅主题})

订阅主题

client.subscribe(topic, { qos: 1 }, (err) => {if (!err) {console.log('订阅成功')} else {console.log('消息订阅失败!')}
})

消息发布

给后端发送格式,是和后端约定好的数据格式,一般为JSON传输。

client.publish(publishTopic, `{"messageType":1,"messageContent":""}`, { qos: 0 }, (err) => {if (!err) {console.log('发送成功')client.subscribe(topic, { qos: 1 }, (err) => {if (!err) {console.log('订阅成功')} else {console.log('消息订阅失败!')}})} else {console.log('消息发送失败!')}
})

取消订阅

client.unsubscribe(topicList, (error) => {console.log('主题为' + topicList + '取消订阅成功', error)
})

断开连接

export function unconnect() {client.end()client = null// Message.warning('服务器已断开连接!')console.log('服务器已断开连接!')
}

mqtt封装使用(ts版)

import type { IClientOptions, MqttClient } from 'mqtt';
import mqtt from 'mqtt';interface ClientOptions extends IClientOptions {clientId: string;
}interface SubscribeOptions {topic: string;callback: (topic: string, message: string) => void;subscribeOption?: mqtt.IClientSubscribeOptions;
}interface PublishOptions {topic: string;message: string;
}class Mqtt {private static instance: Mqtt;private client: MqttClient | undefined;private subscribeMembers: Record<string, ((topic: string, message: string) => void) | undefined> = {};private pendingSubscriptions: SubscribeOptions[] = [];private pendingPublications: PublishOptions[] = [];private isConnected: boolean = false;private constructor(url?: string) {if (url) {this.connect(url);}}public static getInstance(url?: string): Mqtt {if (!Mqtt.instance) {Mqtt.instance = new Mqtt(url);} else if (url && !Mqtt.instance.client) {Mqtt.instance.connect(url);}return Mqtt.instance;}private connect(url: string): void {console.log(url, clientOptions);if (!this.client) {this.client = mqtt.connect(url, clientOptions);this.client.on('connect', this.onConnect);this.client.on('reconnect', this.onReconnect);this.client.on('error', this.onError);this.client.on('message', this.onMessage);}}public disconnect(): void {if (this.client) {this.client.end();this.client = undefined;this.subscribeMembers = {};this.isConnected = false;console.log(`服务器已断开连接!`);}}public subscribe({ topic, callback }: SubscribeOptions): void {if (this.isConnected) {this.client?.subscribe(topic, { qos: 1 }, error => {if (error) {console.log(`客户端: ${clientOptions.clientId}, 订阅主题: ${topic}失败: `, error);} else {console.log(`客户端: ${clientOptions.clientId}, 订阅主题: ${topic}成功`);}});this.subscribeMembers[topic] = callback;} else {this.pendingSubscriptions.push({ topic, callback });}}public unsubscribe(topic: string): void {if (!this.client) {return;}this.client.unsubscribe(topic, error => {if (error) {console.log(`客户端: ${clientOptions.clientId}, 取消订阅主题: ${topic}失败: `, error);} else {console.log(`客户端: ${clientOptions.clientId}, 取消订阅主题: ${topic}成功`);}});this.subscribeMembers[topic] = undefined;}public publish({ topic, message }: PublishOptions): void {if (this.isConnected) {this.client?.publish(topic, message, { qos: 1 }, e => {if (e) {console.log(`客户端: ${clientOptions.clientId}, 发送主题为: ${topic} 的消息, 发送失败: `, e);}});} else {this.pendingPublications.push({ topic, message });}}private onConnect = (e: any): void => {console.log(`客户端: ${clientOptions.clientId}, 连接服务器成功:`, e);this.isConnected = true;this.processPendingSubscriptions();this.processPendingPublications();};private onReconnect = (): void => {console.log(`客户端: ${clientOptions.clientId}, 正在重连:`);this.isConnected = false;};private onError = (error: Error): void => {console.log(`客户端: ${clientOptions.clientId}, 连接失败:`, error);this.isConnected = false;};private onMessage = (topic: string, message: Buffer): void => {// console.log(//   `客户端: ${clientOptions.clientId}, 接收到来自主题: ${topic} 的消息: `,//   message.toString(),// );const callback = this.subscribeMembers?.[topic];callback?.(topic, message.toString());};private processPendingSubscriptions(): void {while (this.pendingSubscriptions.length > 0) {const { topic, callback, subscribeOption } = this.pendingSubscriptions.shift()!;this.subscribe({ topic, callback, subscribeOption });}}private processPendingPublications(): void {while (this.pendingPublications.length > 0) {const { topic, message } = this.pendingPublications.shift()!;this.publish({ topic, message });}}
}const clientOptions: ClientOptions = {clean: true,connectTimeout: 500,protocolVersion: 5,rejectUnauthorized: false,username: 'admin',password: 'Anjian-emqx',clientId: `client-${Date.now()}`
};// export default Mqtt.getInstance("ws://192.168.11.14:8083/mqtt");
// export default Mqtt.getInstance("ws://192.168.11.14:8083/mqtt");
// export default Mqtt.getInstance(JSON.parse(import.meta.env.VITE_OTHER_SERVICE_BASE_URL).mqtt);
const { protocol, host } = window.location;
export default Mqtt.getInstance(`${protocol.replace('http', 'ws')}//${host.replace('localhost', '127.0.0.1')}/mqtt/`);

注意:

  1. 环境配置
    .env.test
VITE_OTHER_SERVICE_BASE_URL= `{"mqtt": "ws://192.168.11.14:8083/mqtt"
}`
  1. qos设置 前后端统一为1
    在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系一条长河网进行投诉反馈,一经查实,立即删除!

相关文章

《Baichuan-Omni》论文精读:第1个7B全模态模型 | 能够同时处理文本、图像、视频和音频输入

技术报告Baichuan-Omni Technical ReportGitHub仓库地址 文章目录 论文摘要1. 引言简介2. 训练2.1. 高质量的多模态数据2.2. 多模态对齐预训练2.2.1. 图像-语言分支2.2.2. 视频语音分支2.2.3. 音频语言分支2.2.4. 图像-视频-音频全方位对齐 2.3. 多模态微调监督 3. 实验3.1. 语…

计算机的一些基础知识

文章目录 编程语言 程序 所谓程序&#xff0c;就是 一组指令 以及 这组指令要处理的数据。狭义上来说&#xff0c;程序对我们来说&#xff0c;通常表现为一组文件。 程序 指令 指令要处理的数据。 编程语言发展 机器语言&#xff1a;0、1 二进制构成汇编语言&#xff1a;…

苏州金龙新V系客车创新引领旅游出行未来

10月25日&#xff0c;为期三天的“2024第六届旅游出行大会”在风景秀丽的云南省丽江市落下帷幕。本次大会由中国旅游车船协会主办&#xff0c;全面展示了中国旅游出行行业最新发展动态和发展成就&#xff0c;为旅游行业带来全新发展动力。 在大会期间&#xff0c;备受瞩目的展车…

【重生之我要苦学C语言】深入理解指针4

深入理解指针4 字符指针变量 指针指向字符变量 char ch w; char* p &ch;指针指向字符数组 char arr[10] "abcdef"; char* p arr;printf("%s\n", arr); printf("%s\n", p);结果是一样的 也可以写成&#xff1a; char* p "abc…

Java | Leetcode Java题解之第525题连续数组

题目&#xff1a; 题解&#xff1a; class Solution {public int findMaxLength(int[] nums) {int maxLength 0;Map<Integer, Integer> map new HashMap<Integer, Integer>();int counter 0;map.put(counter, -1);int n nums.length;for (int i 0; i < n;…

Docker部署学习

目录 前言 一、实验环境准备 二、Docker常见命令 三、Docker数据卷 四、Docker自定义镜像 五、Docker网络相关 六、Docker项目部署实践 七、Docker知识追问强化 前言 1. Docker是用以项目上线部署的工具 2. Docker并不会很难&#xff0c;只要你跟着将所有的命令敲一遍…

二叉树和堆

目录 1.二叉树的概念及结构 1.1概念 1.2特殊的二叉树 1.3二叉树的性质 1.4二叉树的存储结构 2.二叉树的顺序结构及实现&#xff08;堆&#xff09; 2.1二叉树的顺序结构 2.2堆的概念及结构 2.3堆的实现 2.3.1堆的插入 2.3.2堆的删除 2.3.3 Heap.h 2.3.4 Heap.c 2.…

linux驱动-输入子系统框架分析

接下来&#xff0c;来分析三个结构体 打开这个文件drivers\input\evdev.c 第一步&#xff1a;要找到它的入口函数evdev_init 看到了&#xff0c;入口的位置注册了一个 input_handler&#xff0c;并且对里面的值完成赋值&#xff0c;和之前学习&#xff0c;我自己注册platform驱…

【sqlmap使用】

sqlmap简介 sqlmap 目录结构 sqlmap常用参数 sqlmap实现注入 测试注入点&#xff0c;检测到注入点后&#xff0c;直接爆数据库名 python sqlmap.py –u http://172.16.12.2/7/9/strsql.php --data "usernameadmin" --dbs注意sqlmap在使用过程中可能会出现几个需要…

Redis为什么用跳表实现有序集合

Redis为什么用跳表实现有序集合 手写一个跳表 为了更好的回答上述问题以及更好的理解和掌握跳表&#xff0c;这里可以通过手写一个简单的跳表的形式来帮助读者理解跳表这个数据结构。 我们都知道有序链表在添加、查询、删除的平均时间复杂都都是 O(n) 即线性增长&#xff0c…

微服务核心——网关路由

目录 前言 一、登录存在的问题归纳 二、*微服务网关整体方案 三、认识微服务网关 四、网关鉴权实现 五、OpenFeign微服务间用户标识信息传递实现 六、微服务网关知识追问巩固 前言 本篇文章具体讲解微服务中网关的实现逻辑、用于解决什么样的问题。其中标题中标注* 涉…

消息中间件类型介绍

ActiveMQ&#xff1a; ActiveMQ可是个老将了&#xff0c;它功能全面、稳定可靠&#xff0c;还支持多种协议和编程语言。如果你需要一个兼容性好、易于集成的消息中间件&#xff0c;ActiveMQ可是个不错的选择。 RabbitMQ&#xff1a; RabbitMQ以其简单易用和高性能著称。它支持丰…

5G在汽车零部件行业的应用

5G技术在汽车零部件行业的应用正在不断深入&#xff0c;为行业的智能化、自动化和高效化转型提供了强大的技术支持。 1、5G技术特点与优势 5G技术具有高速度、低延迟、大连接和切片技术等特点与优势。这些特性为汽车零部件行业提供了稳定、可靠、高效的通信连接&#xff0c;使…

MySQL【二】

查询列 SELECT [ALL | DISTINCT ] * | 列名1[,……列名n] FROM 表名; 查询所有选课学生的学号&#xff0c;结果去除重复值 select distinct sno from sc; 选择行 查询满足条件的数据集 SELECT 字段列表 FROM 表名 WHERE 查询条件 查询不属于数学系或外国语系的学生全部信息 …

【LLM论文日更】LongReward:利用人工智能反馈改进长上下文大语言模型

论文&#xff1a;https://arxiv.org/pdf/2410.21252代码&#xff1a;https://github.com/THUDM/LongReward机构&#xff1a;清华大学 & 中科院 & 智谱领域&#xff1a;长上下文LLM发表&#xff1a;arxiv 研究背景 研究问题&#xff1a;这篇文章要解决的问题是如何在长…

Windows Terminal终端美化

Windows Terminal 1. 下载&#xff1a; 终端&#xff1a; 直接在微软的store中搜索 windows terminal &#xff0c;直接获取即可 美化用到的字体&#xff1a;https://www.nerdfonts.com/font-downloads 这里的随便一个都可以&#xff0c;下载解压后&#xff0c;选中所有ttf文…

Go语言基础语法

一、创建工程 说明&#xff1a; &#xff08;1&#xff09;go.mod文件是go项目依赖管理文件&#xff0c;相当于前端的package.json&#xff0c;也就是Java项目中的Maven的pom.xml。 二、打印数据到控制台 &#xff08;1&#xff09;引入fmt &#xff08;2&#xff09;使用fmt…

【数据结构】二叉树——层序遍历

层序遍历 一、层序遍历二、层序遍历&#xff08;递归&#xff09;三、层序遍历&#xff08;非递归&#xff09;四、总结 一、层序遍历 层序遍历是一种广度优先遍历 以图上二叉树为例&#xff0c;层序遍历就是按照二叉树的深度一层一层进行遍历 遍历顺序&#xff1a; A B C D …

使用DJL和PaddlePaddle的口罩检测详细指南

使用DJL和PaddlePaddle的口罩检测详细指南 完整代码 该项目利用DJL和PaddlePaddle的预训练模型&#xff0c;构建了一个口罩检测应用程序。该应用能够在图片中检测人脸&#xff0c;并将每张人脸分类为“戴口罩”或“未戴口罩”。我们将深入分析代码的每个部分&#xff0c;以便…

Pandas 数据清洗

1.数据清洗定义 数据清洗是对一些没有用的数据进行处理的过程。很多数据集存在数据缺失、数据格式错误、错误数据或重复数据的情况&#xff0c;如果要使数据分析更加准确&#xff0c;就需要对这些没有用的数据进行处理。 2.清洗空值 DataFrame.dropna(axis0, howany, threshN…