添加socketservice

src/hooks/useEventNotifications.js

@@ -0,0 +1,161 @@
+// src/hooks/useEventNotifications.js
+/**
+ * React Hook：用于在组件中订阅事件推送通知
+ *
+ * 使用示例：
+ * ```jsx
+ * import { useEventNotifications } from 'hooks/useEventNotifications';
+ *
+ * function MyComponent() {
+ *   const { newEvent, isConnected } = useEventNotifications({
+ *     eventType: 'all',
+ *     importance: 'all',
+ *     onNewEvent: (event) => {
+ *       console.log('收到新事件:', event);
+ *       // 显示通知...
+ *     }
+ *   });
+ *
+ *   return <div>...</div>;
+ * }
+ * ```
+ */
+
+import { useEffect, useState, useRef } from 'react';
+import { socketService } from '../services/socketService';
+
+export const useEventNotifications = (options = {}) => {
+    const {
+        eventType = 'all',
+        importance = 'all',
+        enabled = true,
+        onNewEvent,
+    } = options;
+
+    const [isConnected, setIsConnected] = useState(false);
+    const [newEvent, setNewEvent] = useState(null);
+    const [error, setError] = useState(null);
+    const unsubscribeRef = useRef(null);
+
+    useEffect(() => {
+        // 如果禁用，则不订阅
+        if (!enabled) {
+            return;
+        }
+
+        // 连接状态监听
+        const handleConnect = () => {
+            setIsConnected(true);
+            setError(null);
+        };
+
+        const handleDisconnect = () => {
+            setIsConnected(false);
+        };
+
+        const handleConnectError = (err) => {
+            setError(err);
+            setIsConnected(false);
+        };
+
+        // 连接 WebSocket
+        socketService.connect();
+
+        // 监听连接事件
+        socketService.on('connect', handleConnect);
+        socketService.on('disconnect', handleDisconnect);
+        socketService.on('connect_error', handleConnectError);
+
+        // 新事件处理函数
+        const handleNewEvent = (eventData) => {
+            setNewEvent(eventData);
+
+            // 调用外部回调
+            if (onNewEvent) {
+                onNewEvent(eventData);
+            }
+        };
+
+        // 订阅事件推送
+        socketService.subscribeToEvents({
+            eventType,
+            importance,
+            onNewEvent: handleNewEvent,
+            onSubscribed: (data) => {
+                console.log('订阅成功:', data);
+            },
+        });
+
+        // 保存取消订阅函数
+        unsubscribeRef.current = () => {
+            socketService.unsubscribeFromEvents({ eventType });
+        };
+
+        // 组件卸载时清理
+        return () => {
+            console.log('清理 WebSocket 订阅');
+
+            // 取消订阅
+            if (unsubscribeRef.current) {
+                unsubscribeRef.current();
+            }
+
+            // 移除监听器
+            socketService.off('connect', handleConnect);
+            socketService.off('disconnect', handleDisconnect);
+            socketService.off('connect_error', handleConnectError);
+
+            // 断开连接
+            socketService.disconnect();
+        };
+    }, [eventType, importance, enabled, onNewEvent]);
+
+    return {
+        newEvent,          // 最新收到的事件
+        isConnected,       // WebSocket 连接状态
+        error,             // 错误信息
+        clearNewEvent: () => setNewEvent(null), // 清除新事件状态
+    };
+};
+
+/**
+ * 简化版 Hook：只订阅所有事件
+ */
+export const useAllEventNotifications = (onNewEvent) => {
+    return useEventNotifications({
+        eventType: 'all',
+        importance: 'all',
+        onNewEvent,
+    });
+};
+
+/**
+ * Hook：订阅重要事件（S 和 A 级）
+ */
+export const useImportantEventNotifications = (onNewEvent) => {
+    const [importantEvents, setImportantEvents] = useState([]);
+
+    const handleEvent = (event) => {
+        // 只处理 S 和 A 级事件
+        if (event.importance === 'S' || event.importance === 'A') {
+            setImportantEvents(prev => [event, ...prev].slice(0, 10)); // 最多保留 10 个
+            if (onNewEvent) {
+                onNewEvent(event);
+            }
+        }
+    };
+
+    const result = useEventNotifications({
+        eventType: 'all',
+        importance: 'all',
+        onNewEvent: handleEvent,
+    });
+
+    return {
+        ...result,
+        importantEvents,
+        clearImportantEvents: () => setImportantEvents([]),
+    };
+};
+
+export default useEventNotifications;