feat: 通知调试能力

src/devtools/socketDebugger.js

@@ -0,0 +1,194 @@
+// 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;