一个简单的websocket hook(一个简单的web项目名称)

一个简单的 vue3 的 websocket hook. 有以下基础功能： 创建链接 失败重连 发送心跳包 import { ref } from "vue"; export interface WS_CONFIG { url: string; // ws链接地址 sendData?: Record ...

推荐整理分享一个简单的websocket hook(一个简单的web项目名称)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:一个简单的web的页面,一个简单的web代码,一个简单的web app要包含的内容清单,一个简单的web项目名称,一个简单的web项目例子,一个简单的web项目例子,一个简单的web作业,一个简单的web项目例子,内容如对您有帮助，希望把文章链接给更多的朋友！

一个简单的 vue3 的 websocket hook. 有以下基础功能：

创建链接失败重连发送心跳包import { ref } from "vue";export interface WS_CONFIG { url: string; // ws链接地址 sendData?: Record<string, any>; // 请求数据 reconnectSec?: number; // 请求异常重连间隔 needHeart?: boolean; // 是否需要心跳 heartSec?: number; // 心跳间隔 heartData?: unknown; // 心跳时发送的数据}export default function <T>({ url, sendData = {}, heartSec = 1000 * 30, needHeart = false, reconnectSec = 1000 * 30, heartData = "ping",}: WS_CONFIG) { // 响应数据 const wsData = ref<T | undefined>(); // 重试次数 const retryNumber = ref<number>(0); let socket: WebSocket | null = null; let heart_Interval: number | null = null; let lockConnect = false; let number = 0; // 创建链接 function connect() { // 重连之前，关闭上次的连接 if (socket) { socket.close(); } socket = new WebSocket(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<string>) => { const { data } = e; const _data = (typeof data === "string" ? JSON.parse(data) : data) as T; wsData.value = _data; }; } // 心跳函数，维持链接不断开 function heart() { clearHeart(); heart_Interval = setInterval(() => { socket?.send( typeof heartData === "string" ? heartData : JSON.stringify(heartData) ); }, heartSec); } // 断开心跳 function clearHeart() { heart_Interval && clearInterval(heart_Interval); } // 重连 function reconnect() { // 控制重连频率 if (lockConnect) { return; } lockConnect = true; // 清除心跳 clearHeart(); setTimeout(() => { lockConnect = false; connect(); }, reconnectSec); } connect(); // 关闭链接 function clearWS() { socket?.close(); clearHeart(); } return { wsData, retryNumber, clearWS, };}