import { onBeforeUnmount, reactive, ref } from 'vue'; import { baseUrl, websocketPath } from '@/sheep/config'; import { copyValueToTarget } from '@/sheep/util'; /** * WebSocket 创建 hook * @param opt 连接配置 * @return {{options: *}} */ export function useWebSocket(opt) { const getAccessToken = () => { return uni.getStorageSync('token'); }; const options = reactive({ url: (baseUrl + websocketPath).replace('http', 'ws') + '?token=' + getAccessToken(), // ws 地址 isReconnecting: false, // 正在重新连接 reconnectInterval: 3000, // 重连间隔,单位毫秒 heartBeatInterval: 5000, // 心跳间隔,单位毫秒 pingTimeoutDuration: 1000, // 超过这个时间,后端没有返回pong,则判定后端断线了。 heartBeatTimer: null, // 心跳计时器 destroy: false, // 是否销毁 pingTimeout: null, // 心跳检测定时器 reconnectTimeout: null, // 重连定时器ID的属性 onConnected: () => { }, // 连接成功时触发 onClosed: () => { }, // 连接关闭时触发 onMessage: (data) => { }, // 收到消息 }); const SocketTask = ref(null); // SocketTask 由 uni.connectSocket() 接口创建 const initEventListeners = () => { // 监听 WebSocket 连接打开事件 SocketTask.value.onOpen(() => { console.log('WebSocket 连接成功'); // 连接成功时触发 options.onConnected(); // 开启心跳检查 startHeartBeat(); }); // 监听 WebSocket 接受到服务器的消息事件 SocketTask.value.onMessage((res) => { try { if (res.data === 'pong') { // 收到心跳重置心跳超时检查 resetPingTimeout(); } else { options.onMessage(JSON.parse(res.data)); } } catch (error) { console.error(error); } }); // 监听 WebSocket 连接关闭事件 SocketTask.value.onClose((event) => { // 情况一:实例销毁 if (options.destroy) { options.onClosed(); } else { // 情况二:连接失败重连 // 停止心跳检查 stopHeartBeat(); // 重连 reconnect(); } }); }; // 发送消息 const sendMessage = (message) => { if (SocketTask.value && !options.destroy) { SocketTask.value.send({ data: message }); } }; // 开始心跳检查 const startHeartBeat = () => { options.heartBeatTimer = setInterval(() => { sendMessage('ping'); options.pingTimeout = setTimeout(() => { // 如果在超时时间内没有收到 pong,则认为连接断开 reconnect(); }, options.pingTimeoutDuration); }, options.heartBeatInterval); }; // 停止心跳检查 const stopHeartBeat = () => { clearInterval(options.heartBeatTimer); resetPingTimeout(); }; // WebSocket 重连 const reconnect = () => { if (options.destroy || !SocketTask.value) { // 如果WebSocket已被销毁或尚未完全关闭,不进行重连 return; } // 重连中 options.isReconnecting = true; // 清除现有的重连标志,以避免多次重连 if (options.reconnectTimeout) { clearTimeout(options.reconnectTimeout); } // 设置重连延迟 options.reconnectTimeout = setTimeout(() => { // 检查组件是否仍在运行和WebSocket是否关闭 if (!options.destroy) { // 重置重连标志 options.isReconnecting = false; // 初始化新的WebSocket连接 initSocket(); } }, options.reconnectInterval); }; const resetPingTimeout = () => { if (options.pingTimeout) { clearTimeout(options.pingTimeout); options.pingTimeout = null; // 清除超时ID } }; const close = () => { options.destroy = true; stopHeartBeat(); if (options.reconnectTimeout) { clearTimeout(options.reconnectTimeout); } if (SocketTask.value) { SocketTask.value.close(); SocketTask.value = null; } }; const initSocket = () => { options.destroy = false; copyValueToTarget(options, opt); SocketTask.value = uni.connectSocket({ url: options.url, complete: () => { }, success: () => { }, }); initEventListeners(); }; initSocket(); onBeforeUnmount(() => { close(); }); return { options }; }