vf_react/src/devtools/socketDebugger.js

// 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;