通过socket设置版本更新提示

1.项目使用的是git所以使用git仓库的短哈希作为版本更新标识,将该字符写入public文件,此处需要注意后端访问静态资源的路径。

在vue.config.js文件中写入

function excuteVersion() {const fs = require('fs')const { execSync } = require('child_process')
// 获取当前Git仓库的短提交哈希,将其存储在cmtId变量中const cmtId = execSync('git rev-parse --short HEAD').toString().trim()
// 将cmtId写⼊到public⽬录下的v.txt⽂件中const versionFile = path.join(process.cwd(), 'public/static/market', 'version.txt')fs.writeFileSync(versionFile, cmtId)
}excuteVersion()

写入后 监听后端socket的版本更新消息通知
创建一个ts文件监听消息

export function wsListenVersion() {const wsStore = useWsStore();wsStore.on(WS_EVENT.VERSION_UPDATE,(data)=>{wsLogger(WS_STATUS.RECEIVED, WS_EVENT.VERSION_UPDATE, data);if (data.code === HTTP_CODE.SUCCESS) {showUpdateModal(data.data.new)}})
}

设置通知的样式

export function showUpdateModal(newCommitId: string) {const key = `open${newCommitId}`;notification.open({message: "页面已经发生了更新",description:"检测到当前页面内容已经发生了更新,请刷新页面后使用!",btn: () =>h(Button,{type: "primary",size: "small",onClick: () => {window.location.reload();notification.close(key);}},{default: () => "刷新"}),key,placement: "bottomRight"});
}

在首页加载创建socket连接成功后监听该通知

onMounted(()=>{
// 登录后初始化socket连接initWs()
})function initWs(): Promise<void> {return new Promise<void>(resolve => {wsStore.connect().then(() => {wsListenVersion();resolve();}).catch(reason => console.log("[ERROR][WS]", reason));});
}

以上通过学习参考该文章

https://blog.csdn.net/Ljq1041054607/article/details/140955141

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

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

相关文章

相机触发模式

参考自&#xff1a;相机触发模式_硬触发和软触发的区别-CSDN博客 一、图像采集模式分类 相机的图像采集模式分为内触发模式与外触发模式。其中内触发模式包含连续采集、单帧采集两种形式&#xff1b;外触发模式包含软件外触发、硬件外触发。本文以海康相机的软件平台作介绍&a…

脚手架vue-cli,webpack模板

先安装node.js&#xff0c;它是服务器端&#xff0c;用于给页面提供服务。前端学习不需要会node.js&#xff0c;只需要学会node.js衍生出来的npm命令即可。 npm 是node.js的一个工具&#xff0c;作用是进行包管理&#xff0c;npm是node.js的包管理器。 接着安装脚手架&#xff…

Stable Diffusion核心网络结构——CLIP Text Encoder

&#x1f33a;系列文章推荐&#x1f33a; 扩散模型系列文章正在持续的更新&#xff0c;更新节奏如下&#xff0c;先更新SD模型讲解&#xff0c;再更新相关的微调方法文章&#xff0c;敬请期待&#xff01;&#xff01;&#xff01;&#xff08;本文及其之前的文章均已更新&…

ggplot2 分面图等添加注释文字,相加哪里加哪里: 自定义函数 AddText()

如果分面图上还想再添加文字&#xff0c;只能使用底层的grid包了。 函数定义 # Add text to ggplot2 figures # # param label text you want to put on figure # param x position x, left is 0, right 1 # param y position y, bottom is 0, up 1 # param color text color…

ubuntu中使用ffmpeg和nginx推流rtmp视频

最近在测试ffmpeg推流rtmp视频&#xff0c;单独安装ffmpeg是无法完成推流的&#xff0c;需要一个流媒体服务器&#xff0c;常用nginx&#xff0c;可以直接在ubuntu虚拟机里面测试一下。 测试过程不涉及编译ffmpeg和nginx&#xff0c;仅使用基本功能&#xff1a; 1 安装ffmpeg …

解决upload上传之后,再上传没有效果

解决upload上传之后&#xff0c;再上传没有效果 注释&#xff1a;这是第二次上传&#xff0c;两次网络请求都是第一次上传的&#xff0c;这次上传没有网络请求 原因&#xff1a;在我的代码里我限制了上传数量为1&#xff0c;然后上传成功后&#xff0c;上传列表没有清空&#…

NVR接入录像回放平台EasyCVR视频融合平台加油站监控应用场景与实际功能

在现代社会中&#xff0c;加油站作为重要的能源供应点&#xff0c;面临着安全监管与风险管理的双重挑战。为应对这些问题&#xff0c;安防监控平台EasyCVR推出了一套全面的加油站监控方案。该方案结合了智能分析网关V4的先进识别技术和EasyCVR视频监控平台的强大监控功能&#…

第 24 章 -Golang 性能优化

