@ichaingo/web-socket 1.3.73 → 1.3.75

package/dist/useSocket.d.ts

@@ -0,0 +1,57 @@
+import { ConnectionStatus, WebSocketConfig, WebSocketEvents } from './index.js';
+/**
+ * useSocket Hook 的配置选项
+ */
+export interface UseSocketConfig extends WebSocketConfig {
+    autoConnect?: boolean;
+    reconnectOnMount?: boolean;
+}
+/**
+ * useSocket Hook 的返回值
+ */
+export interface UseSocketReturn {
+    status: ConnectionStatus;
+    isConnected: boolean;
+    connect: () => Promise<void>;
+    disconnect: () => void;
+    send: (data: string | ArrayBuffer | Blob) => boolean;
+    sendJSON: (data: unknown) => boolean;
+    on: <K extends keyof WebSocketEvents>(event: K, listener: WebSocketEvents[K]) => void;
+    off: <K extends keyof WebSocketEvents>(event: K) => void;
+    error: Event | null;
+    reconnectAttempts: number;
+    reconnect: () => void;
+}
+/**
+ * useSocket Hook
+ * 提供在React组件中使用WebSocket连接的便捷方法
+ *
+ * @param config WebSocket配置选项
+ * @returns useSocket的返回值对象
+ */
+export declare function useSocket(config: UseSocketConfig): UseSocketReturn;
+/**
+ * useSocketMessage Hook
+ * 专门用于监听特定类型消息的简化Hook
+ *
+ * @param config WebSocket配置选项
+ * @param messageHandler 消息处理函数
+ * @returns useSocket的返回值对象
+ */
+export declare function useSocketMessage<T = any>(config: UseSocketConfig, messageHandler: (data: T) => void): UseSocketReturn;
+/**
+ * useSocketStatus Hook
+ * 专门用于监听连接状态的简化Hook
+ *
+ * @param config WebSocket配置选项
+ * @returns 连接状态和状态变化回调
+ */
+export declare function useSocketStatus(config: UseSocketConfig): {
+    status: ConnectionStatus;
+    isConnected: boolean;
+    isConnecting: boolean;
+    isReconnecting: boolean;
+    isDisconnected: boolean;
+    hasError: boolean;
+};
+//# sourceMappingURL=useSocket.d.ts.map

package/dist/useSocket.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSocket.d.ts","sourceRoot":"","sources":["../src/useSocket.ts"],"names":[],"mappings":"AACA,OAAyB,EAAE,gBAAgB,EAAE,eAAe,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAElG;;GAEG;AACH,MAAM,WAAW,eAAgB,SAAQ,eAAe;IACtD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AAED;;GAEG;AACH,MAAM,WAAW,eAAe;IAE9B,MAAM,EAAE,gBAAgB,CAAC;IACzB,WAAW,EAAE,OAAO,CAAC;IAGrB,OAAO,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IAC7B,UAAU,EAAE,MAAM,IAAI,CAAC;IAGvB,IAAI,EAAE,CAAC,IAAI,EAAE,MAAM,GAAG,WAAW,GAAG,IAAI,KAAK,OAAO,CAAC;IACrD,QAAQ,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,OAAO,CAAC;IAGrC,EAAE,EAAE,CAAC,CAAC,SAAS,MAAM,eAAe,EAAE,KAAK,EAAE,CAAC,EAAE,QAAQ,EAAE,eAAe,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC;IACtF,GAAG,EAAE,CAAC,CAAC,SAAS,MAAM,eAAe,EAAE,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;IAGzD,KAAK,EAAE,KAAK,GAAG,IAAI,CAAC;IAGpB,iBAAiB,EAAE,MAAM,CAAC;IAG1B,SAAS,EAAE,MAAM,IAAI,CAAC;CACvB;AAED;;;;;;GAMG;AACH,wBAAgB,SAAS,CAAC,MAAM,EAAE,eAAe,GAAG,eAAe,CAiKlE;AAED;;;;;;;GAOG;AACH,wBAAgB,gBAAgB,CAAC,CAAC,GAAG,GAAG,EACtC,MAAM,EAAE,eAAe,EACvB,cAAc,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,GAChC,eAAe,CAmBjB;AAED;;;;;;GAMG;AACH,wBAAgB,eAAe,CAAC,MAAM,EAAE,eAAe;;;;;;;EAmBtD"}

package/dist/useSocket.js

