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

feat: 修改文件 │

Browse Source 
│                                                                                           │
     │ 1. src/services/socketService.js - 指数退避 + 无限重试                                    │
     │ 2. src/components/ConnectionStatusBar/index.js - UI 优化 + 自动消失                       │
     │ 3. src/App.js - handleClose 实现 + dismissed 状态管理                                     │
     │ 4. src/contexts/NotificationContext.js - 添加成功状态检测                                 │
     │ 5. NOTIFICATION_SYSTEM.md - v2.11.0 文档更新
This commit is contained in:
zdl
2025-10-21 18:34:38 +08:00
parent 09c9273190
commit 23188d5690
6 changed files with 518 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
src/contexts/NotificationContext.js
View File

@@ -1,6 +1,14 @@
// src/contexts/NotificationContext.js
/**
* 通知上下文 - 管理实时消息推送和通知显示
*
* 环境说明：
* - SOCKET_TYPE === 'REAL': 使用真实 Socket.IO 连接（生产环境），连接到 wss://valuefrontier.cn
* - SOCKET_TYPE === 'MOCK': 使用模拟 Socket 服务（开发环境），用于本地测试
*
* 环境切换：
* - 设置 REACT_APP_ENABLE_MOCK=true 或 REACT_APP_USE_MOCK_SOCKET=true 使用 MOCK 模式
* - 否则使用 REAL 模式连接生产环境
*/
import React, { createContext, useContext, useState, useEffect, useCallback, useRef } from 'react';
@@ -19,6 +27,7 @@ const CONNECTION_STATUS = {
DISCONNECTED: 'disconnected',
RECONNECTING: 'reconnecting',
FAILED: 'failed',
RECONNECTED: 'reconnected', // 重连成功（显示2秒后自动变回 CONNECTED）
};
// 创建通知上下文
@@ -46,7 +55,9 @@ export const NotificationProvider = ({ children }) => {
});
const [connectionStatus, setConnectionStatus] = useState(CONNECTION_STATUS.CONNECTED);
const [reconnectAttempt, setReconnectAttempt] = useState(0);
const [maxReconnectAttempts, setMaxReconnectAttempts] = useState(Infinity);
const audioRef = useRef(null);
const reconnectedTimerRef = useRef(null); // 用于自动消失 RECONNECTED 状态
// 初始化音频
useEffect(() => {
@@ -412,21 +423,35 @@ export const NotificationProvider = ({ children }) => {
// 连接 socket
socket.connect();
// 获取并保存最大重连次数
const maxAttempts = socket.getMaxReconnectAttempts?.() || Infinity;
setMaxReconnectAttempts(maxAttempts);
logger.info('NotificationContext', 'Max reconnect attempts', { maxAttempts });
// 监听连接状态
socket.on('connect', () => {
const wasDisconnected = connectionStatus !== CONNECTION_STATUS.CONNECTED;
setIsConnected(true);
setConnectionStatus(CONNECTION_STATUS.CONNECTED);
setReconnectAttempt(0);
logger.info('NotificationContext', 'Socket connected');
logger.info('NotificationContext', 'Socket connected', { wasDisconnected });
// 显示重连成功提示（如果之前断开过）
if (connectionStatus !== CONNECTION_STATUS.CONNECTED) {
toast({
title: '已重新连接',
status: 'success',
duration: 2000,
isClosable: true,
});
// 如果之前断开过，显示 RECONNECTED 状态2秒后自动消失
if (wasDisconnected) {
setConnectionStatus(CONNECTION_STATUS.RECONNECTED);
logger.info('NotificationContext', 'Reconnected, will auto-dismiss in 2s');
// 清除之前的定时器
if (reconnectedTimerRef.current) {
clearTimeout(reconnectedTimerRef.current);
}
// 2秒后自动变回 CONNECTED
reconnectedTimerRef.current = setTimeout(() => {
setConnectionStatus(CONNECTION_STATUS.CONNECTED);
logger.info('NotificationContext', 'Auto-dismissed RECONNECTED status');
}, 2000);
} else {
setConnectionStatus(CONNECTION_STATUS.CONNECTED);
}
// 如果使用 mock，可以启动定期推送
@@ -449,11 +474,10 @@ export const NotificationProvider = ({ children }) => {
logger.error('NotificationContext', 'Socket connect_error', error);
setConnectionStatus(CONNECTION_STATUS.RECONNECTING);
// 获取重连次数（仅 Real Socket 有）
if (SOCKET_TYPE === 'REAL') {
const attempts = socket.getReconnectAttempts?.() || 0;
setReconnectAttempt(attempts);
}
// 获取重连次数（Real 和 Mock 都支持）
const attempts = socket.getReconnectAttempts?.() || 0;
setReconnectAttempt(attempts);
logger.info('NotificationContext', 'Reconnection attempt', { attempts, socketType: SOCKET_TYPE });
});
// 监听重连失败
@@ -594,6 +618,7 @@ export const NotificationProvider = ({ children }) => {
browserPermission,
connectionStatus,
reconnectAttempt,
maxReconnectAttempts,
addNotification,
removeNotification,
clearAllNotifications,