[dev]notificationcenter update

src/components/NotificationCenter.jsx

@@ -39,16 +39,14 @@ export default function NotificationCenter({ show, onClose }) {
 
     // 初始化WebSocket连接
     useEffect(() => {
-        // 只有在用户已登录的情况下才连接WebSocket
+        // 只有在用户已登录且WebSocket未连接的情况下才连接WebSocket
         if (isAuthenticated && !isConnected) {
             initWebSocket()
                 .then(() => {
-                    dispatch(setWebSocketConnected(true));
                     console.log('Successfully connected to notification WebSocket');
                 })
                 .catch((error) => {
                     console.error('Failed to connect to notification WebSocket:', error);
-                    dispatch(setWebSocketConnected(false));
                     // 可以在这里显示连接失败的通知
                     dispatch(
                         showNotification({
@@ -63,7 +61,6 @@ export default function NotificationCenter({ show, onClose }) {
         return () => {
             if (isConnected) {
                 closeWebSocket();
-                dispatch(setWebSocketConnected(false));
             }
         };
     }, [isAuthenticated, isConnected, dispatch]);

src/services/websocket.js

@@ -1,4 +1,8 @@
-import { addNotification, markNotificationAsRead } from '../store/notificationCenter/notificationCenter.slice';
+import {
+    addNotification,
+    markNotificationAsRead,
+    setWebSocketConnected,
+} from '../store/notificationCenter/notificationCenter.slice';
 import store from '../store/store'; // 修改为默认导出
 import CryptoJS from 'crypto-js';
 
@@ -38,6 +42,7 @@ export const initWebSocket = () => {
             let token = '';
             if (!encryptedToken) {
                 console.error('No token found, cannot connect to notification service');
+                store.dispatch(setWebSocketConnected(false));
                 reject(new Error('No token found'));
                 return;
             }
@@ -53,6 +58,9 @@ export const initWebSocket = () => {
                 console.log('WebSocket connection established');
                 reconnectAttempts = 0; // 连接成功后重置重连计数器
 
+                // 更新Redux中的连接状态
+                store.dispatch(setWebSocketConnected(true));
+
                 // 订阅通知频道
                 subscribeToNotifications();
 
@@ -79,6 +87,8 @@ export const initWebSocket = () => {
             // 错误处理
             socket.onerror = (error) => {
                 console.error('WebSocket error:', error);
+                // 更新Redux中的连接状态
+                store.dispatch(setWebSocketConnected(false));
                 reject(error);
             };
 
@@ -86,6 +96,9 @@ export const initWebSocket = () => {
             socket.onclose = (event) => {
                 console.log(`WebSocket connection closed: ${event.code} ${event.reason}`);
 
+                // 更新Redux中的连接状态
+                store.dispatch(setWebSocketConnected(false));
+
                 // 清除ping定时器
                 if (pingInterval) clearInterval(pingInterval);
 
@@ -99,15 +112,21 @@ export const initWebSocket = () => {
                             console.log('Attempting to reconnect WebSocket...');
                             initWebSocket().catch((err) => {
                                 console.error('Failed to reconnect WebSocket:', err);
+                                // 重连失败时更新Redux中的连接状态
+                                store.dispatch(setWebSocketConnected(false));
                             });
                         }, RECONNECT_DELAY);
                     } else {
                         console.log('Maximum reconnection attempts reached. Giving up.');
+                        // 达到最大重连次数时更新Redux中的连接状态
+                        store.dispatch(setWebSocketConnected(false));
                     }
                 }
             };
         } catch (error) {
             console.error('Error initializing WebSocket:', error);
+            // 更新Redux中的连接状态
+            store.dispatch(setWebSocketConnected(false));
             reject(error);
         }
     });
@@ -173,6 +192,9 @@ export const closeWebSocket = () => {
         clearInterval(pingInterval);
         pingInterval = null;
     }
+
+    // 更新Redux中的连接状态
+    store.dispatch(setWebSocketConnected(false));
 };
 
 /**