vf/vf_react
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat:. mockSocketService 添加 connecting 状态

Browse Source 
- 新增 connecting 标志防止重复连接
  - 在 connect() 方法中检查 connected 和 connecting 状态
  - 连接成功或失败后清除 connecting 标志\
2. NotificationContext 调整监听器注册顺序

  - 在 useEffect 中重新排序初始化步骤
  - 第一步：注册所有事件监听器（connect, disconnect, new_event 等）
  - 第二步：获取最大重连次数
  - 第三步：调用 socket.connect()
  - 使用空依赖数组 [] 防止 React 严格模式重复执行\
3. logger 添加日志限流

  - 实现 shouldLog() 函数，1秒内相同日志只输出一次
  - 使用 Map 缓存最近日志，带最大缓存限制（100条）
  - 应用到所有 logger 方法：info, warn, debug, api.request, api.response
  - 错误日志（error, api.error）不做限流，始终输出\
修复 emit 时机确保事件被接收

  - 在 mockSocketService 的 connect() 方法中
  - 使用 setTimeout(0) 延迟 emit(connect) 调用
  - 确保监听器注册完毕后再触发事件\
This commit is contained in:
zdl
2025-10-27 13:13:56 +08:00
parent 227e1c9d15
commit a9dc1191bf
5 changed files with 182 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
src/hooks/useEventNotifications.js
View File

@@ -22,7 +22,7 @@
*/
import { useEffect, useState, useRef } from 'react';
import { socketService } from '../services/socketService';
import socket from '../services/socket';
import { logger } from '../utils/logger';
export const useEventNotifications = (options = {}) => {
@@ -80,16 +80,16 @@ export const useEventNotifications = (options = {}) => {
};
// 监听连接事件（必须在connect之前设置，否则可能错过事件）
socketService.on('connect', handleConnect);
socketService.on('disconnect', handleDisconnect);
socketService.on('connect_error', handleConnectError);
socket.on('connect', handleConnect);
socket.on('disconnect', handleDisconnect);
socket.on('connect_error', handleConnectError);
// 连接 WebSocket
console.log('[useEventNotifications DEBUG] 准备连接 WebSocket...');
logger.info('useEventNotifications', 'Initializing WebSocket connection');
// 先检查是否已经连接
const alreadyConnected = socketService.isConnected();
const alreadyConnected = socket.connected || false;
console.log('[useEventNotifications DEBUG] 当前连接状态:', alreadyConnected);
logger.info('useEventNotifications', 'Pre-connection check', { isConnected: alreadyConnected });
@@ -99,7 +99,7 @@ export const useEventNotifications = (options = {}) => {
setIsConnected(true);
} else {
// 否则建立新连接
socketService.connect();
socket.connect();
}
// 新事件处理函数 - 使用 ref 中的回调
@@ -131,21 +131,28 @@ export const useEventNotifications = (options = {}) => {
console.log('[useEventNotifications DEBUG] importance:', importance);
console.log('[useEventNotifications DEBUG] enabled:', enabled);
socketService.subscribeToEvents({
eventType,
importance,
onNewEvent: handleNewEvent,
onSubscribed: (data) => {
console.log('\n[useEventNotifications DEBUG] ========== 订阅成功回调 ==========');
console.log('[useEventNotifications DEBUG] 订阅数据:', data);
console.log('[useEventNotifications DEBUG] ========== 订阅成功处理完成 ==========\n');
},
});
console.log('[useEventNotifications DEBUG] ========== 订阅请求已发送 ==========\n');
// 检查 socket 是否有 subscribeToEvents 方法（mockSocketService 和 socketService 都有）
if (socket.subscribeToEvents) {
socket.subscribeToEvents({
eventType,
importance,
onNewEvent: handleNewEvent,
onSubscribed: (data) => {
console.log('\n[useEventNotifications DEBUG] ========== 订阅成功回调 ==========');
console.log('[useEventNotifications DEBUG] 订阅数据:', data);
console.log('[useEventNotifications DEBUG] ========== 订阅成功处理完成 ==========\n');
},
});
console.log('[useEventNotifications DEBUG] ========== 订阅请求已发送 ==========\n');
} else {
console.warn('[useEventNotifications] socket.subscribeToEvents 方法不存在');
}
// 保存取消订阅函数
unsubscribeRef.current = () => {
socketService.unsubscribeFromEvents({ eventType });
if (socket.unsubscribeFromEvents) {
socket.unsubscribeFromEvents({ eventType });
}
};
// 组件卸载时清理
@@ -160,14 +167,12 @@ export const useEventNotifications = (options = {}) => {
// 移除监听器
console.log('[useEventNotifications DEBUG] 移除事件监听器...');
socketService.off('connect', handleConnect);
socketService.off('disconnect', handleDisconnect);
socketService.off('connect_error', handleConnectError);
// 断开连接
console.log('[useEventNotifications DEBUG] 断开 WebSocket 连接...');
socketService.disconnect();
socket.off('connect', handleConnect);
socket.off('disconnect', handleDisconnect);
socket.off('connect_error', handleConnectError);
// 注意：不断开连接，因为 socket 是全局共享的
// 由 NotificationContext 统一管理连接生命周期
console.log('[useEventNotifications DEBUG] ========== 清理完成 ==========\n');
};
}, [eventType, importance, enabled]); // 移除 onNewEvent 依赖