帮我一个Vue3.0封装WebSocket方法组件 包含自动重连机制 心跳检测 错误处理 状态管理 发送和接收消息使用ts编写

<think>好的，我现在需要帮用户解决如何用Vue3.0封装一个包含自动重连、心跳检测等功能的WebSocket组件，使用TypeScript编写。首先，我得理清楚用户的具体需求。用户提到了自动重连、心跳检测、错误处理、状态管理以及消息的发送和接收，这些都是WebSocket应用中常见的功能点。 首先，我应该考虑如何将这些功能模块化。Vue3的组合式API非常适合用Composition API来封装逻辑，比如使用setup函数和ref、reactive来管理状态。自动重连机制需要处理连接断开的情况，可能需要设置重连次数和间隔时间。心跳检测是为了保持连接活跃，防止被服务器断开，通常需要定时发送心跳消息。 接下来是错误处理，需要捕获WebSocket的错误事件，并可能触发重连。状态管理方面，可能需要跟踪连接状态、重连次数等，可以使用Pinia或者Vuex，但用户可能希望更轻量级的解决方案，所以用响应式对象可能更合适。 发送和接收消息部分，需要提供方法让组件外部能够发送消息，并处理接收到的消息。使用TypeScript的话，需要定义消息的类型，确保类型安全。 然后，我需要考虑如何将这些功能整合到一个可复用的组件中。可能需要创建一个自定义Hook，比如useWebSocket，这样可以在多个组件中复用。组件部分可能负责提供UI反馈，比如连接状态显示。 自动重连的逻辑应该在连接断开时启动，可能需要使用setTimeout来延迟重连尝试，并限制最大重连次数。心跳检测可以使用setInterval定时发送心跳包，并在连接断开时清除定时器。 错误处理需要监听WebSocket的error事件，并更新状态，同时可能触发重连。状态管理需要暴露连接状态、重连次数等信息，方便组件使用。 发送消息的方法需要检查连接状态，只有在打开时才发送。接收消息可能需要通过事件监听，并将消息存储在响应式对象中，或者通过回调函数传递给父组件。 测试时需要注意各种边界情况，比如网络断开、服务器重启等，确保自动重连和心跳检测正常工作。此外，类型定义要准确，避免TypeScript报错。 最后，示例代码的结构应该清晰，包括创建WebSocket实例、处理事件、实现重连和心跳逻辑，以及暴露必要的方法和状态。可能还需要提供使用示例，说明如何在组件中使用这个封装好的WebSocket模块。</think>以下是用Vue3 + TypeScript封装WebSocket组件的完整实现方案，包含自动重连、心跳检测等核心功能： ```typescript // websocket.ts import { ref, reactive, onUnmounted } from 'vue' type MessageHandler = (data: any) => void type StatusChangeHandler = (status: string) => void interface WebSocketOptions { url: string reconnectLimit?: number reconnectInterval?: number heartCheckInterval?: number heartCheckTimeout?: number } export default function useWebSocket(options: WebSocketOptions) { const state = reactive({ ws: null as WebSocket | null, status: 'disconnected', reconnectCount: 0, timer: null as number | null, heartCheckTimer: null as number | null, serverTimer: null as number | null, messageHandlers: new Set<MessageHandler>(), statusHandlers: new Set<StatusChangeHandler>() }) // 配置项默认值 const { url, reconnectLimit = 5, reconnectInterval = 5000, heartCheckInterval = 30000, heartCheckTimeout = 10000 } = options // 状态变更处理 const setStatus = (newStatus: string) => { state.status = newStatus state.statusHandlers.forEach(handler => handler(newStatus)) } // 创建WebSocket连接 const createWebSocket = () => { try { state.ws = new WebSocket(url) setStatus('connecting') state.ws.onopen = () => { setStatus('connected') state.reconnectCount = 0 // 重置重连次数 startHeartCheck() } state.ws.onclose = (e) => { if (e.code !== 1000) { // 非正常关闭 reconnect() } setStatus('disconnected') clearHeartCheck() } state.ws.onerror = (error) => { console.error('WebSocket Error:', error) reconnect() } state.ws.onmessage = (e) => { const data = JSON.parse(e.data) // 处理心跳响应 if (data.type === 'heartbeat') { resetHeartCheck() return } // 触发消息处理器 state.messageHandlers.forEach(handler => handler(data)) } } catch (error) { console.error('WebSocket创建失败:', error) reconnect() } } // 自动重连机制 const reconnect = () => { if (state.reconnectCount >= reconnectLimit) { console.error(`已达最大重连次数（${reconnectLimit}次）`) return } if (state.timer) clearTimeout(state.timer) state.timer = window.setTimeout(() => { state.reconnectCount++ console.log(`第${state.reconnectCount}次重连...`) createWebSocket() }, reconnectInterval) } // 心跳检测机制 const startHeartCheck = () => { state.heartCheckTimer = window.setInterval(() => { // 发送心跳包 sendMessage({ type: 'heartbeat', timestamp: Date.now() }) // 检测服务端响应超时 state.serverTimer = window.setTimeout(() => { console.error('心跳响应超时，关闭连接') state.ws?.close() }, heartCheckTimeout) }, heartCheckInterval) } const resetHeartCheck = () => { if (state.serverTimer) { clearTimeout(state.serverTimer) state.serverTimer = null } } const clearHeartCheck = () => { if (state.heartCheckTimer) { clearInterval(state.heartCheckTimer) state.heartCheckTimer = null } resetHeartCheck() } // 发送消息 const sendMessage = (data: any) => { if (state.ws?.readyState === WebSocket.OPEN) { state.ws.send(JSON.stringify(data)) } else { console.error('消息发送失败：连接未就绪') } } // 添加消息监听 const addMessageHandler = (handler: MessageHandler) => { state.messageHandlers.add(handler) return () => state.messageHandlers.delete(handler) } // 添加状态监听 const addStatusHandler = (handler: StatusChangeHandler) => { state.statusHandlers.add(handler) return () => state.statusHandlers.delete(handler) } // 主动关闭连接 const close = () => { state.ws?.close(1000) // 正常关闭 clearHeartCheck() setStatus('disconnected') } // 初始化连接 createWebSocket() // 组件卸载时清理 onUnmounted(() => { close() if (state.timer) clearTimeout(state.timer) state.messageHandlers.clear() state.statusHandlers.clear() }) return { sendMessage, addMessageHandler, addStatusHandler, close, state: { status: () => state.status, reconnectCount: () => state.reconnectCount } } } ``` **核心功能说明：** 1. **自动重连机制** - 在异常断开时自动尝试重连 - 可配置最大重试次数（默认5次） - 重连间隔时间可配置（默认5秒） 2. **心跳检测机制** - 定时发送心跳包（默认30秒间隔） - 检测服务端响应超时（默认10秒） - 异常时自动断开并触发重连 3. **状态管理** - 实时连接状态跟踪（connecting/connected/disconnected） - 重连次数统计 - 提供状态变更监听接口 4. **消息管理** - 统一的消息处理中心 - 支持多个消息监听器 - 自动处理心跳消息 5. **错误处理** - 网络错误自动重连 - 消息发送前状态检查 - 异常关闭处理 **使用示例：** ```vue <script setup lang="ts"> import { onMounted } from 'vue' import useWebSocket from './websocket' const { sendMessage, addMessageHandler, state } = useWebSocket({ url: 'wss://your-websocket-url', reconnectLimit: 5, heartCheckInterval: 30000 }) // 添加消息监听 const removeHandler = addMessageHandler((data) => { console.log('收到消息:', data) }) // 发送消息示例 const sendTestMessage = () => { sendMessage({ type: 'test', content: 'Hello WebSocket' }) } onMounted(() => { console.log('当前连接状态:', state.status()) }) </script> <template> <div> <button @click="sendTestMessage">发送测试消息</button> <p>连接状态: {{ state.status }}</p> <p>重连次数: {{ state.reconnectCount }}</p> </div> </template> ``` **扩展建议：** 1. 增加消息队列机制（断线时缓存未发送消息） 2. 实现二进制数据传输支持 3. 添加连接认证机制 4. 完善类型定义（根据业务需求定义具体消息格式） 5. 增加网络状态检测（结合navigator.onLine） 这个实现方案采用Vue3 Composition API，具有以下特点： - 高复用性：可在多个组件中独立使用 - 类型安全：完善的TypeScript类型定义 - 可配置性：通过参数灵活调整各项配置 - 状态隔离：每个实例独立维护自身状态 - 内存安全：组件卸载时自动清理资源