@@ -0,0 +1,203 @@
+import { useEffect, useRef, useState, useCallback } from 'react';
+import SocketConnection, { ConnectionStatus } from './index.js';
+/**
+ * useSocket Hook
+ * 提供在React组件中使用WebSocket连接的便捷方法
+ *
+ * @param config WebSocket配置选项
+ * @returns useSocket的返回值对象
+ */
+export function useSocket(config) {
+    const [status, setStatus] = useState(ConnectionStatus.DISCONNECTED);
+    const [error, setError] = useState(null);
+    const [reconnectAttempts, setReconnectAttempts] = useState(0);
+    const socketRef = useRef(null);
+    const isInitializedRef = useRef(false);
+    const configRef = useRef(config);
+    // 更新配置引用
+    useEffect(() => {
+        configRef.current = config;
+    }, [config]);
+    // 获取或创建socket实例
+    const getSocket = useCallback(() => {
+        if (!socketRef.current) {
+            try {
+                socketRef.current = SocketConnection.getInstance(configRef.current);
+            }
+            catch (err) {
+                console.error('Failed to create socket instance:', err);
+                throw err;
+            }
+        }
+        return socketRef.current;
+    }, []);
+    // 连接WebSocket
+    const connect = useCallback(async () => {
+        try {
+            setError(null);
+            const socket = getSocket();
+            await socket.connect();
+        }
+        catch (err) {
+            const errorEvent = err;
+            setError(errorEvent);
+            throw err;
+        }
+    }, [getSocket]);
+    // 断开连接
+    const disconnect = useCallback(() => {
+        const socket = socketRef.current;
+        if (socket) {
+            socket.disconnect();
+        }
+    }, []);
+    // 发送消息
+    const send = useCallback((data) => {
+        const socket = socketRef.current;
+        if (socket) {
+            return socket.send(data);
+        }
+        return false;
+    }, []);
+    // 发送JSON消息
+    const sendJSON = useCallback((data) => {
+        const socket = socketRef.current;
+        if (socket) {
+            return socket.sendJSON(data);
+        }
+        return false;
+    }, []);
+    // 添加事件监听器
+    const on = useCallback((event, listener) => {
+        const socket = socketRef.current;
+        if (socket) {
+            socket.on(event, listener);
+        }
+    }, []);
+    // 移除事件监听器
+    const off = useCallback((event) => {
+        const socket = socketRef.current;
+        if (socket) {
+            socket.off(event);
+        }
+    }, []);
+    // 手动重连
+    const reconnect = useCallback(async () => {
+        disconnect();
+        await new Promise(resolve => setTimeout(resolve, 1000)); // 等待1秒
+        await connect();
+    }, [disconnect, connect]);
+    // 初始化socket和事件监听
+    useEffect(() => {
+        if (isInitializedRef.current)
+            return;
+        try {
+            const socket = getSocket();
+            // 监听状态变化
+            socket.on('statusChange', (newStatus) => {
+                setStatus(newStatus);
+                // 更新重连次数
+                if (newStatus === ConnectionStatus.RECONNECTING) {
+                    setReconnectAttempts(prev => prev + 1);
+                }
+                else if (newStatus === ConnectionStatus.CONNECTED) {
+                    setReconnectAttempts(0);
+                }
+            });
+            // 监听错误
+            socket.on('error', (errorEvent) => {
+                setError(errorEvent);
+            });
+            // 监听连接关闭
+            socket.on('close', () => {
+                setError(null);
+            });
+            isInitializedRef.current = true;
+        }
+        catch (err) {
+            console.error('Failed to initialize socket:', err);
+            setError(err);
+        }
+    }, [getSocket]);
+    // 自动连接
+    useEffect(() => {
+        if (config.autoConnect !== false && !isInitializedRef.current) {
+            connect().catch(console.error);
+        }
+    }, [config.autoConnect, connect]);
+    // 组件卸载时清理
+    useEffect(() => {
+        return () => {
+            const socket = socketRef.current;
+            if (socket && config.autoConnect !== false) {
+                socket.disconnect();
+            }
+        };
+    }, [config.autoConnect]);
+    // 检查是否已连接
+    const isConnected = status === ConnectionStatus.CONNECTED;
+    return {
+        status,
+        isConnected,
+        connect,
+        disconnect,
+        send,
+        sendJSON,
+        on,
+        off,
+        error,
+        reconnectAttempts,
+        reconnect,
+    };
+}
+/**
+ * useSocketMessage Hook
+ * 专门用于监听特定类型消息的简化Hook
+ *
+ * @param config WebSocket配置选项
+ * @param messageHandler 消息处理函数
+ * @returns useSocket的返回值对象
+ */
+export function useSocketMessage(config, messageHandler) {
+    const socket = useSocket(config);
+    useEffect(() => {
+        socket.on('message', (data) => {
+            try {
+                const parsedData = typeof data === 'string' ? JSON.parse(data) : data;
+                messageHandler(parsedData);
+            }
+            catch (err) {
+                console.error('Failed to parse message:', err);
+            }
+        });
+        return () => {
+            socket.off('message');
+        };
+    }, [socket, messageHandler]);
+    return socket;
+}
+/**
+ * useSocketStatus Hook
+ * 专门用于监听连接状态的简化Hook
+ *
+ * @param config WebSocket配置选项
+ * @returns 连接状态和状态变化回调
+ */
+export function useSocketStatus(config) {
+    const [status, setStatus] = useState(ConnectionStatus.DISCONNECTED);
+    const socket = useSocket(config);
+    useEffect(() => {
+        socket.on('statusChange', setStatus);
+        return () => {
+            socket.off('statusChange');
+        };
+    }, [socket]);
+    return {
+        status,
+        isConnected: status === ConnectionStatus.CONNECTED,
+        isConnecting: status === ConnectionStatus.CONNECTING,
+        isReconnecting: status === ConnectionStatus.RECONNECTING,
+        isDisconnected: status === ConnectionStatus.DISCONNECTED,
+        hasError: status === ConnectionStatus.ERROR,
+    };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ichaingo/web-socket",
-  "version": "1.3.73",
+  "version": "1.3.75",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",