@zhin.js/client 1.0.3 → 1.0.4

package/src/websocket/index.ts

@@ -1,193 +1,48 @@
-import { store, loadScripts, loadScript, unloadScript } from '../store'
 /**
- * WebSocket 客户端管理
- * 用于连接服务器并接收动态入口脚本
- * 脚本加载状态由 Redux store 管理
+ * WebSocket 客户端模块
+ * 提供统一的 WebSocket 连接管理、消息处理和 React Hook 接口
  */
 
-export interface WebSocketMessage {
-    type: 'sync' | 'add' | 'delete' | 'init-data' | 'data-update'
-    data?: {
-        key: string
-        value: any
-    }
-    timestamp?: number
-}
-
-export interface WebSocketManagerOptions {
-    url?: string
-    reconnectInterval?: number
-    maxReconnectAttempts?: number
-    onConnect?: () => void
-    onDisconnect?: () => void
-    onError?: (error: Event) => void
-    onMessage?: (message: WebSocketMessage) => void
-}
-
-export class WebSocketManager {
-    private ws: WebSocket | null = null
-    private url: string
-    private reconnectInterval: number
-    private maxReconnectAttempts: number
-    private reconnectAttempts = 0
-    private reconnectTimer: NodeJS.Timeout | null = null
-    private options: WebSocketManagerOptions
-
-    constructor(options: WebSocketManagerOptions = {}) {
-        const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:'
-        const host = window.location.host
-        
-        this.url = options.url || `${protocol}//${host}/server`
-        this.reconnectInterval = options.reconnectInterval || 3000
-        this.maxReconnectAttempts = options.maxReconnectAttempts || 10
-        this.options = options
-    }
-
-    /**
-     * 连接 WebSocket
-     */
-    connect() {
-        if (this.ws?.readyState === WebSocket.OPEN) return
-
-        try {
-            this.ws = new WebSocket(this.url)
-
-            this.ws.onopen = () => {
-                this.reconnectAttempts = 0
-                this.options.onConnect?.()
-            }
-
-            this.ws.onmessage = (event) => {
-                try {
-                    const message: WebSocketMessage = JSON.parse(event.data)
-                    this.handleMessage(message)
-                    this.options.onMessage?.(message)
-                } catch (error) {
-                    console.error('[WS] Parse error:', error)
-                }
-            }
-
-            this.ws.onclose = () => {
-                this.options.onDisconnect?.()
-                this.attemptReconnect()
-            }
-
-            this.ws.onerror = () => {
-                this.options.onError?.(new Event('error'))
-            }
-        } catch (error) {
-            this.attemptReconnect()
-        }
-    }
-
-    /**
-     * 处理服务器消息
-     */
-    private handleMessage(message: WebSocketMessage) {
-        switch (message.type) {
-            case 'sync':
-                // 同步所有入口 - dispatch 到 Redux
-                if (message.data?.key === 'entries') {
-                    const entries = Array.isArray(message.data.value) 
-                        ? message.data.value 
-                        : [message.data.value]
-                    store.dispatch({ type: 'script/syncEntries', payload: entries })
-                    // 使用 AsyncThunk 加载脚本
-                    store.dispatch(loadScripts(entries))
-                }
-                break
-
-            case 'add':
-                // 添加新入口 - dispatch 到 Redux
-                if (message.data?.key === 'entries') {
-                    store.dispatch({ type: 'script/addEntry', payload: message.data.value })
-                    // 使用 AsyncThunk 加载脚本
-                    store.dispatch(loadScript(message.data.value))
-                }
-                break
-
-            case 'delete':
-                // 删除入口 - dispatch 到 Redux
-                if (message.data?.key === 'entries') {
-                    store.dispatch({ type: 'script/removeEntry', payload: message.data.value })
-                    // 使用 AsyncThunk 卸载脚本
-                    store.dispatch(unloadScript(message.data.value))
-                }
-                break
-
-            case 'init-data':
-            case 'data-update':
-                break
-
-            default:
-                console.warn('[WS] Unknown type:', message.type)
-        }
-    }
-
-    /**
-     * 尝试重新连接
-     */
-    private attemptReconnect() {
-        if (this.reconnectAttempts >= this.maxReconnectAttempts) return
-
-        this.reconnectAttempts++
-        this.reconnectTimer = setTimeout(() => {
-            this.connect()
-        }, this.reconnectInterval)
-    }
-
-    /**
-     * 断开连接
-     */
-    disconnect() {
-        if (this.reconnectTimer) {
-            clearTimeout(this.reconnectTimer)
-            this.reconnectTimer = null
-        }
-
-        if (this.ws) {
-            this.ws.close()
-            this.ws = null
-        }
-    }
-
-    /**
-     * 发送消息
-     */
-    send(message: any) {
-        if (this.ws?.readyState === WebSocket.OPEN) {
-            this.ws.send(JSON.stringify(message))
-        }
-    }
-
-    /**
-     * 检查是否已连接
-     */
-    isConnected() {
-        return this.ws?.readyState === WebSocket.OPEN
-    }
-}
-
-// 创建全局单例并自动连接
-const globalWebSocketManager = new WebSocketManager()
-
-// 模块加载时自动连接
-if (typeof window !== 'undefined') {
-    globalWebSocketManager.connect()
-}
-
-/**
- * 获取全局 WebSocket 管理器
- */
-export function getWebSocketManager(): WebSocketManager {
-    return globalWebSocketManager
-}
-
-/**
- * 销毁全局 WebSocket 管理器
- */
-export function destroyWebSocketManager() {
-    globalWebSocketManager.disconnect()
-}
-
-export default WebSocketManager
+// ============================================================================
+// 类型定义
+// ============================================================================
+export * from './types'
+
+// ============================================================================
+// 核心类
+// ============================================================================
+export { WebSocketManager } from './manager'
+export { MessageHandler } from './messageHandler'
+
+// ============================================================================
+// 实例管理
+// ============================================================================
+export { 
+  getWebSocketManager, 
+  destroyWebSocketManager, 
+  resetWebSocketManager 
+} from './instance'
+
+// ============================================================================
+// React Hooks
+// ============================================================================
+export { 
+  useWebSocket,
+  useConfig,
+  useAllConfigs,
+  useWebSocketState,
+  useWebSocketMessages
+} from './hooks'
+
+// ============================================================================
+// 向后兼容的导出（保持与旧代码的兼容性）
+// ============================================================================
+
+// 为了保持与现有代码的兼容性，重新导出一些常用的接口
+import { getWebSocketManager } from './instance'
+
+// 兼容旧的 useConfig 导出
+export { useConfig as useConfigLegacy } from './hooks'
+
+// 兼容旧的 WebSocketManager 默认导出
+export default getWebSocketManager

