926ffa1b8f
## 问题
生产环境 Socket 已连接且订阅成功，但收到事件时不触发通知：
- Socket 连接正常：`connected: true`
- 订阅成功：`已订阅 all 类型的事件推送`
- **但是 `new_event` 监听器未注册**：`_callbacks.$new_event: undefined`
- Network 面板显示后端推送的消息已到达
## 根本原因
`socketService.js` 的监听器注册机制有缺陷：
### 原始逻辑（有问题）：
```javascript
// connect() 方法中
if (this.pendingListeners.length > 0) {
this.pendingListeners.forEach(({ event, callback }) => {
this.on(event, callback); // 注册监听器
});
this.pendingListeners = []; // ❌ 清空暂存队列
}
```
### 问题：
1. **首次连接**：监听器从 `pendingListeners` 注册到 Socket，然后清空队列
2. **Socket 重连**：`pendingListeners` 已被清空，无法重新注册监听器
3. **结果**：重连后 `new_event` 监听器丢失，事件无法触发
### 为什么会重连？
- 用户网络波动
- 服务器重启
- 浏览器从休眠恢复
- Socket.IO 底层重连机制
## 解决方案
### 修改 1：保留 `pendingListeners`（不清空）
**文件**：`src/services/socketService.js:54-69`
```javascript
// 注册所有暂存的事件监听器（保留 pendingListeners，不清空）
if (this.pendingListeners.length > 0) {
console.log(`[socketService] 📦 注册 ${this.pendingListeners.length} 个暂存的事件监听器`);
this.pendingListeners.forEach(({ event, callback }) => {
// 直接在 Socket.IO 实例上注册（避免递归调用 this.on()）
const wrappedCallback = (...args) => {
console.log(`%c[socketService] 🔔 收到原始事件: ${event}`, ...);
callback(...args);
};
this.socket.on(event, wrappedCallback);
console.log(`[socketService] ✓ 已注册事件监听器: ${event}`);
});
// ⚠️ 重要：不清空 pendingListeners，保留用于重连
}
```
**变更**：
- ❌ 删除：`this.pendingListeners = [];`
- ✅ 新增：直接在 `this.socket.on()` 上注册（避免递归）
- ✅ 保留：`pendingListeners` 数组，用于重连时重新注册
### 修改 2：避免重复注册
**文件**：`src/services/socketService.js:166-181`
```javascript
on(event, callback) {
if (!this.socket) {
// Socket 未初始化，暂存监听器（检查是否已存在，避免重复）
const exists = this.pendingListeners.some(
(listener) => listener.event === event && listener.callback === callback
);
if (!exists) {
this.pendingListeners.push({ event, callback });
} else {
console.log(`[socketService] ⚠️ 监听器已存在，跳过: ${event}`);
}
return;
}
// ...
}
```
**变更**：
- ✅ 新增：检查监听器是否已存在（`event` 和 `callback` 都匹配）
- ✅ 避免：重复添加相同监听器到 `pendingListeners`
## 效果
### 修复前：
```
首次连接: ✅ new_event 监听器注册
重连后: ❌ new_event 监听器丢失
事件推送: ❌ 不触发通知
```
### 修复后：
```
首次连接: ✅ new_event 监听器注册
重连后: ✅ new_event 监听器自动重新注册
事件推送: ✅ 正常触发通知
```
## 验证步骤
部署后在浏览器 Console 执行：
```javascript
// 1. 检查监听器
window.socket.socket._callbacks.$new_event // 应该有 1-2 个监听器
// 2. 手动断开重连
window.socket.disconnect();
setTimeout(() => window.socket.connect(), 1000);
// 3. 重连后再次检查
window.socket.socket._callbacks.$new_event // 应该仍然有监听器
// 4. 等待后端推送事件，验证通知显示
```
## 影响范围
- 修改文件: `src/services/socketService.js`（1 个文件，2 处修改）
- 影响功能: Socket 事件监听器注册机制
- 风险等级: 低（只修改监听器管理逻辑，不改变业务代码）
## 相关 Issue
- 修复生产环境 Socket 事件不触发通知问题
- 解决 Socket 重连后监听器丢失问题
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
vf_react
前端
📚 重构记录
2025-10-30: EventList.js 组件化重构
🎯 重构目标
将 Community 社区页面的 EventList.js 组件（1095行）拆分为多个可复用的子组件，提高代码可维护性和复用性。
📊 重构成果
- 重构前: 1095 行
- 重构后: 497 行
- 减少: 598 行 (-54.6%)
📁 新增目录结构
src/views/Community/components/EventCard/
├── index.js (60行) - EventCard 统一入口，智能路由紧凑/详细模式
│
├── ──────────────────────────────────────────────────────────
│ 原子组件 (Atoms) - 7个基础UI组件
├── ──────────────────────────────────────────────────────────
│
├── EventTimeline.js (60行) - 时间轴显示组件
│ └── Props: createdAt, timelineStyle, borderColor, minHeight
│
├── EventImportanceBadge.js (100行) - 重要性等级标签 (S/A/B/C/D)
│ └── Props: importance, showTooltip, showIcon, size
│
├── EventStats.js (60行) - 统计信息 (浏览/帖子/关注)
│ └── Props: viewCount, postCount, followerCount, size, spacing
│
├── EventFollowButton.js (40行) - 关注按钮
│ └── Props: isFollowing, followerCount, onToggle, size, showCount
│
├── EventPriceDisplay.js (130行) - 价格变动显示 (平均/最大/周)
│ └── Props: avgChange, maxChange, weekChange, compact, inline
│
├── EventDescription.js (60行) - 描述文本 (支持展开/收起)
│ └── Props: description, textColor, minLength, noOfLines
│
├── EventHeader.js (100行) - 事件标题头部
│ └── Props: title, importance, onTitleClick, linkColor, compact
│
├── ──────────────────────────────────────────────────────────
│ 组合组件 (Molecules) - 2个卡片组件
├── ──────────────────────────────────────────────────────────
│
├── CompactEventCard.js (160行) - 紧凑模式事件卡片
│ ├── 使用: EventTimeline, EventHeader, EventStats, EventFollowButton
│ └── Props: event, index, isFollowing, followerCount, callbacks...
│
└── DetailedEventCard.js (170行) - 详细模式事件卡片
├── 使用: EventTimeline, EventHeader, EventStats, EventFollowButton,
│ EventPriceDisplay, EventDescription
└── Props: event, isFollowing, followerCount, callbacks...
总计: 10个文件，940行代码
🔧 重构的文件
src/views/Community/components/EventList.js
移除的内容:
- ❌
renderPriceChange函数 (~60行) - ❌
renderCompactEvent函数 (~200行) - ❌
renderDetailedEvent函数 (~300行) - ❌
expandedDescriptionsstate（展开状态管理移至子组件） - ❌ 冗余的 Chakra UI 导入
保留的功能:
- ✅ WebSocket 实时推送
- ✅ 浏览器原生通知
- ✅ 关注状态管理 (followingMap, followCountMap)
- ✅ 分页控制
- ✅ 视图模式切换（紧凑/详细）
- ✅ 推送权限管理
新增引入:
import EventCard from './EventCard';
🏗️ 架构改进
重构前（单体架构）
EventList.js (1095行)
├── 业务逻辑 (WebSocket, 关注, 通知)
├── renderCompactEvent (200行)
│ └── 所有UI代码内联
├── renderDetailedEvent (300行)
│ └── 所有UI代码内联
└── renderPriceChange (60行)
重构后（组件化架构）
EventList.js (497行) - 容器组件
├── 业务逻辑 (WebSocket, 关注, 通知)
└── 渲染逻辑
└── EventCard (智能路由)
├── CompactEventCard (紧凑模式)
│ ├── EventTimeline
│ ├── EventHeader (compact)
│ ├── EventStats
│ └── EventFollowButton
└── DetailedEventCard (详细模式)
├── EventTimeline
├── EventHeader (detailed)
├── EventStats
├── EventFollowButton
├── EventPriceDisplay
└── EventDescription
✨ 优势
-
可维护性 ⬆️
- 每个组件职责单一（单一职责原则）
- 代码行数减少 54.6%
- 组件边界清晰，易于理解
-
可复用性 ⬆️
- 原子组件可在其他页面复用
- 例如：EventImportanceBadge 可用于任何需要显示事件等级的地方
-
可测试性 ⬆️
- 小组件更容易编写单元测试
- 可独立测试每个组件的渲染和交互
-
性能优化 ⬆️
- React 可以更精确地追踪变化
- 减少不必要的重渲染
- 每个子组件可独立优化（useMemo, React.memo）
-
开发效率 ⬆️
- 新增功能时只需修改对应的子组件
- 代码审查更高效
- 降低了代码冲突的概率
📦 依赖工具函数
本次重构使用了之前提取的工具函数：
src/utils/priceFormatters.js (105行)
├── getPriceChangeColor(value) - 获取价格变化文字颜色
├── getPriceChangeBg(value) - 获取价格变化背景颜色
├── getPriceChangeBorderColor(value) - 获取价格变化边框颜色
├── formatPriceChange(value) - 格式化价格为字符串
└── PriceArrow({ value }) - 价格涨跌箭头组件
src/constants/animations.js (72行)
├── pulseAnimation - 脉冲动画（S/A级标签）
├── fadeIn - 渐入动画
├── slideInUp - 从下往上滑入
├── scaleIn - 缩放进入
└── spin - 旋转动画（Loading）
🚀 下一步优化计划
Phase 1 已完成，后续可继续优化：
- Phase 2: 拆分 StockDetailPanel.js (1067行 → ~250行)
- Phase 3: 拆分 InvestmentCalendar.js (827行 → ~200行)
- Phase 4: 拆分 MidjourneyHeroSection.js (813行 → ~200行)
- Phase 5: 拆分 UnifiedSearchBox.js (679行 → ~180行)
🔗 相关提交
feat: 拆分 EventList.js/提取价格相关工具函数到 utils/priceFormatters.jsfeat(EventList): 创建事件卡片原子组件feat(EventList): 创建事件卡片组合组件refactor(EventList): 使用组件化架构替换内联渲染函数