当前位置: 首页 > news >正文

Vue3_开启全局websocket

1、封装websocket

新建文件夹"socket.ts",路径:"@/utils/socket"

export default (onMessage: Function) => {let socketUrl = 'ws://171.29.8.218:8080/ems/ws/screen' //socket请求地址let socket: WebSocketlet lockReconnect = falselet timer: ReturnType<typeof setTimeout>const createSocket = () => {try {socket = new WebSocket(socketUrl)init()} catch (e) {console.log('catch' + e)reconnect()}}const reconnect = () => {if (lockReconnect) returnlockReconnect = trueclearTimeout(timer)timer = setTimeout(() => {createSocket()}, 4000)}const init = () => {socket.onopen = function (event) {console.log('WebSocket:已连接')//心跳检测重置heartCheck.reset().start()}//接收到消息的回调方法socket.onmessage = function (event) {console.log('WebSocket:收到一条消息', event.data)const isHeart = /pong/.test(event.data)if (onMessage && !isHeart) {//触发自定义onMessageonMessage.call(null, event)}heartCheck.reset().start()}//连接发生错误的回调方法socket.onerror = function (event) {console.log('WebSocket:发生错误')reconnect()}//连接关闭的回调方法socket.onclose = function (event) {console.log('WebSocket:已关闭')heartCheck.reset() //心跳检测reconnect()}//监听窗口关闭事件,当窗口关闭时,主动去关闭websocket连接,防止连接还没断开就关闭窗口,server端会抛异常window.onbeforeunload = function () {socket.close()}}var heartCheck = {timeout: 8000,timeoutObj: setTimeout(() => {}),serverTimeoutObj: setInterval(() => {}),reset: function () {clearTimeout(this.timeoutObj)clearTimeout(this.serverTimeoutObj)return this},start: function () {var self = thisclearTimeout(this.timeoutObj)clearTimeout(this.serverTimeoutObj)this.timeoutObj = setTimeout(function () {//这里发送一个心跳,后端收到后,返回一个心跳消息,//onmessage拿到返回的心跳就说明连接正常socket.send(JSON.stringify({action: 'ping'}))self.serverTimeoutObj = setTimeout(function () {//如果超过一定时间还没重置,说明后端主动断开了(因此timeout设定时间要比后端返回socket间隔时间长,否则会判定后端主动断开)console.log('关闭服务')socket.close() //如果onclose会执行reconnect,我们执行 websocket.close()就行了.如果直接执行 reconnect 会触发onclose导致重连两次}, self.timeout)}, this.timeout)}}createSocket()
}

2、全局注册

在文件夹"main.ts"中

import Websocket from "./utils/socket"
const onMessageList: Array<Function> = []; // 声明一个全局变量来收集onMessage列表,因为在不同的页面可能会有不同的处理
app.provide("onMessageList", onMessageList); // 全局注入
const onMessage = (event: any) => {// 遍历onMessage集合并触发onMessageList.forEach(f => {f.call(null, event);})
}
Websocket(onMessage); // 启动websocket

3、页面使用

import { inject } from "vue";
const onMessageList = inject("onMessageList"); // 接收注入
const socketMessage = (res) => {const data = JSON.parse(res.data); // 获取数据
};
onMessageList.push(socketMessage); // 将自定义处理事件插入onMessge集合

相关文章:

Vue3_开启全局websocket

1、封装websocket 新建文件夹"socket.ts"&#xff0c;路径&#xff1a;"/utils/socket" export default (onMessage: Function) > {let socketUrl ws://171.29.8.218:8080/ems/ws/screen //socket请求地址let socket: WebSocketlet lockReconnect f…...

PTA 社交集群

当你在社交网络平台注册时&#xff0c;一般总是被要求填写你的个人兴趣爱好&#xff0c;以便找到具有相同兴趣爱好的潜在的朋友。一个“社交集群”是指部分兴趣爱好相同的人的集合。你需要找出所有的社交集群。 输入格式 输入在第一行给出一个正整数 N&#xff08;≤1000&…...

USB Type-C 受电端取电快充协议芯片,支持PD+QC+FCP+SCP+AFC快充协议

前言 随着科技的飞速发展&#xff0c;电子设备对于快速充电的需求日益增加。为了满足这一需求&#xff0c;市场上涌现出了众多快充技术和产品。其中&#xff0c;XSP08Q诱骗取电芯片以其卓越的性能和广泛的应用场景&#xff0c;成为了快充领域的一颗璀璨明星。本文将对XSP08Q P…...

C++ 模板专题 - 参数约束

一&#xff1a;概述&#xff1a; 除了使用SFINAE对模板参数进行约束之外&#xff0c;还可以使用概念&#xff08;Concepts&#xff09;来对模板参数进行约束&#xff0c;确保传入的类似满足特定条件。概念&#xff08;Concepts&#xff09;是C20中引入的&#xff0c;概念是用于…...

电商行业 | 用好企业培训工具,打造精英团队!