在Go语言中进行性能优化是一个多方面的过程&#xff0c;它涉及到代码编写、编译器优化、运行时系统调优以及对应用程序的深入理解。以下是针对Golang性能优化的一些关键点&#xff0c;包括性能分析工具、内存管理和并发优化等方面的内容&#xff0c;并附带一些简单的案例源代码…

reactflow 中 useStoreApi 模块作用

1. 状态管理与访问核心功能 它提供了一种方式来访问和操作内部存储&#xff08;store&#xff09;&#xff0c;这个存储包含了与 ReactFlow 应用相关的各种状态&#xff0c;如节点&#xff08;Nodes&#xff09;状态、边&#xff08;Edges&#xff09;状态、视口&#xff08;V…

基于web的音乐网站(Java+SpringBoot+Mysql)

目录 1系统概述 1.1 研究背景 1.2研究目的 1.3系统设计思想 2相关技术 2.1 MYSQL数据库 2.2 B/S结构 2.3 Spring Boot框架简介 3系统分析 3.1可行性分析 3.1.1技术可行性 3.1.2经济可行性 3.1.3操作可行性 3.2系统性能分析 3.2.1 系统安全性 3.2.2 数据完整性 …

中间件--laravel进阶篇

laravel版本11.31,这中间件只有3种,分别是全局中间件,路由中间件,控制器中间件。相比thinkphp8,少了一个应用中间件。 一、创建中间件 laravel创建中间件可以使用命令的方式创建,非常方便。比如php artisan make:middleware EnsureTokenIsValid。EnsureTokenIsValid是中间…

vue使用List.forEach遍历集合元素

需要遍历集合对其每个元素进行操作时&#xff0c;可以使用forEach方法 1.语法&#xff1a;集合.forEach ( 定义每一项 > 定义每一项都要进行的逻辑 ) 2、使用场景&#xff1a; //例如需要给每个员工的工资数量加1000this.personList.forEach(item>item.salary100…

杰发科技AC7840——EEP中RAM的配置

sample和手册中示例代码的sram区地址定义不一样 这个在RAM中使用没有限制&#xff0c;根据这个表格留下足够空间即可 比如需要4096字节的eep空间&#xff0c;可以把RAM的地址改成E000&#xff0c;即E000-EFFF&#xff0c;共4096bytes即可。

实验室管理平台:Spring Boot技术构建

3系统分析 3.1可行性分析 通过对本实验室管理系统实行的目的初步调查和分析&#xff0c;提出可行性方案并对其一一进行论证。我们在这里主要从技术可行性、经济可行性、操作可行性等方面进行分析。 3.1.1技术可行性 本实验室管理系统采用SSM框架&#xff0c;JAVA作为开发语言&a…

ThinkPHP8使用workerman

应用场景说明&#xff1a;通过建立通信&#xff0c;不同用户进行消息推送或数据更新&#xff0c;因为本身需要作为服务端进行主动消息推送&#xff0c;因此使用Gateway方式&#xff0c;如果不需要的可以不采用这种形式&#xff0c;以下内容仅为参考&#xff0c;具体业务场景&am…

【USB】CC检测

CC信号有两根线&#xff0c;CC1和CC2&#xff0c;大部分USB线&#xff08;不带芯片的线缆&#xff09;里面只有一根CC线&#xff0c;DFP可根据两根CC线上的电压&#xff0c;判断是否已经插入设备。通过判断哪根CC线上有下拉电阻来判断方向&#xff0c;下图的说明已经非常清晰。…

「一」HarmonyOS端云一体化概要

关于作者 白晓明 宁夏图尔科技有限公司董事长兼CEO、坚果派联合创始人 华为HDE、润和软件HiHope社区专家、鸿蒙KOL、仓颉KOL 华为开发者学堂/51CTO学堂/CSDN学堂认证讲师 开放原子开源基金会2023开源贡献之星 「目录」 「一」HarmonyOS端云一体化概要 「二」体验HarmonyOS端云一…

二进制之和

问题描述 小U和小R喜欢探索二进制数字的奥秘。他们想找到一个方法&#xff0c;将两个二进制字符串相加并以十进制的形式呈现。这个过程需要注意的是&#xff0c;他们的二进制串可能非常长&#xff0c;所以常规的方法可能无法处理大数。小U和小R希望你帮助他们设计一个算法&…

三种复制只有阅读权限的飞书网络文档的方法

大家都知道&#xff0c;飞书是一款功能强大的在线协作工具&#xff0c;可以帮助团队更高效地协作和沟通。越来越多的资料都在使用飞书文档&#xff0c;在使用飞书的过程中&#xff0c;发现很多文档没有复制权限&#xff0c;如果想要摘抄笔记&#xff0c;只能一个字一个字地敲出…

Flink升级程序和版本

Flink DataStream程序通常设计为长时间运行,如几周、几个月甚至几年。与所有长时间运行的服务一样,Flink streaming应用程序也需要维护,包括修复错误、实现改进或将应用程序迁移到更高版本的Flink集群。 这里就来描述下如何更新Flink streaming应用程序,以及如何将正在运行…