JavaScript异步编程新范式：基于生成器的状态机实现与实战应用 | 前端深度教程

核心实现：WebSocket状态机

class WebSocketManager {
    constructor() {
        this.connections = new Map();
        this.connectionStates = new Map();
    }
    
    // 创建可管理的WebSocket连接
    createConnection(url, options = {}) {
        const connectionId = Symbol(url);
        
        // 创建状态机生成器
        const stateMachine = this.createWebSocketStateMachine(
            url, 
            options,
            connectionId
        );
        
        this.connections.set(connectionId, {
            generator: stateMachine,
            currentState: null,
            controller: new AbortController()
        });
        
        // 启动状态机
        this.runStateMachine(connectionId);
        
        return connectionId;
    }
    
    // WebSocket状态机生成器
    *createWebSocketStateMachine(url, options, connectionId) {
        let ws = null;
        let reconnectAttempts = 0;
        const maxReconnectAttempts = options.maxReconnectAttempts || 5;
        const messageQueue = [];
        let isPaused = false;
        
        // 初始状态
        yield { 
            status: 'INITIALIZING', 
            connectionId,
            url 
        };
        
        while (true) {
            try {
                // 连接阶段
                yield { 
                    status: 'CONNECTING', 
                    reconnectAttempts 
                };
                
                ws = new WebSocket(url);
                
                // 设置超时
                const connectionTimeout = setTimeout(() => {
                    ws.close();
                }, options.timeout || 10000);
                
                // 等待连接建立
                yield* this.awaitEvent(ws, 'open');
                clearTimeout(connectionTimeout);
                
                reconnectAttempts = 0;
                
                yield { 
                    status: 'CONNECTED', 
                    url,
                    timestamp: new Date().toISOString()
                };
                
                // 消息处理循环
                while (ws.readyState === WebSocket.OPEN) {
                    // 检查是否暂停
                    if (isPaused) {
                        yield { status: 'PAUSED' };
                        yield* this.awaitCondition(() => !isPaused);
                    }
                    
                    // 处理消息队列
                    if (messageQueue.length > 0) {
                        const message = messageQueue.shift();
                        ws.send(JSON.stringify(message));
                        yield { 
                            status: 'SENDING', 
                            messageId: message.id 
                        };
                    }
                    
                    // 等待消息或命令
                    const event = yield* this.awaitMultipleEvents(
                        ws, 
                        ['message', 'close', 'error'],
                        { timeout: 100 }
                    );
                    
                    if (event.type === 'message') {
                        yield { 
                            status: 'MESSAGE_RECEIVED', 
                            data: event.data,
                            timestamp: new Date().toISOString()
                        };
                    } else if (event.type === 'close' || event.type === 'error') {
                        break;
                    }
                }
                
            } catch (error) {
                yield { 
                    status: 'ERROR', 
                    error: error.message,
                    timestamp: new Date().toISOString()
                };
                
                // 重连逻辑
                if (reconnectAttempts  {
            const handler = (event) => {
                target.removeEventListener(eventName, handler);
                resolve(event);
            };
            target.addEventListener(eventName, handler);
        });
    }
    
    // 辅助方法：等待多个事件中的第一个
    *awaitMultipleEvents(target, eventNames, options = {}) {
        return new Promise((resolve, reject) => {
            const handlers = new Map();
            let timeoutId = null;
            
            if (options.timeout) {
                timeoutId = setTimeout(() => {
                    cleanup();
                    reject(new Error('Timeout waiting for events'));
                }, options.timeout);
            }
            
            const cleanup = () => {
                eventNames.forEach(eventName => {
                    if (handlers.has(eventName)) {
                        target.removeEventListener(eventName, handlers.get(eventName));
                    }
                });
                if (timeoutId) clearTimeout(timeoutId);
            };
            
            eventNames.forEach(eventName => {
                const handler = (event) => {
                    cleanup();
                    resolve({ type: eventName, data: event.data, event });
                };
                handlers.set(eventName, handler);
                target.addEventListener(eventName, handler);
            });
        });
    }
    
    // 辅助方法：延迟
    *delay(ms) {
        return new Promise(resolve => setTimeout(resolve, ms));
    }
    
    // 辅助方法：等待条件满足
    *awaitCondition(condition, checkInterval = 100) {
        while (!condition()) {
            yield* this.delay(checkInterval);
        }
    }
    
    // 运行状态机
    async runStateMachine(connectionId) {
        const connection = this.connections.get(connectionId);
        if (!connection) return;
        
        const { generator, controller } = connection;
        
        try {
            while (true) {
                if (controller.signal.aborted) {
                    generator.return(); // 终止生成器
                    break;
                }
                
                const result = await generator.next();
                
                if (result.done) {
                    this.connections.delete(connectionId);
                    break;
                }
                
                connection.currentState = result.value;
                
                // 触发状态变化事件
                this.emitStateChange(connectionId, result.value);
            }
        } catch (error) {
            console.error('State machine error:', error);
        }
    }
    
    // 发送消息到连接
    sendMessage(connectionId, message) {
        const connection = this.connections.get(connectionId);
        if (connection && connection.generator) {
            // 这里可以通过向生成器发送命令来处理消息
            // 实际实现中需要更复杂的消息队列管理
            connection.generator.next({
                type: 'SEND_MESSAGE',
                payload: message
            });
        }
    }
    
    // 暂停连接
    pauseConnection(connectionId) {
        const connection = this.connections.get(connectionId);
        if (connection && connection.generator) {
            connection.generator.next({
                type: 'PAUSE'
            });
        }
    }
    
    // 恢复连接
    resumeConnection(connectionId) {
        const connection = this.connections.get(connectionId);
        if (connection && connection.generator) {
            connection.generator.next({
                type: 'RESUME'
            });
        }
    }
    
    // 关闭连接
    closeConnection(connectionId) {
        const connection = this.connections.get(connectionId);
        if (connection) {
            connection.controller.abort();
            this.connections.delete(connectionId);
        }
    }
    
    // 状态变化事件
    emitStateChange(connectionId, state) {
        const event = new CustomEvent('websocket-state-change', {
            detail: { connectionId, state }
        });
        window.dispatchEvent(event);
    }
}