diff --git a/docs/NOTIFICATION_SYSTEM.md b/docs/NOTIFICATION_SYSTEM.md index 0fc20c6a..224a7a4b 100644 --- a/docs/NOTIFICATION_SYSTEM.md +++ b/docs/NOTIFICATION_SYSTEM.md @@ -1,16 +1,24 @@ # 实时消息推送系统 - 完整技术文档 -> **版本**: v2.11.0 -> **更新日期**: 2025-01-10 -> **文档类型**: 快速入门 + 完整技术规格 +> **版本**: v2.12.0 +> **更新日期**: 2025-11-17 +> **文档类型**: 用户指南 + 完整技术规格 > -> ⚠️ **重要更新**: Mock Socket 已移除(2025-01-10),文档中关于 `mockSocketService` 的内容仅供历史参考。 +> ⚠️ **重要更新**: +> - 测试工具已移除(2025-11-17):NotificationTestTool、window.__TEST_NOTIFICATION__、notificationDebugger +> - 保留生产可用调试工具:window.__DEBUG__、window.browserNotificationService --- ## 📑 目录 -### 第一部分:快速入门 +### 👤 第零部分:用户快速指南 +0. [连接状态查看](#-连接状态查看) +1. [手动操作指南](#-手动操作指南) +2. [常见问题解决](#-常见问题解决) +3. [可用调试命令](#-可用调试命令) + +### 第一部分:快速入门(开发者) 1. [系统简介](#-系统概述) 2. [核心特性](#核心特性) 3. [5分钟快速开始](#-快速开始) @@ -89,6 +97,222 @@ --- +## 👤 用户快速指南 + +> **适用人群**: 普通用户、测试人员、客服人员 +> **阅读时间**: 5 分钟 + +### 🔌 连接状态查看 + +#### **方法 1: 页面顶部状态横幅** + +当系统出现连接问题时,页面顶部会显示状态横幅: + +| 状态 | 显示内容 | 颜色 | 说明 | +|------|----------|------|------| +| ✅ 已连接 | 无横幅 | - | 正常工作,无需操作 | +| ⚠️ 断开连接 | "⚠️ 连接已断开" | 橙色 | 正在尝试重连 | +| 🔄 重连中 | "🔄 正在重连... (第 X 次)" | 蓝色 | 自动重连进行中 | +| ❌ 连接失败 | "❌ 连接失败,请检查网络" | 红色 | 需要手动干预 | +| ✓ 已重连 | "✓ 已重新连接" | 绿色 | 重连成功,2秒后自动消失 | + +**操作**: +- 横幅可手动关闭(点击 ✕ 按钮) +- 关闭后会记住状态,重连成功后自动清除 + +#### **方法 2: 浏览器控制台查看** + +1. 按 `F12` 打开开发者工具 +2. 切换到 `Console` 标签 +3. 输入以下命令: + +```javascript +// 查看连接状态 +__DEBUG__.socket.getStatus() + +// 输出示例: +{ + connected: true, + socketId: "abc123...", + reconnectAttempts: 0 +} +``` + +--- + +### 🔧 手动操作指南 + +#### **1. 手动重连** + +当连接失败时,可以手动触发重连: + +**浏览器控制台** (`F12` → `Console`): +```javascript +// 手动重连 +__DEBUG__.socket.reconnect() +``` + +**刷新页面**(最简单): +- 按 `Ctrl+R` (Windows) 或 `Cmd+R` (Mac) +- 或点击浏览器刷新按钮 + +#### **2. 查看连接日志** + +```javascript +// 查看最近的 Socket 日志 +__DEBUG__.socket.getLogs() + +// 导出所有日志到文件 +__DEBUG__.exportAll() +``` + +#### **3. 检查浏览器通知权限** + +```javascript +// 查看通知权限状态 +window.browserNotificationService.getPermissionStatus() + +// 返回值: +// "granted" - 已授权 +// "denied" - 已拒绝 +// "default" - 未询问 +``` + +**如何授予权限**: +1. 点击浏览器地址栏左侧的🔒图标 +2. 找到"通知"设置 +3. 选择"允许" + +--- + +### 🆘 常见问题解决 + +#### **问题 1: 收不到通知** + +**可能原因**: +- ❌ 浏览器通知权限未授予 +- ❌ Socket 连接断开 +- ❌ 浏览器标签页处于后台(网页通知需要标签页在前台) + +**解决步骤**: +1. 检查连接状态(参见上面"连接状态查看") +2. 检查通知权限: + ```javascript + window.browserNotificationService.getPermissionStatus() + ``` +3. 如果是 `"denied"`,需要在浏览器设置中允许通知 +4. 如果是 `"default"`,刷新页面会自动请求权限 + +#### **问题 2: 连接一直断开** + +**排查步骤**: +1. **检查网络连接**:打开其他网站,确认网络正常 +2. **查看重连次数**: + ```javascript + __DEBUG__.socket.getStatus() + ``` +3. **查看错误日志**: + ```javascript + __DEBUG__.socket.getLogs() + ``` +4. **手动重连**: + ```javascript + __DEBUG__.socket.reconnect() + ``` +5. **刷新页面**:`Ctrl+R` 或 `Cmd+R` + +#### **问题 3: 通知太多/太少** + +**无法控制通知数量**(由后端推送决定),但可以: +- **清空所有通知**: 点击通知容器右上角"清空全部"按钮 +- **关闭单个通知**: 点击通知右上角 ✕ 按钮 +- **关闭音效**: 点击通知容器右上角🔊图标 + +#### **问题 4: 页面卡顿** + +**可能原因**: 通知历史过多 + +**解决方法**: +1. 点击"清空全部"按钮清空历史通知 +2. 系统会自动限制最多显示 15 条通知 +3. 如仍卡顿,刷新页面 + +--- + +### 💻 可用调试命令 + +> **使用方法**: 打开浏览器控制台 (`F12` → `Console`),输入以下命令 + +#### **Socket 连接调试** + +```javascript +// 1. 查看连接状态 +__DEBUG__.socket.getStatus() + +// 2. 手动重连 +__DEBUG__.socket.reconnect() + +// 3. 查看 Socket 日志 +__DEBUG__.socket.getLogs() + +// 4. 导出 Socket 日志 +__DEBUG__.socket.exportLogs() +``` + +#### **通知权限调试** + +```javascript +// 1. 查看权限状态 +window.browserNotificationService.getPermissionStatus() +// 返回: "granted" | "denied" | "default" + +// 2. 请求权限 +window.browserNotificationService.requestPermission() + +// 3. 检查是否支持通知 +window.browserNotificationService.isSupported() +// 返回: true | false +``` + +#### **综合调试** + +```javascript +// 1. 系统诊断(检查所有状态) +__DEBUG__.diagnose() + +// 2. 查看所有统计信息 +__DEBUG__.printStats() + +// 3. 导出所有日志 +__DEBUG__.exportAll() + +// 4. 清空所有日志 +__DEBUG__.clearAll() + +// 5. 显示帮助信息 +__DEBUG__.help() +``` + +#### **开发环境专用(Mock 模式)** + +仅在开发环境(`npm start`)可用: + +```javascript +// 模拟断线(测试重连机制) +__mockSocket.simulateDisconnection() + +// 查看连接状态 +__mockSocket.isConnected() + +// 手动重连 +__mockSocket.reconnect() + +// 发送测试通知 +__mockSocket.sendTestNotification() +``` + +--- + ## 📋 系统概述 本系统是专为**金融资讯场景**设计的实时消息推送系统,支持 Mock 模式(开发)和真实 Socket.IO 模式(生产)。消息以右下角层叠弹窗的形式显示,**新消息在最上方**,符合主流桌面应用的交互习惯。 @@ -126,7 +350,6 @@ graph TB A[App.js] --> B[AppProviders] B --> C[NotificationProvider
NotificationContext] C --> D[NotificationContainer
通知容器UI] - C --> E[NotificationTestTool
开发测试工具] end subgraph "通知系统核心" @@ -231,7 +454,6 @@ sequenceDiagram |-------|------|------|---------| | **NotificationContext** | React Context | 通知系统核心逻辑、状态管理 | `src/contexts/NotificationContext.js` | | **NotificationContainer** | React Component | 通知UI容器、动画、交互 | `src/components/NotificationContainer/index.js` | -| **NotificationTestTool** | React Component | 开发测试工具 | `src/components/NotificationTestTool/index.js` | | **socketService** | Service Class | 真实WebSocket连接管理 | `src/services/socketService.js` | | **mockSocketService** | Service Class | Mock WebSocket模拟 | `src/services/mockSocketService.js` | | **browserNotificationService** | Service Class | 浏览器通知API封装 | `src/services/browserNotificationService.js` | @@ -880,7 +1102,7 @@ __mockSocket.pausePush() // 暂停自动推送,专注测试单条 - [ ] 点击请求权限按钮弹出浏览器授权对话框 - [ ] 授权后状态变为"granted" - [ ] 拒绝后状态变为"denied",显示设置指引 -- [ ] 权限状态在测试工具中正确显示 +- [ ] 权限状态正确显示 #### 7. 浏览器通知显示测试 - [ ] 权限授予后,切换到其他标签页,收到通知时显示系统通知 @@ -1258,22 +1480,38 @@ npm start ### 3. 测试通知 -打开浏览器,右上角会显示 **"金融资讯测试工具"**,包含: +打开浏览器控制台 (`F12` → `Console`),使用以下命令测试: -#### 通知类型测试 -- 公告通知、股票动向、事件动向、分析报告 -- 预测通知(不可跳转) +#### **Mock 模式测试**(开发环境) +```javascript +// 发送测试通知 +__mockSocket.sendTestNotification() -#### 组合测试 -- 预测→详情流程(5秒延迟) +// 模拟断线重连 +__mockSocket.simulateDisconnection() -#### 功能按钮 -- 清空全部、音效开关、队列状态 +// 查看连接状态 +__mockSocket.isConnected() +``` + +#### **通用测试命令** +```javascript +// 查看系统状态 +__DEBUG__.diagnose() + +// 查看连接状态 +__DEBUG__.socket.getStatus() + +// 查看通知权限 +window.browserNotificationService.getPermissionStatus() +``` ### 4. 自动推送 Mock 模式下,系统会自动每 60 秒推送 1-2 条随机金融资讯。 +查看更多测试命令,请参考本文档开头的 [用户快速指南](#-用户快速指南)。 + --- ## 💻 代码使用 @@ -1405,7 +1643,7 @@ socketio.emit('new_event', { **检查项**: 1. 确认 `NotificationProvider` 已包裹应用 2. 检查浏览器控制台是否有错误 -3. 确认 socket 连接状态(查看测试工具) +3. 确认 socket 连接状态(使用 `__DEBUG__.socket.getStatus()`) 4. 检查通知数据格式是否正确 ### 问题 2: 股票动向颜色不对 @@ -1688,7 +1926,7 @@ ERROR: Browser permission not granted 1. 在 `src/constants/notificationTypes.js` 添加类型定义 2. 添加类型配置(图标、颜色、样式) 3. 在 `NotificationContainer` 中添加渲染逻辑 -4. 在测试工具中添加测试按钮 +4. 使用控制台命令测试(Mock 模式:`__mockSocket.sendTestNotification()`) 5. 更新文档 **示例**: @@ -1882,10 +2120,8 @@ src/ ├── contexts/ │ └── NotificationContext.js # 通知上下文管理 ├── components/ -│ ├── NotificationContainer/ -│ │ └── index.js # 通知容器组件 -│ └── NotificationTestTool/ -│ └── index.js # 测试工具组件 +│ └── NotificationContainer/ +│ └── index.js # 通知容器组件 ├── hooks/ │ └── useEventNotifications.js # 事件订阅 Hook └── assets/ @@ -1962,11 +2198,11 @@ src/ ## 📞 支持 如有问题,请查看: +- **用户快速指南**: 本文档开头的[用户快速指南](#-用户快速指南) - **项目文档**: `CLAUDE.md` -- **测试工具**: 开发环境右上角"金融资讯测试工具" +- **调试命令**: 浏览器控制台使用 `__DEBUG__.help()` 查看所有可用命令 - **控制台日志**: 所有操作都有详细日志 - **类型定义**: `src/constants/notificationTypes.js` -- **测试用例**: `docs/test-cases/notification-tests.md` ---