package/src/websocket/instance.ts

@@ -0,0 +1,46 @@
+/**
+ * WebSocket 实例管理
+ * 提供全局 WebSocket 管理器单例
+ */
+
+import { WebSocketManager } from './manager'
+
+// ============================================================================
+// 全局实例
+// ============================================================================
+
+let globalWebSocketManager: WebSocketManager | null = null
+
+/**
+ * 获取全局 WebSocket 管理器实例
+ */
+export function getWebSocketManager(): WebSocketManager {
+  if (!globalWebSocketManager) {
+    globalWebSocketManager = new WebSocketManager()
+    
+    // 浏览器环境下自动连接
+    if (typeof window !== 'undefined') {
+      globalWebSocketManager.connect()
+    }
+  }
+  
+  return globalWebSocketManager
+}
+
+/**
+ * 销毁全局 WebSocket 管理器
+ */
+export function destroyWebSocketManager(): void {
+  if (globalWebSocketManager) {
+    globalWebSocketManager.disconnect()
+    globalWebSocketManager = null
+  }
+}
+
+/**
+ * 重置 WebSocket 管理器（主要用于测试）
+ */
+export function resetWebSocketManager(): void {
+  destroyWebSocketManager()
+  // 下次调用 getWebSocketManager() 时会创建新实例
+}

