vue 项目中使用 mqtt
1、在html 中用cdn方式引入
<script src="https://unpkg.com/mqtt/dist/mqtt.min.js"></script>
2、封装代码 mqtt_connect.js
// import * as mqtt from 'mqtt/dist/mqtt.min'
// 不知道为什么 我用引入的方式不成,就在html 用的cdn方式接入了
import { Message } from 'element-ui'
let client = {}
// 连接服务器
/*** params:* @options 参数*/
export function connectFn({ username, password, url, topic, clientId }, callBack) {const options = {username,password,cleanSession: false,keepAlive: 10,clientId: clientId,connectTimeout: 4000}client = mqtt.connect(url, options)client.on('connect', (e) => {Message.success('成功连接服务器')console.log('成功连接服务器:', e)// 订阅主题console.log(topic, 'topictopic')client.subscribe(topic, { qos: 1 }, (err) => {if (!err) {Message.success('订阅成功')console.log('订阅成功')} else {Message.error('消息订阅失败!')console.log('消息订阅失败!')}})})// 重新连接// reconnect()// 是否已经断开连接mqttError()// 监听获取信息getMessage(callBack)
}
// 发布消息 @topic主题 @message发布内容
export function publish(topic, message) {if (!client.connected) {console.log('客户端未连接')return}client.publish(topic, message, { qos: 1 }, (err) => {if (!err) {console.log('主题为' + topic + '发布成功')}})
}
// 监听接收消息
function getMessage(callBack) {client.on('message', (topic, message) => {if (message) {callBack(topic, message)}})
}
// 监听服务器是否连接失败
function mqttError() {client.on('error', (error) => {console.log('连接失败:', error)client.end()})
}
// 取消订阅
export function unsubscribe(topicList) {client.unsubscribe(topicList, (error) => {console.log('主题为' + topicList + '取消订阅成功', error)})
}
// 断开连接
export function unconnect() {client.end()client = nullMessage.warning('服务器已断开连接!')console.log('服务器已断开连接!')
}
// 监听服务器重新连接
function reconnect() {client.on('reconnect', (error) => {console.log('正在重连:', error)})
}
3.vue页面中使用
<script>
import { connectFn, unsubscribe, unconnect } from '@/utils/mqtt_connect'export default {data() {return {topicList: []}},mounted() {this.topicList.push(`xxxxx`)connectFn({url: 'xxxxx',username: 'xxx',password: 'xxx',topic: `xxxx`,clientId: `xxxx`},this.getMessage)},beforeDestroy() {unsubscribe(this.topicList)unconnect()},methods: {getMessage(topic, message) {if (message) {console.log('收到来着', topic, '的信息', message.toString())const res = JSON.parse(message.toString())switch (topic) {case 'topic/username':this.username = resbreakcase 'topic/class':this.class = resbreakdefault:return}}}}
}
</script>
相关文章:
vue 项目中使用 mqtt
1、在html 中用cdn方式引入 <script src"https://unpkg.com/mqtt/dist/mqtt.min.js"></script> 2、封装代码 mqtt_connect.js // import * as mqtt from mqtt/dist/mqtt.min // 不知道为什么 我用引入的方式不成,就在html 用的cdn方式接入了…...
linux shell操作 - 05 进程 与 IO 模型
文章目录 计算机内存分配进程与子进程流IO模型非阻塞IOIO多路复用网络IO模型简单的socket并发的socket 计算机内存分配 一个32位,4G内存的计算机,内存使用分为两部分: 操作系统内核空间;应用程序的用户空间使用的操作系统不同&a…...
让SOME/IP运转起来——SOME/IP系统设计(下)之数据库开发
上一篇我们介绍了SOME/IP矩阵的设计流程,这一篇重点介绍如何把SOME/IP矩阵顺利的交给下游软件团队进行开发。 车载以太网通信矩阵开发完成后,下一步应该做什么? 当我们完成SOME/IP矩阵开发,下一步需要把开发完成的矩阵换成固定格…...
Mybatis反射工厂类DefaultReflectorFactory
DefaultReflectorFactory是反射工厂接口ReflectorFactory的默认实现,其主要是实现了对反射对象Reflector的创建和缓存。 有三个方法: // 判断是否开启缓存boolean isClassCacheEnabled();// 设置是否缓存void setClassCacheEnabled(boolean classCacheEn…...
antDesignPro a-table样式二次封装
antDesignPro是跟element-ui类似的一个样式框架,其本身就是一个完整的后台系统,风格样式都很统一。我使用的是antd pro vue,版本是1.7.8。公司要求使用这个框架,但是UI又有自己的一套设计。这就导致我需要对部分组件进行一定的个性…...
找免费4K高清图片素材,就上这6个网站
使用图片素材怕侵权?那就上这6个网站,免费下载,4K高清无水印,赶紧收藏起来~ 1、菜鸟图库 https://www.sucai999.com/pic.html?vNTYxMjky 一个很大的素材库,站内主要还是以设计素材为主,像图片素材就有上百…...
代码随想录算法训练营第35天| 860.柠檬水找零 406.根据身高重建队列 452. 用最少数量的箭引爆气球
JAVA代码编写 860.柠檬水找零 在柠檬水摊上,每一杯柠檬水的售价为 5 美元。顾客排队购买你的产品,(按账单 bills 支付的顺序)一次购买一杯。 每位顾客只买一杯柠檬水,然后向你付 5 美元、10 美元或 20 美元。你必须…...
成为AI产品经理——TPR、FPR、ROC、AUC
目录 一、PR图、BEP 1.PR图 2.BEP 二、灵敏度、特异度 1.灵敏度 2.特异度 三、真正率、假正率 1.真正率 2.假正率 三、ROC、AUC 1.ROC 2.AUC 四、KS值 一、PR图、BEP 1.PR图 二分类问题模型通常输出的是一个概率值,我们需要设定一个阈值ÿ…...
java: Internal error in the mapping processor: java.lang.NullPointerException
启动java项目出错,其他人工程没有问题,别着急。 java: Internal error in the mapping processor: java.lang.NullPointerException at org.mapstruct.ap.internal.processor.DefaultVersionInformation.createManifestUrl(DefaultVersionInformation.j…...
TCP知识点
TCP(Transmission Control Protocol,传输控制协议)是一种面向连接的、可靠的、基于字节流的传输层协议,广泛应用于互联网。下面是TCP的一些知识点: TCP是一种可靠的协议,采用三次握手建立连接和四次挥手断开…...
大语言模型(LLMs)在 Amazon SageMaker 上的动手实践(一)
本期文章,我们将通过三个动手实验从浅到深地解读和演示大语言模型(LLMs),如何结合 Amazon SageMaker 的模型部署、模型编译优化、模型分布式训练等。 实验一:使用 Amazon SageMaker 构建基于开源 GPT-J 模型的对话机器…...
顶级数据恢复工具—— 最全的15个数据恢复软件榜单
在这个信息为王的数字时代,关键数据的丢失对个人和企业来说都可能是灾难性的。无论是由于意外删除、硬件故障还是恶意攻击,拥有强大的数据恢复解决方案都是至关重要的。在本综合指南中,我们将探索市场上最好的数据恢复软件,包括顶…...
【图像分类】【深度学习】【Pytorch版本】Inception-ResNet模型算法详解
【图像分类】【深度学习】【Pytorch版本】Inception-ResNet模型算法详解 文章目录 【图像分类】【深度学习】【Pytorch版本】Inception-ResNet模型算法详解前言Inception-ResNet讲解Inception-ResNet-V1Inception-ResNet-V2残差模块的缩放(Scaling of the Residuals)Inception-…...
Ubuntu 22.03 LTS 安装deepin-terminal 实现 终端 分屏
deepin-terminal 安装 源里面自带了这个软件,可以直接装 sudo apt install deepin-terminal 启动 按下Win键,输入deep即可快速检索出图标,点击启动 效果 分屏 CtrlShiftH 水平分割 CtrlShiftJ 垂直分割 最多分割成四个小窗口࿰…...
HTTP协议,Web框架回顾
HTTP 请求协议详情 -请求首行---》请求方式,请求地址,请求协议版本 -请求头---》key:value形式 -referer:上一次访问的地址 -user-agenet:客户端类型 -name:lqz -cookie&…...
el-checkbox 对勾颜色调整
对勾默认是白色 改的时候一直在试着改color人,其实不对。我用的是element ui 的复选框 /* 对勾颜色调整 */ .el-checkbox__inner::after{/* 是改这里的颜色 */border: 2px solid #1F7DFD; border-left: 0;border-top: 0;}...
系统管理精要:深度探索 Linux 监控与管理利器
前言 系统管理在 Linux 运维中扮演着至关重要的角色,涵盖了系统的配置、监控和维护。了解这些方面的工具和技术对于确保系统稳定运行至关重要。本文将着重介绍系统管理的关键部分,包括配置系统、监控系统状态和系统的日常维护,并以 top 和 vm…...
vue3之echarts渐变柱状图
vue3之echarts渐变柱状图 效果: 核心代码: <template><div class"abnormal"><div class"chart" ref"chartsRef"></div></div> </template><script setup> import * as echa…...
有一种浪漫,叫接触Linux
大家好,我是五月。 嵌入式开发 嵌入式开发产品必须依赖硬件和软件。 硬件一般使用51单片机,STM32、ARM,做成的产品以平板,手机,智能机器人,智能小车居多。 软件用的当然是以linux系统为蓝本,…...
构建 App 的方法
目录 构建 App 使用 App 设计工具以交互方式构建 App 使用 MATLAB 函数以编程方式构建 App 构建实时编辑器任务 可以使用 MATLAB 来构建可以集成到各种环境中的交互式用户界面。可以构建两种类型的用户界面: App - 基于用户交互执行操作的自包含界面 实时编辑器…...
智慧医疗能源事业线深度画像分析(上)
引言 医疗行业作为现代社会的关键基础设施,其能源消耗与环境影响正日益受到关注。随着全球"双碳"目标的推进和可持续发展理念的深入,智慧医疗能源事业线应运而生,致力于通过创新技术与管理方案,重构医疗领域的能源使用模式。这一事业线融合了能源管理、可持续发…...
将对透视变换后的图像使用Otsu进行阈值化,来分离黑色和白色像素。这句话中的Otsu是什么意思?
Otsu 是一种自动阈值化方法,用于将图像分割为前景和背景。它通过最小化图像的类内方差或等价地最大化类间方差来选择最佳阈值。这种方法特别适用于图像的二值化处理,能够自动确定一个阈值,将图像中的像素分为黑色和白色两类。 Otsu 方法的原…...
解决本地部署 SmolVLM2 大语言模型运行 flash-attn 报错
出现的问题 安装 flash-attn 会一直卡在 build 那一步或者运行报错 解决办法 是因为你安装的 flash-attn 版本没有对应上,所以报错,到 https://github.com/Dao-AILab/flash-attention/releases 下载对应版本,cu、torch、cp 的版本一定要对…...
大语言模型(LLM)中的KV缓存压缩与动态稀疏注意力机制设计
随着大语言模型(LLM)参数规模的增长,推理阶段的内存占用和计算复杂度成为核心挑战。传统注意力机制的计算复杂度随序列长度呈二次方增长,而KV缓存的内存消耗可能高达数十GB(例如Llama2-7B处理100K token时需50GB内存&a…...
Linux 内存管理实战精讲:核心原理与面试常考点全解析
Linux 内存管理实战精讲:核心原理与面试常考点全解析 Linux 内核内存管理是系统设计中最复杂但也最核心的模块之一。它不仅支撑着虚拟内存机制、物理内存分配、进程隔离与资源复用,还直接决定系统运行的性能与稳定性。无论你是嵌入式开发者、内核调试工…...
免费数学几何作图web平台
光锐软件免费数学工具,maths,数学制图,数学作图,几何作图,几何,AR开发,AR教育,增强现实,软件公司,XR,MR,VR,虚拟仿真,虚拟现实,混合现实,教育科技产品,职业模拟培训,高保真VR场景,结构互动课件,元宇宙http://xaglare.c…...
Git常用命令完全指南:从入门到精通
Git常用命令完全指南:从入门到精通 一、基础配置命令 1. 用户信息配置 # 设置全局用户名 git config --global user.name "你的名字"# 设置全局邮箱 git config --global user.email "你的邮箱example.com"# 查看所有配置 git config --list…...
通过 Ansible 在 Windows 2022 上安装 IIS Web 服务器
拓扑结构 这是一个用于通过 Ansible 部署 IIS Web 服务器的实验室拓扑。 前提条件: 在被管理的节点上安装WinRm 准备一张自签名的证书 开放防火墙入站tcp 5985 5986端口 准备自签名证书 PS C:\Users\azureuser> $cert New-SelfSignedCertificate -DnsName &…...
WPF八大法则:告别模态窗口卡顿
⚙️ 核心问题:阻塞式模态窗口的缺陷 原始代码中ShowDialog()会阻塞UI线程,导致后续逻辑无法执行: var result modalWindow.ShowDialog(); // 线程阻塞 ProcessResult(result); // 必须等待窗口关闭根本问题:…...
Ubuntu系统复制(U盘-电脑硬盘)
所需环境 电脑自带硬盘:1块 (1T) U盘1:Ubuntu系统引导盘(用于“U盘2”复制到“电脑自带硬盘”) U盘2:Ubuntu系统盘(1T,用于被复制) !!!建议“电脑…...
