VUE3结合mqtt解决多页面使用需重复连接等问题(封装)

场景

在做的一个项目中多个页面都需要使用到mqtt接收消息,但这样的话每个页面就都需要连接一次mqtt,并且要再次配置options信息、订阅主题、接收消息,非常的不方便,因此琢磨将mqtt封装到vuex中,使其可以多页面通用,这样只需要连接订阅一次,接收到的消息可以存储在vuex中。

一、安装mqtt

npm install mqtt

二、暴露出main.js中的vue实例

使用export default暴露出app

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'const app = createApp(App)app.use(ElementPlus)
app.use(store).use(router).mount('#app')export default app

三、封装mqtt

import { createStore } from 'vuex'
import main from "../main";//main.ts文件中要暴露app
import router from '@/router';// 引入vuex
export default createStore({state: {topics: [],//订阅话题},mutations: {//mqtt服务MQTT_SERVICE(state, event){// mqtt连接成功main.config.globalProperties.$mqtt.on('connect', (e) => {console.log('连接成功:', e)// console.log(state.topics)main.config.globalProperties.$mqtt.subscribe(state.topics, { qos: 1 }, (error) => {if (!error) {console.log('订阅成功')} else {console.log('订阅失败')}})})// 接收消息处理main.config.globalProperties.$mqtt.on('message', (topic, message) => {console.log('收到来自', topic, '的消息', message.toString())})// 断开发起重连main.config.globalProperties.$mqtt.on('reconnect', (error) => {console.log('正在重连:', error)})// 链接异常处理main.config.globalProperties.$mqtt.on('error', (error) => {console.log('连接失败:', error)})},//发布消息MQTT_PUBLISH(state, {topic, msg}){console.log(topic)main.config.globalProperties.$mqtt.publish(topic, msg)},//断开MQTTMQTT_CLOSE(state, event){console.log('断开MQTT');main.config.globalProperties.$mqtt.end()},},actions: {},modules: {}
})

四、编写mqtt配置文件

在src下的utils下新建一个js文件:mqttConfig.js

import $store from "@/store/index";
export function getOptions(){let options = {connectTimeout: 40000,clientId: 'mqttId',clean: true,username: admin,password: admin}return options
}export function setTopics(){//此处修改VUEX中的值建议通过actions、mutations修改state值$store.state.topics = [ 'topic01','topic02','topic03''topic04''topic05']
}

五、页面引入并使用

这里是在一个所有页面都要用到的一个公共组件中引入使用的,也可以在main.js中使用(看引入方法二)

方法1. 公共组件中引用

import { computed, reactive, ref ,defineComponent, onMounted, onUnmounted } from 'vue-demi';
import $store from "@/store/index";//引入VUEX
import main from "../main";//main.ts文件中要暴露app
import { getOptions, setTopics } from "@/utils/mqttConfig.js"
import mqtt from 'mqtt'//引入mqtt
//mqtt链接地址
let mqttUrl = 'ws://broker.emqx.io:8084'
export default defineComponent ({name:'msgDisplay',setup(){onMounted(() => {//mqtt连接main.config.globalProperties.$mqtt = mqtt.connect(mqttUrl, getOptions())//设置订阅主题setTopics()//启动mqtt状态监听$store.commit('MQTT_SERVICE')})onUnmounted(() => {$store.commit('MQTT_CLOSE') //断开mqtt})return { }}    
})
</script>

方法2.

该方法需要在main中创建连接,在首页的渲染生命周期中启动mqtt状态监听

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'const app = createApp(App)import mqtt from 'mqtt'
import { getOptions, setTopics } from "./utils/mqttConfig.js"
let mqttUrl = 'ws://broker.emqx.io:8084'
//mqtt连接
app.config.globalProperties.$mqtt = mqtt.connect(mqttUrl, getOptions())
//设置订阅主题
setTopics()app.use(ElementPlus)
app.use(store).use(router).mount('#app')export default app

首页.vue

<script>
import { onMounted, defineComponent, onUnmounted } from 'vue';
import $store from "@/store/index";
export default defineComponent ({setup(){onMounted(() => {//启动mqtt状态监听$store.commit('MQTT_SERVICE')})onUnmounted(() => {//关闭项目时断开mqtt//此处仅适用于从首页跳转到下一个页面后首页没有被销毁的情况,其它情况自行修改$store.commit('MQTT_CLOSE') })}
})
</script>

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

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

相关文章

工具网站DefiLlama全攻略:从零学习链上数据使用与发现

DefiLlama 是一个 DeFi(去中心化金融)信息聚合器,其主要功能是提供各种 DeFi 平台的准确、全面数据。DefiLlama 致力于在不受广告或赞助内容影响的情况下为用户提供这些数据,以确保信息内容的透明度和公正性,该平台聚合来自多个区块链的数据,让用户能够全面了解 DeFi 格局…

探索Elasticsearch内存应用的关键因素

了解Elasticsearch内存模型 Elasticsearch的内存使用主要包括堆内存和操作系统缓存。堆内存是Elasticsearch用来存储数据结构的内存&#xff0c;例如文档索引、倒排索引等。操作系统缓存则是Elasticsearch缓存磁盘上的数据块以加速读取操作的一种机制&#xff0c;通常被称为OS…

docker安装-在linux下的安装步骤

#切换到root用户 su yum安装jcc相关 yum -y install gcc yum -y install gcc-c 安装yum-utils sudo yum install -y yum-utils 设置stable镜像仓库 sudo yum-config-manager --add-repo https://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo 更新yum软件包索…

conda操作使用教程

一 conda介绍 Conda 是一个开源的包管理系统和环境管理系统&#xff0c;用于在 Linux、Windows 和 macOS 上管理 Python 包和依赖项&#xff0c;java有maven, python有conda,它是python开发者的最爱。 Conda 的核心功能&#xff1a; 包管理&#xff1a;安装、更新、删除 Pytho…

【PHP】json_decode的第二个参数是什么意思

json_decode() 函数的第二个参数 $associative 是一个布尔值&#xff0c;用于控制 JSON 对象在 PHP 中的解码方式。当将其设置为 true 时&#xff0c;JSON 对象将被解码为关联数组&#xff1b;当设置为 false 时&#xff0c;JSON 对象将被解码为 stdClass 对象。默认值为 false…

nginx配置图片服务器

目录 一&#xff1a;访问流程 二&#xff1a;缓存服务器配置 三&#xff1a;上传图片直接上传到图片服务器 四&#xff1a;加快图片访问 一&#xff1a;访问流程 访问缓存服务器(上面安装nginx反向代理到图片服务器&#xff0c;对外提供服务)->图片服务器 二&#xff1…

【本科生通信原理】【实验报告】【北京航空航天大学】实验二:AM、DSB调制/解调

一、实验目的 二、实验内容 三、实验程序 1、 function q1() N 1024; %采样点数 A 2; %直流分量 t0 5; %信号时长 dt t0 / N; %时间分辨率 fs 1 / dt; %系统采样频率…

C++ arpa/inet.h

头文件 <arpa/inet.h> 主要包含了一些用于IPv4和IPv6地址转换的函数&#xff0c;以及与网络字节序相关的函数。以下是其中一些主要的函数&#xff1a; 地址转换函数&#xff1a; inet_addr: 将点分十进制的IPv4地址转换为网络字节序的32位整数。inet_aton: 将点分十进制的…

深入理解可变参数

目录 1.C语言方式 1.1.宏介绍 1.2.原理详解 1.3.案例分析 1.4.其他实例 2.C之std::initializer_list 2.1.简介 2.2.原理详解 2.3.案例分析 3.C之可变参数模版 3.1.简介 3.2.可变参数个数 3.3.递归包展开 3.4.逗号表达式展开 3.5.Lambda 捕获 3.6.转发参数包 4…

【实用代码片段】从原图像到目标图像的颜色迁移

代码 def color_transfer(sc, dc):"""Transfer color distribution from of sc, referred to dc.Args:sc (numpy.ndarray): input image to be transfered.dc (numpy.ndarray): reference image Returns:numpy.ndarray: Transferred color distribution on the…

23级第一次测试总结

前天进行了第一次测试&#xff0c;一共10道题只写出来6道题&#xff0c;题目本身难度不大&#xff0c;基本没什么算法&#xff0c;除了最后两道题目考察了双指针&#xff08;滑动窗口&#xff09;和深度搜索&#xff0c;但也仅仅只写出来了6道&#xff0c;还是太菜了 对于题目…

2023 IoTDB Summit:清华大学软件学院长聘副教授龙明盛《IoTDB 新组件:内生机器学习》...

12 月 3 日&#xff0c;2023 IoTDB 用户大会在北京成功举行&#xff0c;收获强烈反响。本次峰会汇集了超 20 位大咖嘉宾带来工业互联网行业、技术、应用方向的精彩议题&#xff0c;多位学术泰斗、企业代表、开发者&#xff0c;深度分享了工业物联网时序数据库 IoTDB 的技术创新…

Day21- 回溯算法part01

一、组合 题目一&#xff1a;77. 组合 77. 组合 给定两个整数 n 和 k&#xff0c;返回范围 [1, n] 中所有可能的 k 个数的组合。 你可以按 任何顺序 返回答案 combine 函数初始化结果变量和当前组合变量&#xff0c;然后调用 backtrack 函数来生成所有组合。backtrack 函数…

中国区县绿地曝光率数据,shp+excel格式,区县精度

基本信息. 数据名称: 中国区县绿地曝光率数据 数据格式: shpexcel 数据精度&#xff1a;区县 数据几何类型: —— 数据坐标系: WGS84坐标系 数据来源&#xff1a;网络公开数据 字段列表&#xff1a; 序号字段名称字段说明1xzqhdm_3区县代码2xzqhmc_3区县名称4xzqhm…

【2023年度总结】蜕变与挑战

2023年是意义重大的一年&#xff0c;这一年里&#xff0c;我从大三到了大四&#xff0c;焦虑满满&#xff0c;参加比赛&#xff0c;拿到保研名额&#xff0c;体验实习&#xff0c;之前很少在年末对自己的一年进行回顾和总结。 一月 阳了&#xff0c;寒假期间就窝在家里&#…

web网站,可当期末作业,随机一言,天气,时钟,音乐等综合网站

文章目录 主页面时间胶囊底部条文心一言音乐播放器天气时钟禁用右键其他每次刷新页面会随机更换壁纸新春版 主页面 时间胶囊 底部条 文心一言 点击可随机变化文心一言 音乐播放器 天气时钟 禁用右键 其他 每次刷新页面会随机更换壁纸 新春版

C#编程-描述内存分配

描述内存分配 分配给变量的内存通过两种方式引用&#xff1a;值类型和引用类型。内置数据类型&#xff0c;诸如int、char和float都是值雷兴国。当您声明int变量时&#xff0c;编译器会分配一个内存块以保持该整数值。请思考以下语句&#xff1a; int Num 50;上述语句为保存值…

API 安全设计的建议

1、使用 HTTPS 现在的 Web 已经不是之前那个年代&#xff0c;标准的 HTTP 满足不了 Web 安全需求。而各大浏览器供应商开始标记不使用安全层的 URL&#xff0c;你的 API 也可以考虑开始动手做这件事——用 HTTPS。HTTPS 采用传输层安全性协议&#xff08;TLS&#xff09;对传输…

kubernetes(二)创建集群

kubernetes&#xff08;一&#xff09;概述与架构 云原生实战 语雀 官网 Kubernetes 文档 | Kubernetes 更新&#xff1a;移除 Dockershim 的常见问题 | Kubernetes B站课程&#xff1a;https://www.bilibili.com/video/BV13Q4y1C7hS/?p26 安装版本说明&#xff1a; 视频教程…

【nginx】linux(centos版本)安装nginx

目录 一、下载安装包1.1 官网下载1.2 linux命令下载 二、安装2.1 安装依赖包2.2 安装nginx 三、启动四、访问五、关停六、重载配置 一、下载安装包 1.1 官网下载 1.官网地址 https://nginx.org/en/download.html2.版本说明 1.Mainline version-主线版本 2.Stable version-稳…