Pranjal0410/Real-Time-Incident-Response-System

# 实时事件响应平台 一个生产级的实时内部工程工具，用于在系统事件发生时进行管理和协作。采用现代深色主题 UI，支持实时协作。 ## 在线演示 - **前端：** https://incident-frontend-sigma.vercel.app - **后端 API：** https://incident-response-system.onrender.com ## 项目定位 - **不是** 一个聊天应用 - **不是** 一个 CRUD 仪表盘 - **是** 一个事件驱动的实时协作系统，采用服务端权威状态 ## 技术栈 | 层级 | 技术 | |-------|------------| | 前端 | React + Zustand | | 后端 | Node.js + Express | | 实时通信 | Socket.io | | 数据库 | MongoDB | | 认证 | JWT | | 图表 | Recharts | | 样式 | 自定义 CSS (深色主题) | ## 核心功能 - **现代深色主题 UI** - 带有温暖橙色/金色点缀的专业仪表盘 - **实时更新** - 变更瞬间广播至所有查看者 - **在线感知** - 通过实时指示器查看谁在查看每个事件 - **焦点追踪** - 查看其他人正在编辑哪个部分 - **基于角色的访问控制** - Admin、Responder、Viewer 权限 - **审计时间线** - 不可变的、结构化的事件历史记录 - **服务端权威** - 共享状态不使用乐观更新 - **仪表盘分析** - 事件趋势和严重性分布图表 - **搜索功能** - 按标题、状态、严重性或指挥官过滤事件 ## UI/UX 设计 ### 调色板 | 元素 | 颜色 | |---------|-------| | 主背景色 | #1a1a1a | | 次背景色 | #242424 | | 强调色 (金色) | #d4a853 | | 主文本色 | #ffffff | | 次文本色 | #a0a0a0 | ### 仪表盘功能 - **统计卡片** - 事件总数、活跃数、严重数和已解决数 - **趋势图** - 随时间变化的事件活动 - **严重性分布** - 显示事件明细的环形图 - **近期事件表格** - 可搜索、可排序的事件列表 ## 架构亮点 ### 服务端权威状态 ### 非聊天系统 - 结构化的更新类型（status_change、note、assignment、action_item） - 用于事后复盘的不可变审计追踪 - 在服务器端强制执行基于角色的授权 ### 实时流程 ``` Client A → Request → Server → Validate → Persist → Broadcast → All Clients ``` ## 快速开始 ``` # Backend cp .env.example .env npm install npm run dev # Frontend (新终端) cd client npm install npm run dev # 打开 http://localhost:3000 ``` ## 项目结构 ``` ├── src/ # Backend │ ├── config/ # Environment & DB config │ ├── middleware/ # Auth & error handling │ ├── models/ # Mongoose schemas │ ├── routes/ # REST API endpoints │ ├── services/ # Business logic │ └── socket/ # Socket.io handlers ├── client/ # Frontend │ └── src/ │ ├── components/ │ │ ├── layout/ # AppLayout, Sidebar, TopBar │ │ ├── dashboard/ # StatCard, Charts │ │ └── ... # Feature components │ ├── hooks/ # Custom hooks │ ├── pages/ # Route pages │ ├── services/ # API & Socket clients │ └── stores/ # Zustand state ├── DEPLOYMENT.md # Deployment guide └── README.md ``` ## API 概述 ### REST 接口 | 方法 | 端点 | 描述 | |--------|----------|-------------| | POST | /api/auth/register | 创建账户 | | POST | /api/auth/login | 获取 JWT token | | GET | /api/incidents | 列出事件 | | POST | /api/incidents | 创建事件 | | GET | /api/incidents/:id | 获取事件 + 历史记录 | ### Socket 事件 | 事件 | 方向 | 描述 | |-------|-----------|-------------| | incident:join | 客户端 → 服务端 | 加入事件房间 | | incident:updateStatus | 客户端 → 服务端 | 更改状态 | | incident:updated | 服务端 → 房间 | 状态已更改 | | presence:joined | 服务端 → 房间 | 用户已加入 | | focus:updated | 服务端 → 房间 | 用户聚焦于某部分 | ## 角色 | 角色 | 权限 | |------|-------------| | Admin | 完全访问权限，可分配 Responder | | Responder | 创建、修改事件 | | Viewer | 只读 | ## 部署 完整指南请参阅 [DEPLOYMENT.md](./DEPLOYMENT.md)。 | 层级 | 平台 | URL | |-------|----------|-----| | 前端 | Vercel | https://incident-frontend-sigma.vercel.app | | 后端 | Render | https://incident-response-system.onrender.com | | 数据库 | MongoDB Atlas | - | ### 环境变量 **后端：** ``` NODE_ENV=production MONGODB_URI=your_mongodb_uri JWT_SECRET=your_jwt_secret CLIENT_URL=https://incident-frontend-sigma.vercel.app ``` **前端：** ``` VITE_API_URL=https://incident-response-system.onrender.com VITE_SOCKET_URL=https://incident-response-system.onrender.com ``` ## 扩展考量 当前架构可处理每个事件约 50 个并发用户。为了实现扩展： 1. 用于 Socket.io 的 **Redis adapter**（水平扩展） 2. 用于感知的 **Redis**（比 MongoDB 更快） 3. 使用 express-rate-limit 实现 **速率限制** 4. 用于 WebSocket 会话亲和的 **粘性会话**

标签：Express, GNU通用公共许可证, IT运维, JWT认证, MITM代理, MongoDB, Node.js, React, Recharts, Socket.io, Socks5代理, Syscalls, Web应用程序, Zustand, 事件响应平台, 事件管理, 事件驱动架构, 仪表盘分析, 后端开发, 基于角色的访问控制, 实时协作系统, 实时通信, 审计时间线, 深色主题UI, 状态感知, 状态管理, 系统可用性监控, 运维仪表盘