在竞争激烈的电商行业中&#xff0c;人才是企业最宝贵的资源。如何持续提升员工的专业技能和服务水平&#xff0c;打造一支高效、专业的金牌员工队伍&#xff0c;是每个电商企业面临的重要课题。企业培训工具作为提升员工能力的关键手段&#xff0c;正逐渐成为电商行业不可或缺…...

python进阶集锦

一、迭代器和生成器 区别 关于迭代器和生成器 迭代器与生成器的区别 迭代器&#xff08;Iterator&#xff09;和生成器&#xff08;Generator&#xff09;是Python中处理序列数据的两种不同概念。迭代器是遵循迭代协议的对象&#xff0c;而生成器是一种特殊类型的迭代器&am…...

8.C++小练习

C小练习 1.练习 1.练习 计算器—加减乘除 函数调用 //简单的计算器 #include <iostream>using namespace std;//封装函数 int add(int a,int b){return a b; }int jian(int a, int b){return a - b; }int cheng(int a,int b){return a * b; }double chu(int a,int b){r…...

实现YOLO V3数据加载器:从文件系统读取图像与标签

引言 在深度学习项目中&#xff0c;数据准备是非常重要的一环。特别是在物体检测任务中&#xff0c;数据的组织和预处理直接影响到模型的训练效果。YOLO V3&#xff08;You Only Look Once Version 3&#xff09;作为一种高效的实时物体检测框架&#xff0c;其数据加载器的设计…...

安装pygod

了解pygod。 It is recommended to use pip for installation. Please make sure the latest version is installed, as PyGOD is updated frequently: pip install pygod # normal install pip install --upgrade pygod # or update if needed如果pip不是最新的&…...

探索Python与Excel的无缝对接:xlwings库的神秘面纱

文章目录 探索Python与Excel的无缝对接&#xff1a;xlwings库的神秘面纱1. 背景介绍&#xff1a;为何选择xlwings&#xff1f;2. xlwings是什么&#xff1f;3. 如何安装xlwings&#xff1f;4. 简单的库函数使用方法打开工作簿创建工作簿读取单元格数据写入单元格数据保存并关闭…...

CISE|暴雨受邀出席第二十六届中国国际软件博览会

10月24日至26日&#xff0c;备受瞩目的第二十六届中国国际软件博览会&#xff08;简称CISE&#xff09;在国家会展中心&#xff08;天津&#xff09;圆满举办。CISE不仅汇聚了来自全国各地的顶尖软件企业和机构&#xff0c;还吸引了众多专家学者和行业精英共襄盛举&#xff0c;…...

OpenEuler22.03-sp2下安装docker-非常实用

1、确定系统版本是openEuler22.03-SP2 [root192 ~]# wget https://download.docker.com/linux/static/stable/x86_64/docker-20.10.23.tgz #或者自己下载之后上传到/root下&#xff0c;测试最好是自己下载到本地再上传到服务器上 下载地址&#xff1a;https://download.dock…...

【学术会议论文投稿】前端框架巅峰对决:React、Vue与Angular的全面解析与实战指南

【JPCS独立出版】​第三届能源与动力工程国际学术会议&#xff08;EPE 2024&#xff09;_艾思科蓝_学术一站式服务平台 更多学术会议请看&#xff1a;https://ais.cn/u/nuyAF3 引言 在快速发展的前端技术领域&#xff0c;选择合适的框架或库对于项目的成功至关重要。React、Vu…...

[0152].第3节:IDEA中工程与模块

我的后端学习大纲 IDEA大纲 1、Project和Module的概念&#xff1a; 2、Module操作&#xff1a; 2.1.创建Module: 2.2.删除Module&#xff1a; 2.3.导入Module&#xff1a; 1.导入外来模块的代码&#xff1a; 查看Project Structure&#xff0c;选择import module&#xff1a…...

【modbus协议】libmodbus库移植基于linux平台

文章目录 下载库函数源码编译路径添加libmodbus 源码分析核心数据结构常用接口函数 开发 TCP Server 端开发TCP Client 端 下载库函数源码 编译路径添加 libmodbus 源码分析 核心数据结构 modbus_t结构体&#xff1a; 这是 libmodbus 的核心数据结构&#xff0c;代表一个 Mod…...

SpringBoot+Minio实现多文件下载和批量下载

文章目录 SpringBoot+minio实现多文件下载1、SpringBoot+minio实现多文件打成一个压缩包下载1. 添加依赖2. 配置 MinIO 客户端3. 创建下载和压缩逻辑4. 创建控制器方法来触发下载5. 测试下载功能注意事项2、在minio指定的桶名下面生产一个文件夹1. MinIO 配置2. 编写业务逻辑文…...

3.swoole安装【Docker】

一、拉取最新 swoole 镜像 docker pull phpswoole/swoole二、第一次启动swoole容器 docker run --name swoole phpswoole/swoole 三、 拷贝配置文件 docker cp swoole:/var/www /docker/swoole四、 停止 swoole 容器 dcoker stop swoole五、 删除第一次启动的swoole容器 d…...

React 探秘(三): 时间切片