package/src/websocket/manager.ts

@@ -0,0 +1,412 @@
+/**
+ * WebSocket 核心管理器
+ * 负责 WebSocket 连接管理、消息发送、重连逻辑等核心功能
+ */
+
+import { store, setConnected, updateConfigs, updateSchemas } from '../store'
+import { MessageHandler } from './messageHandler'
+import type {
+  WebSocketMessage,
+  WebSocketConfig,
+  WebSocketCallbacks
+} from './types'
+import {
+  ConnectionState,
+  WebSocketError,
+  ConnectionError,
+  MessageError,
+  RequestTimeoutError
+} from './types'
+
+export class WebSocketManager {
+  // ============================================================================
+  // 私有属性
+  // ============================================================================
+  
+  private ws: WebSocket | null = null
+  private config: Required<WebSocketConfig>
+  private callbacks: WebSocketCallbacks
+  private state: ConnectionState = ConnectionState.DISCONNECTED
+  
+  // 重连相关
+  private reconnectAttempts = 0
+  private reconnectTimer: NodeJS.Timeout | null = null
+  
+  // 请求管理
+  private requestId = 0
+  private pendingRequests = new Map<number, { 
+    resolve: (value: any) => void
+    reject: (error: Error) => void
+    timer: NodeJS.Timeout
+  }>()
+
+  // ============================================================================
+  // 构造函数
+  // ============================================================================
+
+  constructor(config: WebSocketConfig = {}, callbacks: WebSocketCallbacks = {}) {
+    this.config = {
+      url: this.buildWebSocketUrl(config.url),
+      reconnectInterval: config.reconnectInterval ?? 3000,
+      maxReconnectAttempts: config.maxReconnectAttempts ?? 10,
+      requestTimeout: config.requestTimeout ?? 10000
+    }
+    this.callbacks = callbacks
+  }
+
+  // ============================================================================
+  // 公共 API
+  // ============================================================================
+
+  /**
+   * 建立 WebSocket 连接
+   */
+  connect(): void {
+    if (this.state === ConnectionState.CONNECTED || this.state === ConnectionState.CONNECTING) {
+      return
+    }
+
+    this.setState(ConnectionState.CONNECTING)
+    
+    try {
+      this.ws = new WebSocket(this.config.url)
+      this.attachEventHandlers()
+    } catch (error) {
+      this.handleConnectionError(new ConnectionError('Failed to create WebSocket', error as Error))
+    }
+  }
+
+  /**
+   * 断开 WebSocket 连接
+   */
+  disconnect(): void {
+    this.clearReconnectTimer()
+    this.clearPendingRequests()
+    
+    if (this.ws) {
+      this.ws.close()
+      this.ws = null
+    }
+    
+    this.setState(ConnectionState.DISCONNECTED)
+    store.dispatch(setConnected(false))
+  }
+
+  /**
+   * 发送普通消息
+   */
+  send(message: any): void {
+    if (!this.isConnected()) {
+      throw new WebSocketError('WebSocket is not connected', 'NOT_CONNECTED')
+    }
+
+    try {
+      this.ws!.send(JSON.stringify(message))
+    } catch (error) {
+      throw new MessageError('Failed to send message', error as Error)
+    }
+  }
+
+  /**
+   * 发送请求并等待响应
+   */
+  async sendRequest<T = any>(message: any): Promise<T> {
+    if (!this.isConnected()) {
+      throw new WebSocketError('WebSocket is not connected', 'NOT_CONNECTED')
+    }
+
+    return new Promise((resolve, reject) => {
+      const requestId = ++this.requestId
+      const messageWithId = { ...message, requestId }
+      
+      // 设置超时计时器
+      const timer = setTimeout(() => {
+        this.pendingRequests.delete(requestId)
+        reject(new RequestTimeoutError(requestId))
+      }, this.config.requestTimeout)
+
+      // 存储请求信息
+      this.pendingRequests.set(requestId, { resolve, reject, timer })
+
+      try {
+        this.ws!.send(JSON.stringify(messageWithId))
+      } catch (error) {
+        this.pendingRequests.delete(requestId)
+        clearTimeout(timer)
+        reject(new MessageError('Failed to send request', error as Error))
+      }
+    })
+  }
+
+  /**
+   * 检查连接状态
+   */
+  isConnected(): boolean {
+    return this.ws?.readyState === WebSocket.OPEN
+  }
+
+  /**
+   * 获取当前状态
+   */
+  getState(): ConnectionState {
+    return this.state
+  }
+
+  // ============================================================================
+  // 配置管理 API
+  // ============================================================================
+
+  /**
+   * 获取插件配置
+   */
+  async getConfig(pluginName: string): Promise<any> {
+    return this.sendRequest({
+      type: 'config:get',
+      pluginName
+    })
+  }
+
+  /**
+   * 设置插件配置
+   */
+  async setConfig(pluginName: string, config: any): Promise<void> {
+    await this.sendRequest({
+      type: 'config:set',
+      pluginName,
+      data: config
+    })
+  }
+
+  /**
+   * 获取插件 Schema
+   */
+  async getSchema(pluginName: string): Promise<any> {
+    return this.sendRequest({
+      type: 'schema:get',
+      pluginName
+    })
+  }
+
+  /**
+   * 获取所有配置
+   */
+  async getAllConfigs(): Promise<Record<string, any>> {
+    return this.sendRequest({
+      type: 'config:get-all'
+    })
+  }
+
+  /**
+   * 获取所有 Schema
+   */
+  async getAllSchemas(): Promise<Record<string, any>> {
+    return this.sendRequest({
+      type: 'schema:get-all'
+    })
+  }
+
+  // ============================================================================
+  // 私有方法
+  // ============================================================================
+
+  /**
+   * 构建 WebSocket URL
+   */
+  private buildWebSocketUrl(customUrl?: string): string {
+    if (customUrl) {
+      return customUrl
+    }
+
+    const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:'
+    const host = window.location.host
+    return `${protocol}//${host}/server`
+  }
+
+  /**
+   * 设置连接状态
+   */
+  private setState(newState: ConnectionState): void {
+    const oldState = this.state
+    this.state = newState
+    
+    console.log(`[WebSocket] State changed: ${oldState} -> ${newState}`)
+  }
+
+  /**
+   * 绑定事件处理器
+   */
+  private attachEventHandlers(): void {
+    if (!this.ws) return
+
+    this.ws.onopen = () => {
+      this.handleConnectionOpen()
+    }
+
+    this.ws.onmessage = (event) => {
+      this.handleMessage(event)
+    }
+
+    this.ws.onclose = (event) => {
+      this.handleConnectionClose(event)
+    }
+
+    this.ws.onerror = (event) => {
+      this.handleConnectionError(new ConnectionError('WebSocket error', event as any))
+    }
+  }
+
+  /**
+   * 处理连接打开
+   */
+  private handleConnectionOpen(): void {
+    this.setState(ConnectionState.CONNECTED)
+    this.reconnectAttempts = 0
+    
+    // 更新 Redux 状态
+    store.dispatch(setConnected(true))
+    
+    // 初始化数据
+    this.initializeData()
+    
+    // 触发回调
+    this.callbacks.onConnect?.()
+  }
+
+  /**
+   * 处理消息接收
+   */
+  private handleMessage(event: MessageEvent): void {
+    try {
+      const message: WebSocketMessage = JSON.parse(event.data)
+      
+      // 处理请求响应
+      if (message.requestId && this.pendingRequests.has(message.requestId)) {
+        this.handleRequestResponse(message)
+        return
+      }
+
+      // 处理广播消息
+      MessageHandler.handle(message)
+      this.callbacks.onMessage?.(message)
+      
+    } catch (error) {
+      console.error('[WebSocket] Message parsing error:', error)
+    }
+  }
+
+  /**
+   * 处理请求响应
+   */
+  private handleRequestResponse(message: any): void {
+    const { requestId } = message
+    const pendingRequest = this.pendingRequests.get(requestId)
+    
+    if (!pendingRequest) {
+      return
+    }
+
+    this.pendingRequests.delete(requestId)
+    clearTimeout(pendingRequest.timer)
+
+    if (message.error) {
+      pendingRequest.reject(new WebSocketError(message.error, 'SERVER_ERROR'))
+    } else {
+      pendingRequest.resolve(message.data)
+    }
+  }
+
+  /**
+   * 处理连接关闭
+   */
+  private handleConnectionClose(event: CloseEvent): void {
+    this.ws = null
+    store.dispatch(setConnected(false))
+    
+    if (this.state === ConnectionState.DISCONNECTED) {
+      // 主动断开，不重连
+      return
+    }
+
+    this.setState(ConnectionState.RECONNECTING)
+    this.callbacks.onDisconnect?.()
+    this.scheduleReconnect()
+  }
+
+  /**
+   * 处理连接错误
+   */
+  private handleConnectionError(error: Error): void {
+    this.setState(ConnectionState.ERROR)
+    console.error('[WebSocket] Connection error:', error)
+    this.callbacks.onError?.(error as any)
+  }
+
+  /**
+   * 安排重连
+   */
+  private scheduleReconnect(): void {
+    if (this.reconnectAttempts >= this.config.maxReconnectAttempts) {
+      console.error('[WebSocket] Max reconnect attempts reached')
+      this.setState(ConnectionState.ERROR)
+      return
+    }
+
+    this.reconnectAttempts++
+    const delay = this.config.reconnectInterval * this.reconnectAttempts
+
+    console.log(`[WebSocket] Reconnecting in ${delay}ms (attempt ${this.reconnectAttempts}/${this.config.maxReconnectAttempts})`)
+
+    this.reconnectTimer = setTimeout(() => {
+      if (this.state === ConnectionState.RECONNECTING) {
+        this.connect()
+      }
+    }, delay)
+  }
+
+  /**
+   * 清除重连计时器
+   */
+  private clearReconnectTimer(): void {
+    if (this.reconnectTimer) {
+      clearTimeout(this.reconnectTimer)
+      this.reconnectTimer = null
+    }
+  }
+
+  /**
+   * 清除所有待处理请求
+   */
+  private clearPendingRequests(): void {
+    for (const [requestId, { reject, timer }] of this.pendingRequests) {
+      clearTimeout(timer)
+      reject(new WebSocketError('Connection closed', 'CONNECTION_CLOSED'))
+    }
+    this.pendingRequests.clear()
+  }
+
+  /**
+   * 初始化数据
+   */
+  private async initializeData(): Promise<void> {
+    try {
+      // 并行获取所有配置和 Schema
+      const [configs, schemas] = await Promise.all([
+        this.getAllConfigs().catch(error => {
+          console.warn('[WebSocket] Failed to load configs:', error)
+          return {}
+        }),
+        this.getAllSchemas().catch(error => {
+          console.warn('[WebSocket] Failed to load schemas:', error)
+          return {}
+        })
+      ])
+
+      // 更新 Redux 状态
+      store.dispatch(updateConfigs(configs))
+      store.dispatch(updateSchemas(schemas))
+      
+    } catch (error) {
+      console.error('[WebSocket] Data initialization failed:', error)
+    }
+  }
+}