一个简单的websocket hook
一个简单的vue3的websockethook.有以下基础功能：创建链接失败重连发送心跳包import
一个简单的 vue3 的 websocket hook. 有以下基础功能：
创建链接失败重连发送心跳包import{ref}from"vue";exportinterfaceWS_CONFIG{url:string;// ws链接地址sendData?:Record<string,any>;// 请求数据reconnectSec?:number;// 请求异常重连间隔needHeart?:boolean;// 是否需要心跳heartSec?:number;// 心跳间隔heartData?:unknown;// 心跳时发送的数据}exportdefaultfunction<T>({url,sendData={},heartSec=1000*30,needHeart=false,reconnectSec=1000*30,heartData="ping",}:WS_CONFIG){// 响应数据constwsData=ref<T|undefined>();// 重试次数constretryNumber=ref(0);letsocket:WebSocket|null=null;letheart_Interval:number|null=null;letlockConnect=false;letnumber=0;// 创建链接functionconnect(){// 重连之前，关闭上次的连接if(socket){socket.close();}socket=newWebSocket(url);retryNumber.value=number++;// 连接成功回调socket.onopen=()=>{console.log(`${url} open event - ${new Date()}`);// 维持心跳needHeart&&heart();// 清空重试次数number=0;retryNumber.value=0;// 发送数据socket?.send(JSON.stringify(sendData));};// 连接断开回调socket.onclose=(e)=>{console.log(`${new Date()}${url} close eventcode: ${e.code};reason: ${e.reason};isTrusted: ${e.isTrusted};`);console.log(`reconnect - ${new Date()}`);// 进行重连reconnect();};// 连接失败回调socket.onerror=(e)=>{console.log(`${url} error event`,e);// 进行重连reconnect();};// 接收到数据socket.onmessage=(e:MessageEvent)=>{const{data}=e;const_data=(typeofdata==="string"?JSON.parse(data):data)asT;wsData.value=_data;};}// 心跳函数，维持链接不断开functionheart(){clearHeart();heart_Interval=setInterval(()=>{socket?.send(typeofheartData==="string"?heartData:JSON.stringify(heartData));},heartSec);}// 断开心跳functionclearHeart(){heart_Interval&&clearInterval(heart_Interval);}// 重连functionreconnect(){// 控制重连频率if(lockConnect){return;}lockConnect=true;// 清除心跳clearHeart();setTimeout(()=>{lockConnect=false;connect();},reconnectSec);}connect();// 关闭链接functionclearWS(){socket?.close();clearHeart();}return{wsData,retryNumber,clearWS,};}声明：本站所有文章，如无特殊说明或标注，均为爬虫抓取以及网友投稿，版权归原作者所有。
