首页IT科技一个简单的问题什么是爱情(一个简单的websocket hook)

一个简单的问题什么是爱情(一个简单的websocket hook)

时间2025-05-27 14:11:12分类IT科技浏览5073
导读:一个简单的 vue3 的 websocket hook. 有以下基础功能: 创建链接 失败重连 发送心跳包...

一个简单的 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 event code: ${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, }; }

创心域SEO版权声明:以上内容作者已申请原创保护,未经允许不得转载,侵权必究!授权事宜、对本内容有异议或投诉,敬请联系网站管理员,我们将尽快回复您,谢谢合作!

展开全文READ MORE
伪原创写文章软件哪个好(收费伪原创文章工具) deepin切换语言(deepin20怎么取消键盘大写锁定? deepin关闭大写锁定提示的技巧)