perf: Socket 连接异步化，使用 requestIdleCallback 不阻塞首屏
- NotificationContext: 将 Socket 初始化包裹在 requestIdleCallback 中 - 设置 3 秒超时保护，确保连接不会被无限延迟 - 不支持 requestIdleCallback 的浏览器自动降级到 setTimeout(0) - socket/index.js: 移除模块加载时的 console.log，减少首屏阻塞感知 - 所有页面的首屏渲染都不再被 Socket 连接阻塞 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
zdl
@@ -649,183 +649,213 @@ export const NotificationProvider = ({ children }) => {
|
||||
}, [adaptEventToNotification]);
|
||||
|
||||
|
||||
// ========== 连接到 Socket 服务（⚡ 方案2: 只执行一次） ==========
|
||||
// ========== 连接到 Socket 服务（⚡ 异步初始化，不阻塞首屏） ==========
|
||||
useEffect(() => {
|
||||
logger.info('NotificationContext', '初始化 Socket 连接（方案2：只注册一次）');
|
||||
let cleanupCalled = false;
|
||||
let idleCallbackId;
|
||||
let timeoutId;
|
||||
|
||||
// ========== 监听连接成功（首次连接 + 重连） ==========
|
||||
socket.on('connect', () => {
|
||||
setIsConnected(true);
|
||||
setReconnectAttempt(0);
|
||||
// ⚡ Socket 初始化函数（将在浏览器空闲时执行）
|
||||
const initSocketConnection = () => {
|
||||
if (cleanupCalled) return; // 防止组件卸载后执行
|
||||
|
||||
// 判断是首次连接还是重连
|
||||
if (isFirstConnect.current) {
|
||||
logger.info('NotificationContext', '首次连接成功', {
|
||||
socketId: socket.getSocketId?.()
|
||||
});
|
||||
setConnectionStatus(CONNECTION_STATUS.CONNECTED);
|
||||
isFirstConnect.current = false;
|
||||
} else {
|
||||
logger.info('NotificationContext', '重连成功');
|
||||
setConnectionStatus(CONNECTION_STATUS.RECONNECTED);
|
||||
logger.info('NotificationContext', '初始化 Socket 连接（异步执行，不阻塞首屏）');
|
||||
|
||||
// 清除之前的定时器
|
||||
if (reconnectedTimerRef.current) {
|
||||
clearTimeout(reconnectedTimerRef.current);
|
||||
// ========== 监听连接成功（首次连接 + 重连） ==========
|
||||
socket.on('connect', () => {
|
||||
setIsConnected(true);
|
||||
setReconnectAttempt(0);
|
||||
|
||||
// 判断是首次连接还是重连
|
||||
if (isFirstConnect.current) {
|
||||
logger.info('NotificationContext', '首次连接成功', {
|
||||
socketId: socket.getSocketId?.()
|
||||
});
|
||||
setConnectionStatus(CONNECTION_STATUS.CONNECTED);
|
||||
isFirstConnect.current = false;
|
||||
} else {
|
||||
logger.info('NotificationContext', '重连成功');
|
||||
setConnectionStatus(CONNECTION_STATUS.RECONNECTED);
|
||||
|
||||
// 清除之前的定时器
|
||||
if (reconnectedTimerRef.current) {
|
||||
clearTimeout(reconnectedTimerRef.current);
|
||||
}
|
||||
|
||||
// 2秒后自动变回 CONNECTED
|
||||
reconnectedTimerRef.current = setTimeout(() => {
|
||||
setConnectionStatus(CONNECTION_STATUS.CONNECTED);
|
||||
logger.info('NotificationContext', 'Auto-dismissed RECONNECTED status');
|
||||
}, 2000);
|
||||
}
|
||||
|
||||
// 2秒后自动变回 CONNECTED
|
||||
reconnectedTimerRef.current = setTimeout(() => {
|
||||
setConnectionStatus(CONNECTION_STATUS.CONNECTED);
|
||||
logger.info('NotificationContext', 'Auto-dismissed RECONNECTED status');
|
||||
}, 2000);
|
||||
}
|
||||
// ⚡ 重连后只需重新订阅，不需要重新注册监听器
|
||||
logger.info('NotificationContext', '重新订阅事件推送');
|
||||
|
||||
// ⚡ 重连后只需重新订阅，不需要重新注册监听器
|
||||
logger.info('NotificationContext', '重新订阅事件推送');
|
||||
|
||||
if (socket.subscribeToEvents) {
|
||||
socket.subscribeToEvents({
|
||||
eventType: 'all',
|
||||
importance: 'all',
|
||||
onSubscribed: (data) => {
|
||||
logger.info('NotificationContext', '订阅成功', data);
|
||||
},
|
||||
});
|
||||
} else {
|
||||
logger.error('NotificationContext', 'socket.subscribeToEvents 方法不可用');
|
||||
}
|
||||
});
|
||||
|
||||
// ========== 监听断开连接 ==========
|
||||
socket.on('disconnect', (reason) => {
|
||||
setIsConnected(false);
|
||||
setConnectionStatus(CONNECTION_STATUS.DISCONNECTED);
|
||||
logger.warn('NotificationContext', 'Socket 已断开', { reason });
|
||||
});
|
||||
|
||||
// ========== 监听连接错误 ==========
|
||||
socket.on('connect_error', (error) => {
|
||||
logger.error('NotificationContext', 'Socket connect_error', error);
|
||||
setConnectionStatus(CONNECTION_STATUS.RECONNECTING);
|
||||
|
||||
const attempts = socket.getReconnectAttempts?.() || 0;
|
||||
setReconnectAttempt(attempts);
|
||||
logger.info('NotificationContext', `重连中... (第 ${attempts} 次尝试)`);
|
||||
});
|
||||
|
||||
// ========== 监听重连失败 ==========
|
||||
socket.on('reconnect_failed', () => {
|
||||
logger.error('NotificationContext', '重连失败');
|
||||
setConnectionStatus(CONNECTION_STATUS.FAILED);
|
||||
|
||||
toast({
|
||||
title: '连接失败',
|
||||
description: '无法连接到服务器，请检查网络连接',
|
||||
status: 'error',
|
||||
duration: null,
|
||||
isClosable: true,
|
||||
if (socket.subscribeToEvents) {
|
||||
socket.subscribeToEvents({
|
||||
eventType: 'all',
|
||||
importance: 'all',
|
||||
onSubscribed: (data) => {
|
||||
logger.info('NotificationContext', '订阅成功', data);
|
||||
},
|
||||
});
|
||||
} else {
|
||||
logger.error('NotificationContext', 'socket.subscribeToEvents 方法不可用');
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// ========== 监听新事件推送（⚡ 只注册一次，使用 ref 访问最新函数） ==========
|
||||
socket.on('new_event', (data) => {
|
||||
logger.info('NotificationContext', '收到 new_event 事件', {
|
||||
id: data?.id,
|
||||
title: data?.title,
|
||||
eventType: data?.event_type || data?.type,
|
||||
importance: data?.importance
|
||||
// ========== 监听断开连接 ==========
|
||||
socket.on('disconnect', (reason) => {
|
||||
setIsConnected(false);
|
||||
setConnectionStatus(CONNECTION_STATUS.DISCONNECTED);
|
||||
logger.warn('NotificationContext', 'Socket 已断开', { reason });
|
||||
});
|
||||
logger.debug('NotificationContext', '原始事件数据', data);
|
||||
|
||||
// ⚠️ 防御性检查：确保 ref 已初始化
|
||||
if (!addNotificationRef.current || !adaptEventToNotificationRef.current) {
|
||||
logger.error('NotificationContext', 'Ref 未初始化，跳过处理', {
|
||||
addNotificationRef: !!addNotificationRef.current,
|
||||
adaptEventToNotificationRef: !!adaptEventToNotificationRef.current,
|
||||
// ========== 监听连接错误 ==========
|
||||
socket.on('connect_error', (error) => {
|
||||
logger.error('NotificationContext', 'Socket connect_error', error);
|
||||
setConnectionStatus(CONNECTION_STATUS.RECONNECTING);
|
||||
|
||||
const attempts = socket.getReconnectAttempts?.() || 0;
|
||||
setReconnectAttempt(attempts);
|
||||
logger.info('NotificationContext', `重连中... (第 ${attempts} 次尝试)`);
|
||||
});
|
||||
|
||||
// ========== 监听重连失败 ==========
|
||||
socket.on('reconnect_failed', () => {
|
||||
logger.error('NotificationContext', '重连失败');
|
||||
setConnectionStatus(CONNECTION_STATUS.FAILED);
|
||||
|
||||
toast({
|
||||
title: '连接失败',
|
||||
description: '无法连接到服务器，请检查网络连接',
|
||||
status: 'error',
|
||||
duration: null,
|
||||
isClosable: true,
|
||||
});
|
||||
return;
|
||||
}
|
||||
});
|
||||
|
||||
// ========== Socket层去重检查 ==========
|
||||
const eventId = data.id || `${data.type || 'unknown'}_${data.publishTime || Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
|
||||
|
||||
if (!data.id) {
|
||||
logger.warn('NotificationContext', 'Event missing ID, generated fallback', {
|
||||
eventId,
|
||||
eventType: data.type,
|
||||
title: data.title,
|
||||
// ========== 监听新事件推送（⚡ 只注册一次，使用 ref 访问最新函数） ==========
|
||||
socket.on('new_event', (data) => {
|
||||
logger.info('NotificationContext', '收到 new_event 事件', {
|
||||
id: data?.id,
|
||||
title: data?.title,
|
||||
eventType: data?.event_type || data?.type,
|
||||
importance: data?.importance
|
||||
});
|
||||
}
|
||||
logger.debug('NotificationContext', '原始事件数据', data);
|
||||
|
||||
if (processedEventIds.current.has(eventId)) {
|
||||
logger.warn('NotificationContext', '重复事件已忽略', { eventId });
|
||||
return;
|
||||
}
|
||||
// ⚠️ 防御性检查：确保 ref 已初始化
|
||||
if (!addNotificationRef.current || !adaptEventToNotificationRef.current) {
|
||||
logger.error('NotificationContext', 'Ref 未初始化，跳过处理', {
|
||||
addNotificationRef: !!addNotificationRef.current,
|
||||
adaptEventToNotificationRef: !!adaptEventToNotificationRef.current,
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
processedEventIds.current.add(eventId);
|
||||
logger.debug('NotificationContext', '事件已记录，防止重复处理', { eventId });
|
||||
// ========== Socket层去重检查 ==========
|
||||
const eventId = data.id || `${data.type || 'unknown'}_${data.publishTime || Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
|
||||
|
||||
// 限制 Set 大小，避免内存泄漏
|
||||
if (processedEventIds.current.size > MAX_PROCESSED_IDS) {
|
||||
const idsArray = Array.from(processedEventIds.current);
|
||||
processedEventIds.current = new Set(idsArray.slice(-MAX_PROCESSED_IDS));
|
||||
logger.debug('NotificationContext', 'Cleaned up old processed event IDs', {
|
||||
kept: MAX_PROCESSED_IDS,
|
||||
});
|
||||
}
|
||||
// ========== Socket层去重检查结束 ==========
|
||||
if (!data.id) {
|
||||
logger.warn('NotificationContext', 'Event missing ID, generated fallback', {
|
||||
eventId,
|
||||
eventType: data.type,
|
||||
title: data.title,
|
||||
});
|
||||
}
|
||||
|
||||
// ✅ 使用 ref.current 访问最新的适配器函数（避免闭包陷阱）
|
||||
logger.debug('NotificationContext', '正在转换事件格式');
|
||||
const notification = adaptEventToNotificationRef.current(data);
|
||||
logger.debug('NotificationContext', '转换后的通知对象', notification);
|
||||
if (processedEventIds.current.has(eventId)) {
|
||||
logger.warn('NotificationContext', '重复事件已忽略', { eventId });
|
||||
return;
|
||||
}
|
||||
|
||||
// ✅ 使用 ref.current 访问最新的 addNotification 函数
|
||||
logger.debug('NotificationContext', '准备添加通知到队列');
|
||||
addNotificationRef.current(notification);
|
||||
logger.info('NotificationContext', '通知已添加到队列');
|
||||
processedEventIds.current.add(eventId);
|
||||
logger.debug('NotificationContext', '事件已记录，防止重复处理', { eventId });
|
||||
|
||||
// ⚡ 调用所有注册的事件更新回调（用于通知其他组件刷新数据）
|
||||
if (eventUpdateCallbacks.current.size > 0) {
|
||||
logger.debug('NotificationContext', `触发 ${eventUpdateCallbacks.current.size} 个事件更新回调`);
|
||||
eventUpdateCallbacks.current.forEach(callback => {
|
||||
try {
|
||||
callback(data);
|
||||
} catch (error) {
|
||||
logger.error('NotificationContext', '事件更新回调执行失败', error);
|
||||
}
|
||||
});
|
||||
logger.debug('NotificationContext', '所有事件更新回调已触发');
|
||||
}
|
||||
});
|
||||
// 限制 Set 大小，避免内存泄漏
|
||||
if (processedEventIds.current.size > MAX_PROCESSED_IDS) {
|
||||
const idsArray = Array.from(processedEventIds.current);
|
||||
processedEventIds.current = new Set(idsArray.slice(-MAX_PROCESSED_IDS));
|
||||
logger.debug('NotificationContext', 'Cleaned up old processed event IDs', {
|
||||
kept: MAX_PROCESSED_IDS,
|
||||
});
|
||||
}
|
||||
// ========== Socket层去重检查结束 ==========
|
||||
|
||||
// ========== 监听系统通知（兼容性） ==========
|
||||
socket.on('system_notification', (data) => {
|
||||
logger.info('NotificationContext', '收到系统通知', data);
|
||||
// ✅ 使用 ref.current 访问最新的适配器函数（避免闭包陷阱）
|
||||
logger.debug('NotificationContext', '正在转换事件格式');
|
||||
const notification = adaptEventToNotificationRef.current(data);
|
||||
logger.debug('NotificationContext', '转换后的通知对象', notification);
|
||||
|
||||
if (addNotificationRef.current) {
|
||||
addNotificationRef.current(data);
|
||||
} else {
|
||||
logger.error('NotificationContext', 'addNotificationRef 未初始化');
|
||||
}
|
||||
});
|
||||
// ✅ 使用 ref.current 访问最新的 addNotification 函数
|
||||
logger.debug('NotificationContext', '准备添加通知到队列');
|
||||
addNotificationRef.current(notification);
|
||||
logger.info('NotificationContext', '通知已添加到队列');
|
||||
|
||||
logger.info('NotificationContext', '所有监听器已注册（只注册一次）');
|
||||
// ⚡ 调用所有注册的事件更新回调（用于通知其他组件刷新数据）
|
||||
if (eventUpdateCallbacks.current.size > 0) {
|
||||
logger.debug('NotificationContext', `触发 ${eventUpdateCallbacks.current.size} 个事件更新回调`);
|
||||
eventUpdateCallbacks.current.forEach(callback => {
|
||||
try {
|
||||
callback(data);
|
||||
} catch (error) {
|
||||
logger.error('NotificationContext', '事件更新回调执行失败', error);
|
||||
}
|
||||
});
|
||||
logger.debug('NotificationContext', '所有事件更新回调已触发');
|
||||
}
|
||||
});
|
||||
|
||||
// ========== 获取最大重连次数 ==========
|
||||
const maxAttempts = socket.getMaxReconnectAttempts?.() || Infinity;
|
||||
setMaxReconnectAttempts(maxAttempts);
|
||||
logger.info('NotificationContext', 'Max reconnect attempts', { maxAttempts });
|
||||
// ========== 监听系统通知（兼容性） ==========
|
||||
socket.on('system_notification', (data) => {
|
||||
logger.info('NotificationContext', '收到系统通知', data);
|
||||
|
||||
// ========== 启动连接 ==========
|
||||
logger.info('NotificationContext', '调用 socket.connect()');
|
||||
socket.connect();
|
||||
if (addNotificationRef.current) {
|
||||
addNotificationRef.current(data);
|
||||
} else {
|
||||
logger.error('NotificationContext', 'addNotificationRef 未初始化');
|
||||
}
|
||||
});
|
||||
|
||||
logger.info('NotificationContext', '所有监听器已注册');
|
||||
|
||||
// ========== 获取最大重连次数 ==========
|
||||
const maxAttempts = socket.getMaxReconnectAttempts?.() || Infinity;
|
||||
setMaxReconnectAttempts(maxAttempts);
|
||||
logger.info('NotificationContext', 'Max reconnect attempts', { maxAttempts });
|
||||
|
||||
// ========== 启动连接 ==========
|
||||
logger.info('NotificationContext', '调用 socket.connect()');
|
||||
socket.connect();
|
||||
};
|
||||
|
||||
// ⚡ 使用 requestIdleCallback 在浏览器空闲时初始化 Socket
|
||||
// 降级到 setTimeout(0) 以兼容不支持的浏览器（如 Safari）
|
||||
if ('requestIdleCallback' in window) {
|
||||
idleCallbackId = window.requestIdleCallback(initSocketConnection, {
|
||||
timeout: 3000 // 最多等待 3 秒，确保连接不会延迟太久
|
||||
});
|
||||
logger.debug('NotificationContext', 'Socket 初始化已排入 requestIdleCallback');
|
||||
} else {
|
||||
timeoutId = setTimeout(initSocketConnection, 0);
|
||||
logger.debug('NotificationContext', 'Socket 初始化已排入 setTimeout(0)（降级模式）');
|
||||
}
|
||||
|
||||
// ========== 清理函数（组件卸载时） ==========
|
||||
return () => {
|
||||
cleanupCalled = true;
|
||||
logger.info('NotificationContext', '清理 Socket 连接');
|
||||
|
||||
// 取消待执行的初始化
|
||||
if (idleCallbackId && 'cancelIdleCallback' in window) {
|
||||
window.cancelIdleCallback(idleCallbackId);
|
||||
}
|
||||
if (timeoutId) {
|
||||
clearTimeout(timeoutId);
|
||||
}
|
||||
|
||||
// 清理 reconnected 状态定时器
|
||||
if (reconnectedTimerRef.current) {
|
||||
clearTimeout(reconnectedTimerRef.current);
|
||||
|
||||
@@ -10,25 +10,12 @@ import { socketService } from '../socketService';
|
||||
export const socket = socketService;
|
||||
export { socketService };
|
||||
|
||||
// ⚡ 新增：暴露 Socket 实例到 window（用于调试和验证）
|
||||
// ⚡ 暴露 Socket 实例到 window（用于调试和验证）
|
||||
// 注意：移除首屏加载时的日志，避免阻塞感知
|
||||
if (typeof window !== 'undefined') {
|
||||
window.socket = socketService;
|
||||
window.socketService = socketService;
|
||||
|
||||
console.log(
|
||||
'%c[Socket Service] ✅ Socket instance exposed to window',
|
||||
'color: #4CAF50; font-weight: bold; font-size: 14px;'
|
||||
);
|
||||
console.log(' 📍 window.socket:', window.socket);
|
||||
console.log(' 📍 window.socketService:', window.socketService);
|
||||
console.log(' 📍 Socket.IO instance:', window.socket?.socket);
|
||||
console.log(' 📍 Connection status:', window.socket?.connected ? '✅ Connected' : '❌ Disconnected');
|
||||
// 日志已移除，如需调试可在控制台执行: console.log(window.socket)
|
||||
}
|
||||
|
||||
// 打印当前使用的服务类型
|
||||
console.log(
|
||||
'%c[Socket Service] Using REAL Socket Service',
|
||||
'color: #4CAF50; font-weight: bold; font-size: 12px;'
|
||||
);
|
||||
|
||||
export default socket;
|
||||
|
||||
Reference in New Issue
Block a user