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 - 基于用户交互执行操作的自包含界面 实时编辑器…...
使用docker在3台服务器上搭建基于redis 6.x的一主两从三台均是哨兵模式
一、环境及版本说明 如果服务器已经安装了docker,则忽略此步骤,如果没有安装,则可以按照一下方式安装: 1. 在线安装(有互联网环境): 请看我这篇文章 传送阵>> 点我查看 2. 离线安装(内网环境):请看我这篇文章 传送阵>> 点我查看 说明:假设每台服务器已…...
SkyWalking 10.2.0 SWCK 配置过程
SkyWalking 10.2.0 & SWCK 配置过程 skywalking oap-server & ui 使用Docker安装在K8S集群以外,K8S集群中的微服务使用initContainer按命名空间将skywalking-java-agent注入到业务容器中。 SWCK有整套的解决方案,全安装在K8S群集中。 具体可参…...
【第二十一章 SDIO接口(SDIO)】
第二十一章 SDIO接口 目录 第二十一章 SDIO接口(SDIO) 1 SDIO 主要功能 2 SDIO 总线拓扑 3 SDIO 功能描述 3.1 SDIO 适配器 3.2 SDIOAHB 接口 4 卡功能描述 4.1 卡识别模式 4.2 卡复位 4.3 操作电压范围确认 4.4 卡识别过程 4.5 写数据块 4.6 读数据块 4.7 数据流…...
【机器视觉】单目测距——运动结构恢复
ps:图是随便找的,为了凑个封面 前言 在前面对光流法进行进一步改进,希望将2D光流推广至3D场景流时,发现2D转3D过程中存在尺度歧义问题,需要补全摄像头拍摄图像中缺失的深度信息,否则解空间不收敛…...
如何理解 IP 数据报中的 TTL?
目录 前言理解 前言 面试灵魂一问:说说对 IP 数据报中 TTL 的理解?我们都知道,IP 数据报由首部和数据两部分组成,首部又分为两部分:固定部分和可变部分,共占 20 字节,而即将讨论的 TTL 就位于首…...
dify打造数据可视化图表
一、概述 在日常工作和学习中,我们经常需要和数据打交道。无论是分析报告、项目展示,还是简单的数据洞察,一个清晰直观的图表,往往能胜过千言万语。 一款能让数据可视化变得超级简单的 MCP Server,由蚂蚁集团 AntV 团队…...
10-Oracle 23 ai Vector Search 概述和参数
一、Oracle AI Vector Search 概述 企业和个人都在尝试各种AI,使用客户端或是内部自己搭建集成大模型的终端,加速与大型语言模型(LLM)的结合,同时使用检索增强生成(Retrieval Augmented Generation &#…...
MySQL JOIN 表过多的优化思路
当 MySQL 查询涉及大量表 JOIN 时,性能会显著下降。以下是优化思路和简易实现方法: 一、核心优化思路 减少 JOIN 数量 数据冗余:添加必要的冗余字段(如订单表直接存储用户名)合并表:将频繁关联的小表合并成…...
React从基础入门到高级实战:React 实战项目 - 项目五:微前端与模块化架构
React 实战项目:微前端与模块化架构 欢迎来到 React 开发教程专栏 的第 30 篇!在前 29 篇文章中,我们从 React 的基础概念逐步深入到高级技巧,涵盖了组件设计、状态管理、路由配置、性能优化和企业级应用等核心内容。这一次&…...
【iOS】 Block再学习
iOS Block再学习 文章目录 iOS Block再学习前言Block的三种类型__ NSGlobalBlock____ NSMallocBlock____ NSStackBlock__小结 Block底层分析Block的结构捕获自由变量捕获全局(静态)变量捕获静态变量__block修饰符forwarding指针 Block的copy时机block作为函数返回值将block赋给…...
