// src/debug/socketDebugger.js /** * Socket 调试工具 * 扩展现有的 window.__SOCKET_DEBUG__,添加更多生产环境调试能力 */ import { socket } from '@services/socket'; class SocketDebugger { constructor() { this.eventLog = []; this.maxLogSize = 100; } /** * 初始化调试工具 */ init() { // 监听所有 Socket 事件 this._attachEventListeners(); console.log('%c[Socket Debugger] Initialized', 'color: #FF9800; font-weight: bold;'); } /** * 附加事件监听器 */ _attachEventListeners() { const events = [ 'connect', 'disconnect', 'connect_error', 'reconnect', 'reconnect_failed', 'new_event', 'system_notification', ]; events.forEach((event) => { socket.on(event, (data) => { this.logEvent(event, data); }); }); } /** * 记录 Socket 事件 */ logEvent(eventType, data) { const logEntry = { type: eventType, timestamp: new Date().toISOString(), data, }; this.eventLog.unshift(logEntry); if (this.eventLog.length > this.maxLogSize) { this.eventLog = this.eventLog.slice(0, this.maxLogSize); } console.log( `%c[Socket Event] ${eventType}`, 'color: #00BCD4; font-weight: bold;', data ); } /** * 获取所有事件日志 */ getLogs() { return this.eventLog; } /** * 清空日志 */ clearLogs() { this.eventLog = []; console.log('[Socket Debugger] Logs cleared'); } /** * 导出日志 */ exportLogs() { const blob = new Blob([JSON.stringify(this.eventLog, null, 2)], { type: 'application/json', }); const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = `socket-logs-${Date.now()}.json`; a.click(); URL.revokeObjectURL(url); console.log('[Socket Debugger] Logs exported'); } /** * 获取连接状态 */ getStatus() { const status = { connected: socket.connected || false, type: window.SOCKET_TYPE || 'UNKNOWN', reconnectAttempts: socket.getReconnectAttempts?.() || 0, maxReconnectAttempts: socket.getMaxReconnectAttempts?.() || Infinity, }; console.table(status); return status; } /** * 手动触发连接 */ connect() { console.log('[Socket Debugger] Manually connecting...'); socket.connect(); } /** * 手动断开连接 */ disconnect() { console.log('[Socket Debugger] Manually disconnecting...'); socket.disconnect(); } /** * 手动重连 */ reconnect() { console.log('[Socket Debugger] Manually reconnecting...'); socket.disconnect(); setTimeout(() => { socket.connect(); }, 1000); } /** * 发送测试事件 */ emitTest(eventName, data = {}) { console.log(`[Socket Debugger] Emitting test event: ${eventName}`, data); socket.emit(eventName, data); } /** * 打印事件统计 */ printStats() { const stats = { total: this.eventLog.length, byType: {}, }; this.eventLog.forEach((log) => { stats.byType[log.type] = (stats.byType[log.type] || 0) + 1; }); console.log('=== Socket Stats ==='); console.table(stats.byType); console.log(`Total events: ${stats.total}`); return stats; } /** * 按类型过滤日志 */ getLogsByType(eventType) { return this.eventLog.filter((log) => log.type === eventType); } /** * 获取最近的事件 */ getRecentEvents(count = 10) { return this.eventLog.slice(0, count); } /** * 获取错误事件 */ getErrors() { return this.eventLog.filter( (log) => log.type === 'connect_error' || log.type === 'reconnect_failed' ); } } // 导出单例 export const socketDebugger = new SocketDebugger(); export default socketDebugger;