Vue3连接MQTT作为客户端
先下载依赖
npx --yes --registry https://registry.npmmirror.com npm install mqtt
在src的api创建 mes.js
// 导入axios
import axios from 'axios';// 定义一个变量,记录公共的前缀, baseURL
const baseURL = 'http://localhost:8080';
const instance = axios.create({ baseURL });// 添加响应拦截器
instance.interceptors.response.use((response) => {return response.data; // 直接返回响应的数据部分},(error) => {alert('服务异常');return Promise.reject(error); // 异步的状态转化成失败的状态}
);// 定义 meslist 函数,使用定制的 Axios 实例发送请求
export const meslist = async (topic) => {try {const response = await instance.get('/getmes', {params: {topic: topic}});return response; // 返回整个响应对象,因为拦截器已经提取了 data 部分} catch (error) {console.error('API 请求失败:', error);throw error;}
};export default instance;
创建一个vue文件,然后填自己的ip,如果设置了用户名密码也填上
<script setup>
import { ref, onMounted, onUnmounted, watch } from 'vue';
import { ElMessage, ElButton, ElInput, ElTable, ElTableColumn } from 'element-plus';
import mqtt from 'mqtt'; // 导入 mqtt,默认导出的是客户端工厂函数
import { meslist } from '@/api/mes'; // 引入 meslist API// 响应式变量
const SelectTopic = ref(''); // 可以动态修改的选择项(如输入框内容)
const results = ref([]); // 用来存储搜索结果
const loading = ref(false); // 用于控制加载状态
const error = ref(null); // 用于显示错误信息给用户
let client;// 搜索函数
const search = async () => {if (!SelectTopic.value.trim()) {ElMessage.warning("请输入有效的搜索内容");return;}loading.value = true; // 开始加载error.value = null; // 清除之前的错误信息try {const response = await meslist(SelectTopic.value);console.log('API Response:', response); // 输出原始响应以便调试// 如果是数组,则按照新逻辑处理if (Array.isArray(response)) {if (response.length > 0) {results.value = response;console.log('搜索成功:', results.value);} else {ElMessage.info('未找到相关结果');results.value = [];}} // 如果都不是,则抛出异常else {throw new Error('API 返回的数据格式不正确');}} catch (err) {// 更详细的错误信息记录console.error('搜索失败:', err);ElMessage.error('搜索失败,请稍后重试或检查网络连接');results.value = [];} finally {loading.value = false; // 搜索完成,结束加载状态}
};// MQTT 连接配置
const connectMqtt = () => {const brokerUrl = 'ws://ip/mqtt'; // 使用提供的主机名、端口和路径const clientId = 'emqx_MTgwND'; // 客户端 IDconst options = {username: 'web', // 替换为实际的用户名~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~password: '123', // 替换为实际的密码~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~keepalive: 60, // Keepalive 时间clean: true, // Clean StartsessionExpiryInterval: 0, // 会话过期时间protocolVersion: 5, // 协议版本 MQTT 5};client = mqtt.connect(brokerUrl, options);client.on('connect', () => {console.log('Connected to MQTT broker');if (SelectTopic.value.trim()) {client.subscribe(SelectTopic.value, (err) => {if (err) {console.error('Failed to subscribe:', err);} else {console.log('Subscribed to topic:', SelectTopic.value);}});}});client.on('message', (topic, message) => {console.log('Received message:', topic, message.toString()); // 调试信息try {const msg = JSON.parse(message.toString());// 更新结果列表results.value = [...results.value, {id: msg.id || 0,topic: topic,payload: msg.payload || message.toString(),qos: msg.qos || 0,timestamp: new Date().toLocaleString()}];} catch (e) {console.error('Failed to parse message:', e);// 如果解析失败,直接将原始消息作为字符串处理results.value = [...results.value, {id: -1,topic: topic,payload: message.toString(),qos: 0,timestamp: new Date().toLocaleString()}];}});client.on('error', (err) => {console.error('MQTT connection error:', err);});client.on('close', () => {console.log('MQTT connection closed');});
};// 断开 MQTT 连接
const disconnectMqtt = () => {if (client) {client.end();client = null;}
};// 监听 SelectTopic 的变化
watch(SelectTopic, (newVal) => {if (newVal.trim()) {disconnectMqtt();connectMqtt();} else {disconnectMqtt();}
});// 在组件挂载时启动 MQTT 连接
onMounted(() => {if (SelectTopic.value.trim()) {connectMqtt();}
});// 在组件卸载时断开 MQTT 连接
onUnmounted(() => {disconnectMqtt();
});
</script><template><div class="container"><h1 class="title">历史数据查看</h1><div class="input-container"><el-inputv-model="SelectTopic"placeholder="请输入搜索内容"size="large"clearableclass="input-box"/></div><div class="button-container"><el-buttontype="primary"@click="search":loading="loading"class="search-button">{{ loading ? "加载中..." : "搜索" }}</el-button></div><!-- 搜索结果表格 --><el-table v-if="results.length > 0" :data="results" style="width: 100%" border><el-table-column prop="id" label="ID" width="100"></el-table-column><el-table-column prop="qos" label="QoS" width="100"></el-table-column><el-table-column prop="payload" label="Payload"></el-table-column><el-table-column prop="timestamp" label="Timestamp" width="200"><template #default="scope">{{ scope.row.timestamp }}</template></el-table-column></el-table><!-- 如果没有数据或错误时的提示 --><div v-else-if="!loading && SelectTopic.trim()"><p class="error-message">{{ error || '没有找到相关结果' }}</p></div><div v-else-if="!loading"><p class="placeholder-message">请输入搜索内容</p></div></div>
</template><style scoped>
/* 设置容器样式 */
.container {padding: 40px;max-width: 1000px;margin: 0 auto;background-color: #f7f7f7;border-radius: 8px;box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}/* 标题样式 */
.title {font-size: 28px;font-weight: bold;color: #333;text-align: center;margin-bottom: 30px;
}/* 输入框容器样式 */
.input-container {display: flex;justify-content: center;margin-bottom: 20px;
}/* 输入框样式 */
.input-box {width: 50%;font-size: 16px;
}/* 按钮容器样式 */
.button-container {display: flex;justify-content: center;margin-bottom: 20px;
}/* 按钮样式 */
.search-button {width: 200px;height: 40px;font-size: 16px;
}/* 错误消息样式 */
.error-message {color: red;text-align: center;font-size: 16px;
}/* 占位符消息样式 */
.placeholder-message {text-align: center;font-size: 16px;color: #888;
}
</style>
在输入框输入,就可以订阅相应的主题了,然后其他客户端发送此主题的内容,就可以订阅接收到了。因为我的代码里面还有给后端发请求的部分,所以相关后端接口需要你们自己完成或者把这部分的代码删掉。
相关文章:
Vue3连接MQTT作为客户端
先下载依赖 npx --yes --registry https://registry.npmmirror.com npm install mqtt 在src的api创建 mes.js // 导入axios import axios from axios;// 定义一个变量,记录公共的前缀, baseURL const baseURL http://localhost:8080; const instance axios.create({ base…...
VLC快速制作rtsp流媒体服务器
1.安装vlc media player工具 2.打开后点击菜单 媒体->流 3.添加mp4视频,选择串流 4.选择 下一个 5.新目标选择 RTSP,点击添加按钮 6.端口和路径随便填写,如果推流失败就换个端口。一路操作下去 7.点击 流 按钮后,就可以看到下图…...
24FIC
一,赛前准备 检材密码:2024Fic杭州Powered~by~HL! 案情简介: 2024年4月,卢某报案至警方,声称自己疑似遭受了“杀猪盘”诈骗,大量钱财被骗走。卢某透露,在与某公司交流过程中结识了员工李某。李某…...
P3367 【模板】并查集
题目链接:点击进入 题目 思路 代码(路径压缩) #include <bits/stdc.h> using namespace std; const int maxn 1e6 10;int n,m,fa[maxn];int find(int x) {if(xfa[x]) return x;else return fa[x]find(fa[x]); }int unions(int x,…...
【leetcode hot 100 300】最长递增子序列
错误解法:在每次更新db[i]时,如果当前nums[i]>nums[i-1]就db[i-1]1,否则db[i-1] class Solution {public int lengthOfLIS(int[] nums) {int n nums.length;int[] db new int[n]; // db[i]表示到i的最长严格递增子序列的长度db[0] 1;f…...
jwt.io学习
jwt.io 是一个专门用于 JSON Web Token(JWT)相关操作和学习的网站,地址是:JSON Web Tokens - jwt.io具有以下主要功能: JWT 解码:能够将 JWT 令牌进行解码,展示出令牌中包含的各个部分…...
MySQL 优化方案大全
一、数据库设计优化 1. 表结构设计 合理选择字段类型: 使用最小满足需求的类型(如TINYINT代替INT)字符串类型优先VARCHAR,固定长度用CHAR 时间类型用TIMESTAMP(4字节)或DATETIME(8字节…...
题目 2701: 蓝桥杯2022年第十三届决赛真题-取模(C/C++/Java组)
题目 2701: 蓝桥杯2022年第十三届决赛真题-取模(C/C/Java组) 时间限制: 3s 内存限制: 512MB 提交: 6633 解决: 1263 题目描述 给定 n, m ,问是否存在两个不同的数 x, y 使得 1 ≤ x < y ≤ m 且 n mod x n mod y 。 输入格式 输入包含多…...
【LeetCode 题解】算法:36.有效的数独
一、问题剖析 在算法领域中,数独问题是一个经典且有趣的逻辑验证题目。本题的核心任务是判断一个给定的 9x9 数独是否有效。判断的依据是数独的基本规则:数字 1-9 在每一行、每一列以及每一个 3x3 的宫内都只能出现一次。同时,题目中明确指出…...
C++学习之MYSQL数据库
目录 1.mysql数据库介绍 2.mysql数据库安装 3.mysql数据库启动和登录 4.mysql数据库CURD 5.mysql数据库表CURD 6.mysql数据库数据CURD 7.mysql基础综合练习 8.mysql数据库总日期和时间函数 9.mysql中函数 10.PLSQL工具使用介绍 11.ORACLE实例别名和ORACLE客户端 12.…...
Node.js 开发的简单 Web 服务器代码
步骤 1:创建项目文件 新建名为 app.js 的文件,添加以下代码: // 1. 导入内置 http 模块 const http require(http);// 2. 创建服务器实例 const server http.createServer((req, res) > {// 设置响应头res.writeHead(200, { Content-T…...
Postgresql安装mysql_fdw并映射MySQL数据库
关于Postgresql映射Mysql数据库数据 领导:小汪啊,他们的数据库是不是能连接上了。 我:对啊,我已经读数据了。 领导:那改一下吧,直接把他们的数据映射过来,体现一下我们功能的多样性。 我&#…...
flutter 获取通话记录和通讯录
Dart SDK version is 3.7.01 dependencies:flutter:sdk: flutterpermission_handler: ^11.0.1 # 权限管理flutter_contacts: ^1.1.92call_log: ^5.0.5cupertino_icons: ^1.0.8dev_dependencies:flutter_test:sdk: flutterflutter_lints: ^5.0.0 2 contact_and_calls_page.da…...
AICon 2024年全球人工智能与大模型开发与应用大会(脱敏)PPT汇总(36份).zip
AICon 2024年全球人工智能与大模型开发与应用大会(脱敏)PPT汇总(36份).zip 1、面向开放域的大模型智能体.pdf 2、企业一站式 AI 智能体构建平台演进实践.pdf 3、PPIO 模型平台出海实战,跨地域业务扩展中的技术优化之道…...
swift菜鸟教程6-10(运算符,条件,循环,字符串,字符)
一个朴实无华的目录 今日学习内容:1.Swift 运算符算术运算符比较运算符逻辑运算符位运算符赋值运算区间运算符其他运算符 2.Swift 条件语句3.Swift 循环4.Swift 字符串字符串属性 isEmpty字符串常量let 变量var字符串中插入值字符串连接字符串长度 String.count使用…...
【14】RUST高级特性
文章目录 不安全操作裸指针应用 不安全函数or方法extern调用外部函数调用C语言函数创建供C调用的接口 全局变量(静态变量)不安全的trait访问联合体中的字段 不安全操作 裸指针 需要程序员保证有效性 从引用创建 let mut num 5; let r1 &num as …...
Linux 系统中 `echo`、`cat`、`tail`、`grep` 四个常用命令介绍
以下是 Linux 系统中 echo、cat、tail、grep 四个常用命令的详细介绍,涵盖其功能、常用选项及实际示例: 1. echo - 输出文本 作用:将文本或变量的值输出到终端或文件。常用于脚本中的信息提示或日志记录。 常用选项: 选项说明-…...
Python 根据多个下标向列表中插入对应的值的巧妙方法:逆序插入
例如根据多个下标(比如2, 5, 8)向列表中插入对应的值,即: 在位置2插入一个值A,在位置5插入一个值B,在位置8插入一个值C, 而且每次插入都会改变列表长度,所以后续位置也会发生偏移。…...
“实时滚动”插件:一个简单的基于vue.js的无缝滚动
1、参考连接: 安装 | vue-seamless-scroll 2、使用步骤: 第一步:安装 yarn add vue-seamless-scroll 第二步:引入 import vueSeamlessScroll from vue-seamless-scroll/src 第三步:注册 components: { vueSeamless…...
【Vue3 + Element-Plus】TreeTransfer树形穿梭框组件
基于 Element Plus 实现高效树形穿梭框组件 组件概述 本组件实现了一个基于 Element Plus 的双树形结构穿梭框,支持以下核心功能: 树形结构数据展示节点多选与批量转移展开状态记忆双向数据同步节点禁用与过滤全选/全不选功能(待完善&#…...
014_多线程
多线程 多线程创建线程方式一:继承Thread类方式二:实现Runable接口方式三:实现Callbale接口 Thread的常用方法线程安全线程同步方式一:同步代码块同步方法方式三:Lock锁 线性池创建线程池处理Runnable任务处理Callable…...
vue自定义颜色选择器
vue自定义颜色选择器 效果图: step0: 默认写法 调用系统自带的颜色选择器 <input type"color">step1:C:\Users\wangrusheng\PycharmProjects\untitled18\src\views\Home.vue <template><div class"container"><!-- 颜…...
(十五)安卓开发中不同类型的view之间继承关系详解
在安卓开发中,View 是所有 UI 组件的基类,不同类别的 View 通过继承关系扩展和特化功能,以满足多样化的界面需求。以下将详细讲解常见 View 类别的继承关系,并结合代码示例和使用场景进行说明。 1. View 继承关系: java.lang.Obj…...
Linux 入门七:从基础到进阶的文件操作
一、Linux 文件系统基础:一切皆文件的哲学 在 Linux 的世界里,“一切皆文件” 是核心设计哲学。无论是普通文件、目录、设备(如硬盘、串口),还是网络套接字,都被抽象为文件模型,通过统一的接口…...
DeepSeek的神经元革命:穿透搜索引擎算法的下一代内容基建
DeepSeek的神经元革命:穿透搜索引擎算法的下一代内容基建 ——从语义网络到价值共识的范式重构 一、搜索引擎的“内容饥渴症”与AI的基建使命 2024年Q1数据显示,百度索引网页总数突破3500亿,但用户点击集中在0.78%的高价值页面。这种“数据…...
【时时三省】(C语言基础)用switch语句实现多分支选择结构 例题
山不在高,有仙则名。水不在深,有龙则灵。 ----CSDN 时时三省 例题: 用switch语句处理菜单命令。在许多应用程序中,用菜单对流程进行控制,例如从键盘输入一个 A 或 a 字符,就会执行A操作,输入一…...
CMake macro
CMake中的macro主要用于在调用处直接展开代码,类似于文本替换,其作用类似于C语言的#define宏,但具备更复杂的结构。以下是详细分析: 1. macro的作用 代码展开:调用宏时,其内容会原地展开,如同…...
高防服务器防御DDoS全解析——从架构设计到实战对抗
本文系统阐述高防服务器对抗DDoS攻击的技术原理与实施路径,深度剖析BGP线路、流量清洗、协议栈优化等关键技术,结合2024年最新攻击案例与Gartner防御框架,提供企业级防御体系构建指南,涵盖硬件选型、策略配置、合规审计等全生命周…...
高防IP如何构筑DDoS防线?_解析抗攻击核心技术体系
本文深度解析高防IP防御DDoS攻击的技术实现路径,涵盖流量清洗机制、智能调度策略、混合防护架构三大核心技术体系。通过2023年某金融平台800Gbps混合攻击实战案例,结合Gartner最新防护成熟度模型,给出高防IP部署的六步实施框架与成本优化方案…...
RDD行动算子和累加器
RDD行动算子: 是能触发真正计算数据的算子 reduce:聚集RDD元素 collect:返回数据集所有元素 foreach:分布式遍历元素 count:返回元素个数: first:返回首个元素 take:返回前n个元素 takeOrdered:返回排序后的前n个元素 aggregate:分区和分区间数据聚合 fol…...
【计算机网络】同步操作 vs 异步操作:核心区别与实战场景解析
📌 引言 在网络通信和分布式系统中,**同步(Synchronous)和异步(Asynchronous)**是两种基础却易混淆的操作模式。本文将通过代码示例、生活类比和对比表格,帮你彻底理解它们的区别与应用场景。 1…...
iframe学习与应用场景指南
一、iframe核心原理与学习路径 1. 嵌套网站的本质原理 技术特性: • 浏览器为每个iframe创建独立的window对象和DOM环境 • 资源独立加载:子页面拥有自己的CSS/JS/Cookie作用域 • 跨域限制:同源策略下无法直接访问DOM(需CORS或…...
基于SSM的线上花店鲜花销售商城网站系统
作者:计算机学姐 开发技术:SpringBoot、SSM、Vue、MySQL、JSP、ElementUI、Python、小程序等,“文末源码”。 专栏推荐:前后端分离项目源码、SpringBoot项目源码、Vue项目源码、SSM项目源码、微信小程序源码 精品专栏:…...
【大模型理论篇】Search-R1: 通过强化学习训练LLM推理与利⽤搜索引擎
最近基于强化学习框架来实现大模型在推理和检索能力增强的项目很多,也是Deep Research技术持续演进的缩影。之前我们讨论过《R1-Searcher:通过强化学习激励llm的搜索能⼒》,今天我们分析下Search-R1【1】。 1. 研究背景与问题 ⼤模型(LLM&a…...
错误码code:9568282 error: install releaseType target not same怎么处理?
目录 1.背景 2.解决方案 1.背景 当前是由于应用从4.1版本升级到5.0版本,然后安装应用会报错9568282 ,如果签名是一致的&#...
qt联动其他库实现一个客户端(本章主要是概述如何实现)
一.服务器功能 1.能连接多个客户端通信 2.负责统计与手机客户端的数据 3.遇到客户端请求数据时能检索数据库并发送对应数据 4.服务器需要能连接到公网 5.服务器需要有账号密码登录功能 6.服务器要有日志与管理员系统能统计信息 二.客户端 1.客户端需要有登录界面 2.客户端需要…...
爱普生FC1610AN5G手机中替代传统晶振的理想之选
在 5G 技术引领的通信新时代,手机性能面临前所未有的挑战与机遇。从高速数据传输到多任务高效处理,从长时间续航到紧凑轻薄设计,每一项提升都离不开内部精密组件的协同优化。晶振,作为为手机各系统提供稳定时钟信号的关键元件&…...
SpringMVC基础二(RestFul、接收数据、视图跳转)
ReauestMapping ReauestMapping注解用于映射url到控制器类或一个特定的处理程序方法。可用于类或方法上,用于类上,表示类中的所有响应请求的方法都是以该地址作为父路径。 创建一个新项目:设置为web项目 编写web.xml(此配置也几…...
BERT - 段嵌入(Segment Embedding)
1. 段嵌入(Segment Embedding)的作用 在BERT模型中,段嵌入的主要作用是区分不同的句子。具体来说: 单句任务:所有位置的段嵌入都是0。 句子对任务:第一个句子的所有位置使用段嵌入0,第二个句子…...
Kaggle-Disaster Tweets-(二分类+NLP+模型融合)
Disaster Tweets 题意: 就是给出一个dataframe包含text这一列代表着文本,文本会有一些词,问对于每条记录中的text是真关于灾难的还是假关于灾难的。 比如我们说今天作业真多,这真是一场灾难。实际上这个灾难只是我们调侃而言的。…...
关于哈希冲突的讨论
文章目录 1. 什么是哈希冲突?2. 为什么会产生哈希冲突?3. 如何解决哈希冲突?4. 为什么哈希算法一定会产生冲突?5. 存在不发生冲突的哈希算法吗?6. 为什么不用无冲突的哈希算法(如完美哈希)&…...
傅利叶发布首款开源人形机器人N1:开发者可实现完整复刻
2025年4月11日,上海——通用机器人公司傅利叶正式发布首款开源人形机器人 Fourier N1,并同步开放涵盖物料清单、设计图纸、装配指南、基础操作软件在内的完整本体资源包。作为傅利叶 “Nexus 开源生态矩阵” 的首个落地项目(“N1” 即 “Nexu…...
2020年INS SCI1区TOP:平衡复合运动优化算法BCMO,深度解析+性能实测
目录 1.摘要2.算法原理3.结果展示4.参考文献5.代码获取 1.摘要 元启发式算法因其强大的鲁棒性和简便的编程方式,在优化领域中发挥着重要作用。本文提出了一种基于平衡复合运动优化算法BCMO,其核心思想是在解空间中平衡个体的复合运动特性。通过概率选择…...
2022年全国职业院校技能大赛 高职组 “大数据技术与应用” 赛项赛卷(3卷)任务书
2022年全国职业院校技能大赛 高职组 “大数据技术与应用” 赛项赛卷(3卷)任务书 背景描述:模块A:大数据平台搭建(容器环境)(15分)任务一:Hadoop HA安装部署任务二&#x…...
Express中间件(Middleware)详解:从零开始掌握(4)
下面我将为你提供四个实战项目的完整实现代码,每个项目都展示了Express中间件的实际应用场景。 1. API网关实现 const express require(express); const rateLimit require(express-rate-limit); const helmet require(helmet); const morgan require(morgan)…...
Ubuntu22环境下,Docker部署阿里FunASR的gpu版本
番外: 随着deepseek的爆火,人工智能相关的开发变得异常火爆,相关的大模型开发很常见的agent智能体需要ASR语音识别的功能,阿里开源的FunASR几乎是把一个商业的项目放给我们使用了。那么我们项目中的生产环境怎么部署gpu版本的语音识别服务呢?经过跟deepseek的一上午的极限…...
vue springboot 案例 收集
vue springboot 案例 收集 SpringbootVue前后端分离项目-管理系统 https://blog.csdn.net/m0_56308072/article/details/130893828...
Windows环境下本地部署deepseek-r1或其他大模型 【保姆级教程】
目录 背景准备工作开始部署下载olloma安装olloma下载deepseek-r1模型使用如何使用 结束语 背景 最近deepseek本地部署的概念越来越火,勾起了我学习的兴趣。 我就在思考如何使用家用机或者平时打游戏的机器来本地部署deepseek,给自己开发个智能体来辅佐…...
ubuntu20.04系统安装apollo10.0系统
文章目录 前言一、安装基础软件1、更新相关软件2 安装 Docker Engine 二、获取 GPU 支持1、安装显卡驱动2、安装 Nvidia container toolkit 三、安装 Apollo 环境管理工具1、安装依赖软件2、在宿主机添加 Apollo 软件源的 gpg key,并设置好源和更新3、安装aem 四、安…...
图片文本识别OCR+DeepSeekapi实现提取图片关键信息
用到的技术: 通过腾讯OCR文字识别,deepseek的api实现 目录 需求分析: 文字识别(OCR)具体实现步骤 起步工作 代码编写 deepseek整合消息,返回文本关键信息 起步工作 编写工具类 具体调用实现 具体…...