feat: 修改文件 │
│ │
│ 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
@@ -1,6 +1,132 @@
|
||||
# 实时消息推送系统使用指南
|
||||
|
||||
## 🆕 最新更新 (v2.10.0 - 点击加载反馈)
|
||||
## 🆕 最新更新 (v2.11.0 - Socket 连接优化)
|
||||
|
||||
### 优化内容
|
||||
|
||||
#### 1. **指数退避策略** 🔄
|
||||
- ✅ **智能重连间隔**：从"激进"改为"渐进"策略
|
||||
- Real Socket: 第1次 1分钟 → 第2次 2分钟 → 第3次+ 4分钟
|
||||
- Mock Socket: 第1次 10秒 → 第2次 20秒 → 第3次+ 40秒（缩短10倍便于测试）
|
||||
- ✅ **无限重试**：不再在5次后停止，持续使用指数退避重连
|
||||
- ✅ **自定义退避逻辑**：禁用 Socket.IO 默认重连机制，实现更可控的重连策略
|
||||
|
||||
#### 2. **连接状态横幅优化** 📍
|
||||
- ✅ **降低侵入性**：zIndex 从 10000 → 1050，高度 py={3} → py={2}，半透明背景（opacity 0.95）
|
||||
- ✅ **手动关闭**：所有状态（DISCONNECTED/RECONNECTING/FAILED）都可手动关闭
|
||||
- ✅ **状态持久化**：用户关闭后保存到 localStorage，重连成功后自动清除
|
||||
- ✅ **自动消失**：重连成功显示"✓ 已重新连接" 2秒后自动消失
|
||||
- ✅ **无限次数显示**：支持 Infinity 最大重连次数，显示"尝试重连中 (第 N 次)"
|
||||
|
||||
#### 3. **Mock 模式测试功能** 🧪
|
||||
- ✅ **断线重连模拟**：`__mockSocket.simulateDisconnection()` - 模拟意外断线，自动重连
|
||||
- ✅ **连接状态查询**：`__mockSocket.isConnected()` - 查看当前连接状态
|
||||
- ✅ **手动重连**：`__mockSocket.reconnect()` - 立即触发重连
|
||||
- ✅ **重连次数查询**：`__mockSocket.getAttempts()` - 查看当前重连次数
|
||||
- ✅ **控制台提示**：开发模式启动时自动显示可用测试函数
|
||||
|
||||
#### 4. **环境说明** 🌍
|
||||
- ✅ **清晰注释**：在 NotificationContext.js 添加详细的环境说明
|
||||
- `SOCKET_TYPE === 'REAL'`：使用真实 Socket.IO，连接 wss://valuefrontier.cn（生产环境）
|
||||
- `SOCKET_TYPE === 'MOCK'`：使用模拟服务（开发环境），用于本地测试
|
||||
- ✅ **环境切换**：设置 `REACT_APP_ENABLE_MOCK=true` 或 `REACT_APP_USE_MOCK_SOCKET=true` 切换到 MOCK 模式
|
||||
|
||||
### 测试方法
|
||||
|
||||
#### Mock 模式下测试断线重连：
|
||||
|
||||
1. **启用 Mock 模式**：
|
||||
```bash
|
||||
# .env 文件
|
||||
REACT_APP_ENABLE_MOCK=true
|
||||
```
|
||||
|
||||
2. **场景1：模拟断线（自动重连成功）**
|
||||
|
||||
打开控制台，运行以下命令：
|
||||
|
||||
```javascript
|
||||
// 查看可用测试函数
|
||||
console.log(window.__mockSocket);
|
||||
|
||||
// 模拟断线（自动重连）
|
||||
__mockSocket.simulateDisconnection();
|
||||
|
||||
// 观察重连过程：
|
||||
// - 连接状态横幅会出现（"正在重新连接"）
|
||||
// - 重连次数递增（第1次 10s → 第2次 20s → 第3次 40s）
|
||||
// - 重连成功后显示"✓ 已重新连接" 2秒后自动消失
|
||||
|
||||
// 查看连接状态
|
||||
__mockSocket.isConnected(); // true/false
|
||||
|
||||
// 查看重连次数
|
||||
__mockSocket.getAttempts(); // 0, 1, 2, 3...
|
||||
|
||||
// 手动重连（立即重置重连次数）
|
||||
__mockSocket.reconnect();
|
||||
```
|
||||
|
||||
3. **场景2：模拟持续连接失败** 🆕
|
||||
|
||||
打开控制台，运行以下命令：
|
||||
|
||||
```javascript
|
||||
// 模拟持续连接失败
|
||||
__mockSocket.simulateConnectionFailure();
|
||||
|
||||
// 观察效果：
|
||||
// - 连接状态横幅出现："正在重新连接 (第 1 次)"
|
||||
// - 10秒后："正在重新连接 (第 2 次)"
|
||||
// - 20秒后："正在重新连接 (第 3 次)"
|
||||
// - 40秒后："正在重新连接 (第 4 次)"
|
||||
// - 继续以 40秒间隔重试... (第 5/6/7... 次)
|
||||
|
||||
// 测试手动关闭横幅
|
||||
// 点击横幅右侧的 ✕ 按钮 → 横幅消失
|
||||
|
||||
// 查看重连次数（后台仍在重连）
|
||||
__mockSocket.getAttempts(); // 递增中...
|
||||
|
||||
// 允许下次重连成功
|
||||
__mockSocket.allowReconnection();
|
||||
|
||||
// 观察效果：
|
||||
// - 如果横幅已关闭：下次重连成功时会重新出现 "✓ 已重新连接"，2秒后消失
|
||||
// - 如果横幅未关闭：直接显示 "✓ 已重新连接"，2秒后消失
|
||||
|
||||
// 也可以手动立即重连
|
||||
__mockSocket.reconnect(); // 立即成功（如果已调用 allowReconnection）
|
||||
```
|
||||
|
||||
4. **测试手动关闭**：
|
||||
- 模拟断线后，点击状态横幅右侧的 ✕ 按钮
|
||||
- 横幅消失，保存到 localStorage
|
||||
- 重连成功后，横幅会重新出现 2秒（"✓ 已重新连接"）然后自动消失
|
||||
|
||||
### 测试函数速查表
|
||||
|
||||
| 函数 | 说明 | 使用场景 |
|
||||
|------|------|----------|
|
||||
| `__mockSocket.simulateDisconnection()` | 模拟断线，自动重连成功 | 测试正常重连流程 |
|
||||
| `__mockSocket.simulateConnectionFailure()` | 模拟持续连接失败 | 测试重连失败、指数退避 |
|
||||
| `__mockSocket.allowReconnection()` | 允许下次重连成功 | 配合 `simulateConnectionFailure()` 使用 |
|
||||
| `__mockSocket.isConnected()` | 查看当前连接状态 | 调试连接状态 |
|
||||
| `__mockSocket.reconnect()` | 手动立即重连 | 测试"立即重试"按钮 |
|
||||
| `__mockSocket.getAttempts()` | 查看当前重连次数 | 验证指数退避逻辑 |
|
||||
|
||||
### 技术细节
|
||||
|
||||
- **文件修改**：
|
||||
- `src/services/socketService.js` - 指数退避逻辑，无限重试
|
||||
- `src/services/mockSocketService.js` - 模拟断线重连，测试函数
|
||||
- `src/components/ConnectionStatusBar/index.js` - UI 优化，手动关闭
|
||||
- `src/App.js` - dismissed 状态管理，localStorage 持久化
|
||||
- `src/contexts/NotificationContext.js` - 重连成功检测，maxReconnectAttempts 导出
|
||||
|
||||
---
|
||||
|
||||
## v2.10.0 更新回顾
|
||||
|
||||
- ✅ **按钮加载态**：点击"查看详情"后按钮显示 loading spinner，文字变为"跳转中..."（蓝色）
|
||||
- ✅ **防重复点击**：加载状态时禁用再次点击，cursor 变为 wait，避免误操作
|
||||
@@ -11,7 +137,7 @@
|
||||
|
||||
---
|
||||
|
||||
### v2.9.0 更新回顾
|
||||
## v2.9.0 更新回顾
|
||||
|
||||
- ✅ **头部简化**：移除 AI 和预测标签，只保留优先级标签（紧急/重要），避免换行拥挤
|
||||
- ✅ **底部补充**：AI 和预测标识移到底部元数据区，使用 xs size 小徽章，信息不丢失
|
||||
|
||||
Reference in New Issue
Block a user