文章目录 背景时间切片原理requestIderCallback 方法setImmediateMessageChannelsetTimeout React 18 时间切片源码手撸时间切片问题拆解构建任务队列宏任务包装首次开启任务递归任务执行workLoop 开启工作循环demo 模拟 总结 背景 前文学习了 fiber 架构和双缓存技术&#xff…...

OSError: Can‘t load tokenizer for ‘bert-base-uncased‘.

一、具体报错&#xff1a; 报错如下&#xff1a; OSError: Cant load tokenizer for bert-base-uncased. If you were trying to load it from https://huggingface.co/models, make sure you dont have a local directory with the same name. Otherwise, make sure bert-bas…...

中国人寿财险青岛市分公司:专业团队,卓越服务

中国人寿财险青岛市分公司拥有一支专业的团队&#xff0c;为客户提供卓越的保险服务。 公司的保险从业人员都经过严格的专业培训和考核&#xff0c;具备扎实的保险知识和丰富的实践经验。他们以客户为中心&#xff0c;用心倾听客户需求&#xff0c;为客户提供个性化的保险方案…...

VB.net复制Ntag213卡写入UID

本示例使用的发卡器&#xff1a;https://item.taobao.com/item.htm?ftt&id615391857885 一、读取旧Ntag卡的UID和数据 Private Sub Button15_Click(sender As Object, e As EventArgs) Handles Button15.Click轻松读卡技术支持:网站:Dim i, j As IntegerDim cardidhex, …...

逻辑回归:给不确定性划界的分类大师

想象你是一名医生。面对患者的检查报告&#xff08;肿瘤大小、血液指标&#xff09;&#xff0c;你需要做出一个**决定性判断**&#xff1a;恶性还是良性&#xff1f;这种“非黑即白”的抉择&#xff0c;正是**逻辑回归&#xff08;Logistic Regression&#xff09;** 的战场&a…...

相机Camera日志实例分析之二:相机Camx【专业模式开启直方图拍照】单帧流程日志详解

【关注我&#xff0c;后续持续新增专题博文&#xff0c;谢谢&#xff01;&#xff01;&#xff01;】 上一篇我们讲了&#xff1a; 这一篇我们开始讲&#xff1a; 目录 一、场景操作步骤 二、日志基础关键字分级如下 三、场景日志如下&#xff1a; 一、场景操作步骤 操作步…...

遍历 Map 类型集合的方法汇总

1 方法一 先用方法 keySet() 获取集合中的所有键。再通过 gey(key) 方法用对应键获取值 import java.util.HashMap; import java.util.Set;public class Test {public static void main(String[] args) {HashMap hashMap new HashMap();hashMap.put("语文",99);has…...

centos 7 部署awstats 网站访问检测

一、基础环境准备&#xff08;两种安装方式都要做&#xff09; bash # 安装必要依赖 yum install -y httpd perl mod_perl perl-Time-HiRes perl-DateTime systemctl enable httpd # 设置 Apache 开机自启 systemctl start httpd # 启动 Apache二、安装 AWStats&#xff0…...

CMake基础:构建流程详解

目录 1.CMake构建过程的基本流程 2.CMake构建的具体步骤 2.1.创建构建目录 2.2.使用 CMake 生成构建文件 2.3.编译和构建 2.4.清理构建文件 2.5.重新配置和构建 3.跨平台构建示例 4.工具链与交叉编译 5.CMake构建后的项目结构解析 5.1.CMake构建后的目录结构 5.2.构…...

HTML 列表、表格、表单

1 列表标签 作用&#xff1a;布局内容排列整齐的区域 列表分类&#xff1a;无序列表、有序列表、定义列表。 例如&#xff1a; 1.1 无序列表 标签&#xff1a;ul 嵌套 li&#xff0c;ul是无序列表&#xff0c;li是列表条目。 注意事项&#xff1a; ul 标签里面只能包裹 li…...

【磁盘】每天掌握一个Linux命令 - iostat

目录 【磁盘】每天掌握一个Linux命令 - iostat工具概述安装方式核心功能基础用法进阶操作实战案例面试题场景生产场景 注意事项 【磁盘】每天掌握一个Linux命令 - iostat 工具概述 iostat&#xff08;I/O Statistics&#xff09;是Linux系统下用于监视系统输入输出设备和CPU使…...

高等数学(下)题型笔记(八)空间解析几何与向量代数

目录 0 前言 1 向量的点乘 1.1 基本公式 1.2 例题 2 向量的叉乘 2.1 基础知识 2.2 例题 3 空间平面方程 3.1 基础知识 3.2 例题 4 空间直线方程 4.1 基础知识 4.2 例题 5 旋转曲面及其方程 5.1 基础知识 5.2 例题 6 空间曲面的法线与切平面 6.1 基础知识 6.2…...

PL0语法,分析器实现!

简介 PL/0 是一种简单的编程语言,通常用于教学编译原理。它的语法结构清晰,功能包括常量定义、变量声明、过程(子程序)定义以及基本的控制结构(如条件语句和循环语句)。 PL/0 语法规范 PL/0 是一种教学用的小型编程语言,由 Niklaus Wirth 设计,用于展示编译原理的核…...