Tmux工作流快捷键配置
2026/1/19 0:23:13
一、核心概念与必要性
为什么需要心跳检测和重连？
网络不稳定：移动网络、Wi-Fi切换、代理服务器可能导致连接断开
服务器限制：Nginx/负载均衡器默认30-60秒超时
浏览器限制：部分浏览器标签页休眠时暂停WebSocket
资源清理：服务器需要清理僵尸连接
二、完整实现方案
1. WebSocket管理器类（TypeScript实现）
typescript
复制
下载
interface WebSocketConfig { url: string; protocols?: string | string[]; reconnectInterval?: number; // 重连间隔(ms) maxReconnectAttempts?: number; // 最大重连次数 heartbeatInterval?: number; // 心跳间隔(ms) heartbeatTimeout?: number; // 心跳超时(ms) } enum WebSocketState { CONNECTING = 0, OPEN = 1, CLOSING = 2, CLOSED = 3 } class WebSocketManager { private ws: WebSocket | null = null; private config: Required<WebSocketConfig>; private reconnectAttempts = 0; private heartbeatTimer: NodeJS.Timeout | null = null; private heartbeatTimeoutTimer: NodeJS.Timeout | null = null; private reconnectTimer: NodeJS.Timeout | null = null; private isManualClose = false; // 是否手动关闭 // 事件监听器 private listeners = { open: [] as ((event: Event) => void)[], message: [] as ((data: any) => void)[], close: [] as ((event: CloseEvent) => void)[], error: [] as ((event: Event) => void)[], reconnect: [] as ((attempt: number) => void)[], }; constructor(config: WebSocketConfig) { this.config = { url: config.url, protocols: config.protocols || [], reconnectInterval: config.reconnectInterval || 3000, maxReconnectAttempts: config.maxReconnectAttempts || 5, heartbeatInterval: config.heartbeatInterval || 30000, heartbeatTimeout: config.heartbeatTimeout || 10000, }; } /** * 连接WebSocket */ public connect(): void { if (this.ws?.readyState === WebSocketState.OPEN || this.ws?.readyState === WebSocketState.CONNECTING) { console.warn('WebSocket is already connecting or connected'); return; } this.isManualClose = false; try { this.ws = new WebSocket(this.config.url, this.config.protocols); this.setupEventListeners(); } catch (error) { console.error('WebSocket creation error:', error); this.handleReconnect(); } } /** * 设置事件监听器 */ private setupEventListeners(): void { if (!this.ws) return; this.ws.onopen = (event: Event) => { console.log('WebSocket connected'); this.reconnectAttempts = 0; this.startHeartbeat(); this.emit('open', event); }; this.ws.onmessage = (event: MessageEvent) => { try { const data = JSON.parse(event.data); // 处理心跳响应 if (data.type === 'pong' || data.type === 'heartbeat') { this.resetHeartbeat(); return; } this.emit('message', data); } catch (error) { // 非JSON数据直接传递 this.emit('message', event.data); } }; this.ws.onclose = (event: CloseEvent) => { console.log(`WebSocket closed: ${event.code} ${event.reason}`); this.cleanupHeartbeat(); // 非手动关闭才重连 if (!this.isManualClose) { this.handleReconnect(); } this.emit('close', event); }; this.ws.onerror = (event: Event) => { console.error('WebSocket error:', event); this.emit('error', event); // 错误时也尝试重连 if (!this.isManualClose) { this.handleReconnect(); } }; } /** * 开始心跳检测 */ private startHeartbeat(): void { this.cleanupHeartbeat(); this.heartbeatTimer = setInterval(() => { if (this.ws?.readyState === WebSocketState.OPEN) { this.sendHeartbeat(); this.startHeartbeatTimeout(); } }, this.config.heartbeatInterval); } /** * 发送心跳包 */ private sendHeartbeat(): void { if (this.ws?.readyState === WebSocketState.OPEN) { const heartbeatMsg = JSON.stringify({ type: 'ping', timestamp: Date.now(), }); this.ws.send(heartbeatMsg); } } /** * 开始心跳超时检测 */ private startHeartbeatTimeout(): void { this.cleanupHeartbeatTimeout(); this.heartbeatTimeoutTimer = setTimeout(() => { console.warn('Heartbeat timeout, reconnecting...'); this.close(); this.handleReconnect(); }, this.config.heartbeatTimeout); } /** * 重置心跳（收到响应时调用） */ private resetHeartbeat(): void { this.cleanupHeartbeatTimeout(); } /** * 清理心跳定时器 */ private cleanupHeartbeat(): void { if (this.heartbeatTimer) { clearInterval(this.heartbeatTimer); this.heartbeatTimer = null; } this.cleanupHeartbeatTimeout(); } /** * 清理心跳超时定时器 */ private cleanupHeartbeatTimeout(): void { if (this.heartbeatTimeoutTimer) { clearTimeout(this.heartbeatTimeoutTimer); this.heartbeatTimeoutTimer = null; } } /** * 处理重连逻辑 */ private handleReconnect(): void { this.cleanupReconnectTimer(); // 达到最大重连次数 if (this.reconnectAttempts >= this.config.maxReconnectAttempts) { console.error('Max reconnection attempts reached'); return; } this.reconnectAttempts++; console.log(`Reconnecting... Attempt ${this.reconnectAttempts}/${this.config.maxReconnectAttempts}`); this.emit('reconnect', this.reconnectAttempts); // 指数退避算法：重连间隔逐渐增加 const delay = Math.min( this.config.reconnectInterval * Math.pow(1.5, this.reconnectAttempts - 1), 30000 // 最大30秒 ); this.reconnectTimer = setTimeout(() => { this.connect(); }, delay); } /** * 清理重连定时器 */ private cleanupReconnectTimer(): void { if (this.reconnectTimer) { clearTimeout(this.reconnectTimer); this.reconnectTimer = null; } } /** * 发送消息 */ public send(data: any): boolean { if (this.ws?.readyState !== WebSocketState.OPEN) { console.error('WebSocket is not connected'); return false; } try { const message = typeof data === 'string' ? data : JSON.stringify(data); this.ws.send(message); return true; } catch (error) { console.error('Send message error:', error); return false; } } /** * 手动关闭连接 */ public close(code?: number, reason?: string): void { this.isManualClose = true; this.cleanupHeartbeat(); this.cleanupReconnectTimer(); if (this.ws) { this.ws.close(code || 1000, reason); this.ws = null; } } /** * 获取连接状态 */ public getState(): WebSocketState { return this.ws?.readyState || WebSocketState.CLOSED; } /** * 添加事件监听 */ public on<T extends keyof typeof this.listeners>( event: T, callback: typeof this.listeners[T][number] ): void { this.listeners[event].push(callback as any); } /** * 移除事件监听 */ public off<T extends keyof typeof this.listeners>( event: T, callback: typeof this.listeners[T][number] ): void { const index = this.listeners[event].indexOf(callback as any); if (index > -1) { this.listeners[event].splice(index, 1); } } /** * 触发事件 */ private emit<T extends keyof typeof this.listeners>( event: T, ...args: Parameters<typeof this.listeners[T][number]> ): void { this.listeners[event].forEach(callback => { try { (callback as any)(...args); } catch (error) { console.error(`Error in ${event} event handler:`, error); } }); } /** * 销毁实例 */ public destroy(): void { this.close(); this.listeners = { open: [], message: [], close: [], error: [], reconnect: [], }; } }篇幅限制下面就只能给大家展示小册部分内容了。整理了一份核心面试笔记包括了：Java面试、Spring、JVM、MyBatis、Redis、MySQL、并发编程、微服务、Linux、Springboot、SpringCloud、MQ、Kafc
需要全套面试笔记及答案
【点击此处即可/免费获取】
2. React Hook封装（React + TypeScript）
typescript
复制
下载
import { useEffect, useRef, useCallback, useState } from 'react'; interface UseWebSocketOptions { onMessage?: (data: any) => void; onOpen?: (event: Event) => void; onClose?: (event: CloseEvent) => void; onError?: (event: Event) => void; onReconnect?: (attempt: number) => void; heartbeatInterval?: number; reconnectInterval?: number; } export const useWebSocket = ( url: string, options: UseWebSocketOptions = {} ) => { const wsManager = useRef<WebSocketManager | null>(null); const [isConnected, setIsConnected] = useState(false); const [reconnectCount, setReconnectCount] = useState(0); const connect = useCallback(() => { if (wsManager.current) { wsManager.current.destroy(); } wsManager.current = new WebSocketManager({ url, heartbeatInterval: options.heartbeatInterval, reconnectInterval: options.reconnectInterval, }); wsManager.current.on('open', (event) => { setIsConnected(true); setReconnectCount(0); options.onOpen?.(event); }); wsManager.current.on('message', (data) => { options.onMessage?.(data); }); wsManager.current.on('close', (event) => { setIsConnected(false); options.onClose?.(event); }); wsManager.current.on('error', (event) => { options.onError?.(event); }); wsManager.current.on('reconnect', (attempt) => { setReconnectCount(attempt); options.onReconnect?.(attempt); }); wsManager.current.connect(); }, [url, options]); const disconnect = useCallback(() => { wsManager.current?.close(); setIsConnected(false); }, []); const send = useCallback((data: any) => { return wsManager.current?.send(data) || false; }, []); // 自动连接和清理 useEffect(() => { connect(); return () => { wsManager.current?.destroy(); }; }, [connect]); // 网络状态变化监听 useEffect(() => { const handleOnline = () => { console.log('Network online, reconnecting...'); if (!isConnected) { connect(); } }; const handleOffline = () => { console.log('Network offline'); disconnect(); }; window.addEventListener('online', handleOnline); window.addEventListener('offline', handleOffline); return () => { window.removeEventListener('online', handleOnline); window.removeEventListener('offline', handleOffline); }; }, [connect, disconnect, isConnected]); return { isConnected, reconnectCount, send, connect, disconnect, }; }; // 使用示例 export const ChatComponent: React.FC = () => { const [messages, setMessages] = useState<string[]>([]); const { isConnected, send } = useWebSocket('wss://api.example.com/ws', { onMessage: (data) => { setMessages(prev => [...prev, data.content]); }, onReconnect: (attempt) => { console.log(`Reconnection attempt ${attempt}`); }, }); const handleSend = () => { send({ type: 'chat', content: 'Hello' }); }; return ( <div> <div>Status: {isConnected ? 'Connected' : 'Disconnected'}</div> <button onClick={handleSend} disabled={!isConnected}> Send Message </button> <div> {messages.map((msg, index) => ( <div key={index}>{msg}</div> ))} </div> </div> ); };3. 服务器端心跳处理（Node.js）
javascript
复制
下载
const WebSocket = require('ws'); class WebSocketServerWithHeartbeat { constructor(server) { this.wss = new WebSocket.Server({ server }); this.clients = new Map(); // clientId -> {ws, lastPing, isAlive} this.heartbeatInterval = 30000; this.maxMissedPings = 3; this.setup(); } setup() { this.wss.on('connection', (ws, request) => { const clientId = this.generateClientId(); console.log(`New connection: ${clientId}`); this.clients.set(clientId, { ws, lastPing: Date.now(), isAlive: true, }); // 发送欢迎消息 ws.send(JSON.stringify({ type: 'welcome', clientId, timestamp: Date.now(), })); // 消息处理 ws.on('message', (data) => { try { const message = JSON.parse(data); this.handleMessage(clientId, message); } catch (error) { console.error('Message parse error:', error); } }); // 心跳响应 ws.on('pong', () => { const client = this.clients.get(clientId); if (client) { client.isAlive = true; client.lastPing = Date.now(); } }); // 连接关闭 ws.on('close', () => { console.log(`Connection closed: ${clientId}`); this.clients.delete(clientId); }); // 错误处理 ws.on('error', (error) => { console.error(`WebSocket error for ${clientId}:`, error); this.clients.delete(clientId); }); }); // 定期心跳检测 setInterval(() => { this.checkHeartbeats(); }, this.heartbeatInterval); } handleMessage(clientId, message) { const client = this.clients.get(clientId); if (!client) return; switch (message.type) { case 'ping': // 心跳响应 client.ws.send(JSON.stringify({ type: 'pong', timestamp: Date.now(), })); client.isAlive = true; client.lastPing = Date.now(); break; case 'chat': // 广播消息 this.broadcast({ type: 'chat', clientId, content: message.content, timestamp: Date.now(), }); break; default: console.log(`Unknown message type: ${message.type}`); } } checkHeartbeats() { const now = Date.now(); for (const [clientId, client] of this.clients.entries()) { const timeSinceLastPing = now - client.lastPing; // 超过最大时间没有心跳 if (timeSinceLastPing > this.heartbeatInterval * this.maxMissedPings) { console.log(`Client ${clientId} heartbeat timeout, closing connection`); client.ws.terminate(); this.clients.delete(clientId); continue; } // 发送心跳检测 if (!client.isAlive) { console.log(`Client ${clientId} not responding to pings`); client.ws.terminate(); this.clients.delete(clientId); continue; } // 标记为需要检测，发送ping client.isAlive = false; try { client.ws.ping(); } catch (error) { console.error(`Ping error for ${clientId}:`, error); this.clients.delete(clientId); } } } broadcast(message) { const data = JSON.stringify(message); this.wss.clients.forEach((client) => { if (client.readyState === WebSocket.OPEN) { client.send(data); } }); } sendToClient(clientId, message) { const client = this.clients.get(clientId); if (client && client.ws.readyState === WebSocket.OPEN) { client.ws.send(JSON.stringify(message)); } } generateClientId() { return `client_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`; } getConnectedCount() { return this.clients.size; } } // 使用示例 const http = require('http'); const server = http.createServer(); const wssWithHeartbeat = new WebSocketServerWithHeartbeat(server); server.listen(8080, () => { console.log('WebSocket server with heartbeat listening on port 8080'); });4. 高级特性：连接质量监控
typescript
复制
下载
interface ConnectionMetrics { latency: number; // 延迟(ms) jitter: number; // 抖动(ms) packetLoss: number; // 丢包率(%) bandwidth: number; // 带宽(kbps) uptime: number; // 连接时长(ms) } class ConnectionMonitor { private metrics: ConnectionMetrics = { latency: 0, jitter: 0, packetLoss: 0, bandwidth: 0, uptime: 0, }; private latencySamples: number[] = []; private startTime: number = Date.now(); private sentPackets = 0; private receivedPackets = 0; recordLatency(latency: number) { this.latencySamples.push(latency); // 保留最近100个样本 if (this.latencySamples.length > 100) { this.latencySamples.shift(); } // 计算平均延迟 this.metrics.latency = this.latencySamples.reduce((a, b) => a + b, 0) / this.latencySamples.length; // 计算抖动（延迟的标准差） const variance = this.latencySamples.reduce((sum, sample) => { return sum + Math.pow(sample - this.metrics.latency, 2); }, 0) / this.latencySamples.length; this.metrics.jitter = Math.sqrt(variance); } recordPacket(sent: boolean) { if (sent) { this.sentPackets++; } else { this.receivedPackets++; } if (this.sentPackets > 0) { this.metrics.packetLoss = ((this.sentPackets - this.receivedPackets) / this.sentPackets) * 100; } } updateUptime() { this.metrics.uptime = Date.now() - this.startTime; } getMetrics(): ConnectionMetrics { this.updateUptime(); return { ...this.metrics }; } reset() { this.startTime = Date.now(); this.sentPackets = 0; this.receivedPackets = 0; this.latencySamples = []; this.metrics = { latency: 0, jitter: 0, packetLoss: 0, bandwidth: 0, uptime: 0, }; } } // 集成到WebSocketManager class EnhancedWebSocketManager extends WebSocketManager { private connectionMonitor = new ConnectionMonitor(); private metricsTimer: NodeJS.Timeout | null = null; // 重写发送心跳方法 protected sendHeartbeat(): void { if (this.ws?.readyState === WebSocketState.OPEN) { const sendTime = Date.now(); const heartbeatMsg = JSON.stringify({ type: 'ping', timestamp: sendTime, }); this.connectionMonitor.recordPacket(true); this.ws.send(heartbeatMsg); this.startHeartbeatTimeout(); } } // 处理心跳响应时记录延迟 protected resetHeartbeat(): void { super.resetHeartbeat(); // 假设在消息处理中记录了接收时间 const receiveTime = Date.now(); // 这里需要存储发送时间来计算延迟 } // 开始监控 startMetricsCollection() { this.metricsTimer = setInterval(() => { const metrics = this.connectionMonitor.getMetrics(); console.log('Connection metrics:', metrics); // 根据指标调整策略 if (metrics.packetLoss > 20) { console.warn('High packet loss, consider reducing message frequency'); } if (metrics.latency > 1000) { console.warn('High latency, adjusting heartbeat interval'); } }, 5000); } stopMetricsCollection() { if (this.metricsTimer) { clearInterval(this.metricsTimer); this.metricsTimer = null; } } }三、最佳实践与优化建议
1. 心跳参数配置建议
javascript
复制
下载
// 不同场景下的推荐配置 const configs = { // 实时聊天应用 CHAT: { heartbeatInterval: 25000, // 25秒 heartbeatTimeout: 10000, // 10秒 reconnectInterval: 2000, // 2秒 maxReconnectAttempts: 10, // 最多重连10次 }, // 实时数据监控 MONITORING: { heartbeatInterval: 15000, // 15秒 heartbeatTimeout: 5000, // 5秒 reconnectInterval: 1000, // 1秒 maxReconnectAttempts: 20, // 最多重连20次 }, // 游戏应用 GAMING: { heartbeatInterval: 10000, // 10秒 heartbeatTimeout: 3000, // 3秒 reconnectInterval: 500, // 0.5秒 maxReconnectAttempts: 5, // 最多重连5次 }, };2. 重连策略优化
typescript
复制
下载
// 智能重连策略 class SmartReconnectStrategy { private failures = 0; private lastFailureTime = 0; shouldReconnect(): boolean { const now = Date.now(); // 短时间内连续失败，可能是网络问题 if (now - this.lastFailureTime < 10000 && this.failures > 3) { console.log('Too many failures in short time, waiting...'); return false; } // 失败次数太多，可能是服务器问题 if (this.failures > 10) { console.log('Too many failures, giving up'); return false; } return true; } recordFailure() { this.failures++; this.lastFailureTime = Date.now(); // 逐渐重置失败计数 setTimeout(() => { if (this.failures > 0) { this.failures--; } }, 60000); // 每分钟减少一次失败计数 } recordSuccess() { this.failures = 0; } }3. 离线消息队列
typescript
复制
下载
class OfflineMessageQueue { private queue: Array<{data: any, timestamp: number}> = []; private maxQueueSize = 100; private maxAge = 5 * 60 * 1000; // 5分钟 addMessage(data: any) { // 清理过期消息 this.cleanup(); // 队列满时移除最旧的消息 if (this.queue.length >= this.maxQueueSize) { this.queue.shift(); } this.queue.push({ data, timestamp: Date.now(), }); } getMessages(): any[] { this.cleanup(); return this.queue.map(item => item.data); } clear() { this.queue = []; } private cleanup() { const now = Date.now(); this.queue = this.queue.filter(item => now - item.timestamp <= this.maxAge ); } } // 在WebSocketManager中使用 class WebSocketManagerWithQueue extends WebSocketManager { private offlineQueue = new OfflineMessageQueue(); send(data: any): boolean { const success = super.send(data); if (!success) { // 发送失败，存储到离线队列 this.offlineQueue.addMessage(data); return false; } return true; } protected onOpen(event: Event): void { super.onOpen(event); // 连接成功后发送离线消息 const offlineMessages = this.offlineQueue.getMessages(); offlineMessages.forEach(message => { super.send(message); }); this.offlineQueue.clear(); } }篇幅限制下面就只能给大家展示小册部分内容了。整理了一份核心面试笔记包括了：Java面试、Spring、JVM、MyBatis、Redis、MySQL、并发编程、微服务、Linux、Springboot、SpringCloud、MQ、Kafc
需要全套面试笔记及答案
【点击此处即可/免费获取】
四、常见问题与解决方案
问题1：心跳包增加了流量开销
解决方案：
使用二进制ping/pong帧（1字节）
动态调整心跳频率（根据网络质量）
允许客户端协商心跳间隔
问题2：重连风暴导致服务器压力
解决方案：
使用随机延迟避免同时重连
实现退避算法（exponential backoff）
服务器端限制重连频率
问题3：移动端网络切换
解决方案：
监听网络状态变化事件
网络恢复后延迟重连
使用短连接心跳确认网络质量
问题4：多标签页重复连接
解决方案：
typescript
复制
下载
// 使用BroadcastChannel或SharedWorker协调多标签页 class MultiTabWebSocketManager { private channel: BroadcastChannel; constructor() { this.channel = new BroadcastChannel('websocket_control'); this.channel.addEventListener('message', (event) => { if (event.data.type === 'tab_connected') { // 其他标签页已连接，本标签页保持只读 this.setReadonlyMode(); } }); // 通知其他标签页 this.channel.postMessage({ type: 'tab_connected' }); } }五、测试方案
typescript
复制
下载
// 模拟网络不稳定的测试工具 class NetworkSimulator { static async testWebSocket(wsManager: WebSocketManager) { // 测试正常连接 console.log('Test 1: Normal connection'); wsManager.connect(); await this.delay(2000); // 模拟网络中断 console.log('Test 2: Simulating network loss'); this.simulateNetworkLoss(); await this.delay(5000); // 恢复网络 console.log('Test 3: Network recovery'); this.restoreNetwork(); await this.delay(10000); // 模拟服务器重启 console.log('Test 4: Simulating server restart'); wsManager.close(1001, 'Server restart'); await this.delay(3000); // 验证自动重连 console.log('Test 5: Verifying auto-reconnect'); await this.delay(15000); } private static delay(ms: number) { return new Promise(resolve => setTimeout(resolve, ms)); } private static simulateNetworkLoss() { // 实际项目中可能需要修改网络配置 console.log('Network loss simulated'); } private static restoreNetwork() { console.log('Network restored'); } }六、总结
关键要点：
心跳检测：防止连接被中间设备断开，及时检测连接状态
自动重连：提供无缝的用户体验，减少手动干预
智能策略：根据网络质量动态调整参数
资源管理：及时清理无效连接和定时器
错误处理：优雅处理各种网络异常情况
推荐库：
客户端：
reconnecting-websocket、@gamestdio/websocket服务器端：
ws（Node.js）、gorilla/websocket（Go）、Spring WebSocket（Java）
通过以上实现，可以构建一个健壮、可靠的WebSocket连接，能够应对各种网络异常情况，提供良好的用户体验。