websocket封装带心跳和重连机制(vue3+ts+vite)

简介: websocket封装带心跳和重连机制(vue3+ts+vite)

import{ mitts }from"./tool";/*  * @Author: lzx  * @Date: 2022-05-25 15:42:37  * @LastEditors: lzx  * @LastEditTime: 2022-08-18 15:01:38  * @Description: Fuck Bug  * @FilePath: \talk_pc\src\utils\socket.ts  */let socketUrl: any ="";// socket地址let websocket: any =null;// websocket 实例let heartTime: any =null;// 心跳定时器实例let socketHeart: number =0;// 心跳次数letHeartTimeOut: number =3000;// 心跳超时时间let socketError: number =0;// 错误次数// 初始化socketconstinitWebSocket=(url: any)=>{  socketUrl = url;    // 初始化 websocket  websocket =newWebSocket(url);  websocketonopen();  websocketonmessage();  sendSocketHeart()};// socket 连接成功constwebsocketonopen=()=>{    websocket.onopen=function(e: any){        console.log("连接 websocket 成功", e);        resetHeart();    };};// socket 连接失败constwebsocketonerror=()=>{    websocket.onerror=function(e: any){        console.log("连接 websocket 失败", e);    };};// socket 断开链接constwebsocketclose=()=>{    websocket.onclose=function(e: any){        console.log("断开连接", e);    };};// socket 接收数据constwebsocketonmessage=()=>{  websocket.onmessage=function(e: any){    let msg =JSON.parse(e.data);    if(msg.type==='heartbeat'){      resetHeart()      console.log("心跳");    }    // console.log("收到socket消息", JSON.parse(e.data));    test(msg)// 测试数据  };};// socket 发送数据constsendMsg=(data: any)=>{    websocket.send(data);};// socket 错误constwebsocketError=()=>{    websocket.onerror=function(e: any){        console.log("socket 错误", e);    };};// socket 重置心跳constresetHeart=()=>{    socketHeart =0;    socketError =0;    clearInterval(heartTime);    sendSocketHeart();};// socket心跳发送constsendSocketHeart=()=>{    heartTime =setInterval(()=>{        if(socketHeart <=2){            console.log("心跳发送:", socketHeart);            websocket.send(              JSON.stringify({                content:"",                requestId:"aa9872be-d5b9-478e-aba4-50527cd3ef32",                type:"heartbeat"              })            );            socketHeart = socketHeart +1;        }else{            reconnect()        }    },HeartTimeOut);};// socket重连constreconnect=()=>{    if(socketError <=2){        clearInterval(heartTime);        initWebSocket(socketUrl);        socketError = socketError +1;        console.log("socket重连", socketError);    }else{    console.log("重试次数已用完的逻辑", socketError);    clearInterval(heartTime);    }};// 测试收到消息传递consttest=(msg: any)=>{  switch(msg.type){    case'heartbeat'://加入会议      mitts.emit('heartbeat', msg)      break;  }}export{    initWebSocket,    websocketonmessage,    sendMsg,    websocketonopen,    websocketonerror,    websocketclose,    websocketError,    resetHeart,    sendSocketHeart,    reconnect,};

目录
相关文章
|
6天前
|
JavaScript
在vue3中(vite)引入unocss,安装配置unocss
在vue3中(vite)引入unocss,安装配置unocss
|
4月前
|
JSON JavaScript 前端开发
在Vue3项目中,Vite起到的作用及其可以做的事情
Vite是Vue 3项目的关键快速开发服务器和高效的热模块替换(HMR)。它的亮点包括:使用ES模块实现快速启动和动态加载,模块级别HMR提升开发效率,Rollup打包优化生产构建。此外,Vite还支持插件系统、自定义配置、静态资源处理和现代JS特性。通过`npm create vite`可快速搭建Vue项目,配置文件`vite.config.js`可定制行为,`.env`文件管理环境变量。Vite优化了开发与构建流程,提高开发者效率并保证构建性能。
|
24天前
|
JavaScript 开发工具
vite如何打包vue3插件为JSSDK
【9月更文挑战第10天】以下是使用 Vite 打包 Vue 3 插件为 JS SDK 的步骤:首先通过 `npm init vite-plugin-sdk --template vue` 创建 Vue 3 项目并进入项目目录 `cd vite-plugin-sdk`。接着,在 `src` 目录下创建插件文件(如 `myPlugin.js`),并在 `main.js` 中引入和使用该插件。然后,修改 `vite.config.js` 文件以配置打包选项。最后,运行 `npm run build` 进行打包,生成的 `my-plugin-sdk.js` 即为 JS SDK,可在其他项目中引入使用。
|
2月前
|
前端开发 JavaScript API
赶快收藏!全网最佳websocket封装:完美支持断网重连、自动心跳!
【8月更文挑战第17天】赶快收藏!全网最佳websocket封装:完美支持断网重连、自动心跳!
54 3
赶快收藏!全网最佳websocket封装:完美支持断网重连、自动心跳!
|
2月前
|
JavaScript 前端开发 安全
【Vue3 + Vite】6个非常强大的后台管理项目!开源且免费!
【Vue3 + Vite】6个非常强大的后台管理项目!开源且免费!
|
3月前
|
JavaScript 前端开发 网络协议
从理论到实践:全面剖析Python Web应用中的WebSocket实时通信机制
【7月更文挑战第17天】WebSocket在实时Web应用中扮演重要角色,提供全双工通信,减少延迟。本文详述了Python中使用`websockets`库创建服务器的步骤,展示了一个简单的echo服务器示例,监听8765端口,接收并回显客户端消息。客户端通过JavaScript与服务器交互,实现双向通信。了解WebSocket的握手、传输和关闭阶段,有助于开发者有效利用WebSocket提升应用性能。随着实时需求增长,掌握WebSocket技术至关重要。
240 6
|
4月前
|
资源调度 JavaScript 前端开发
vite+vue3+ts从0到1搭建企业级项目(2)
vite+vue3+ts从0到1搭建企业级项目
72 1
|
3月前
WebSocket 心跳机制如何实现
WebSocket 心跳机制如何实现
38 0
|
3月前
|
JavaScript 测试技术
Vue开发项目过程中环境变量的配置(vite、vue3、ts)
Vue开发项目过程中环境变量的配置(vite、vue3、ts)
40 0
|
4月前
|
开发工具 git
vite+vue3+ts从0到1搭建企业级项目(4)
vite+vue3+ts从0到1搭建企业级项目
50 0
下一篇
无影云桌面