WebSocket服务应触发Store动作还是由Store订阅SocketIO事件？

先明确你的场景：Angular应用中使用自定义BehaviorSubject实现的Store，需要通过统一的WebSocket服务处理实时事件，以下是两种方案的优缺点及更优实现方式：

方案一：WebSocket服务暴露事件Observable，Store订阅更新 #

优点 #

• 低耦合：WebSocket服务仅负责转发事件，无需知晓Store的内部逻辑或存在；Store只订阅自身关心的事件，两者依赖关系极弱。
• 扩展性强：新增事件类型时，只需在WebSocket服务中添加对应BehaviorSubject，Store按需订阅即可，无需修改WebSocket核心逻辑。
• 职责清晰：WebSocket服务专注于WebSocket连接、事件接收解析；Store专注于状态管理，符合单一职责原则。

缺点 #

• 代码冗余：事件类型较多时，需要为每个事件创建BehaviorSubject，增加WebSocket服务的代码量。
• 订阅风险：Store需手动管理订阅，若遗漏取消订阅操作，长期运行可能引发内存泄漏（尽管Angular服务是单例，但仍需注意）。

方案二：WebSocket服务直接调用Store方法更新状态 #

优点 #

• 集中处理：WebSocket服务统一管理事件到Store的映射，Store无需额外编写订阅逻辑，减少重复代码。
• 订阅安全：无需Store手动维护订阅，避免了订阅泄漏的问题。

缺点 #

• 高耦合：WebSocket服务硬编码依赖所有Store，新增Store或事件类型时必须修改WebSocket服务代码，违反开闭原则。
• 职责混乱：WebSocket服务既处理连接，又负责触发Store状态更新，超出了其核心职责范围。

更优实现：事件注册分发模式 #

结合两种方案的优势，推荐引入事件注册+动态分发的机制，具体做法如下：

1. WebSocket服务专注事件接收与分发：仅负责与服务端建立连接、接收原始事件、解析为标准化格式（如包含eventType和payload的对象），不直接依赖任何Store。
2. Store主动注册事件处理逻辑：每个Store在初始化时，向WebSocket服务注册自身关心的事件类型及对应的处理方法。
3. 动态触发更新：WebSocket服务收到事件后，根据eventType查找对应的处理函数列表，逐一调用完成Store状态更新。

核心优势 #

• 解耦与扩展性平衡：WebSocket服务无需硬编码依赖Store，新增Store或事件时仅需在Store中注册，无需修改WebSocket服务。
• 职责边界清晰：WebSocket服务专注事件分发，Store专注状态管理，各司其职。
• 避免冗余代码：无需为每个事件创建BehaviorSubject，通过注册回调直接触发Store更新，减少冗余。

简化代码示例 #

WebSocket服务

@Injectable({ providedIn: 'root' })
export class WebSocketService {
  private eventHandlers = new Map<string, Array<(payload: any) => void>>();
  private socket: WebSocket;

  constructor() {
    this.connect();
  }

  private connect() {
    this.socket = new WebSocket('ws://your-server-endpoint');
    this.socket.onmessage = (event) => {
      const { eventType, payload } = JSON.parse(event.data);
      this.dispatchEvent(eventType, payload);
    };
  }

  registerEventHandler(eventType: string, handler: (payload: any) => void) {
    if (!this.eventHandlers.has(eventType)) {
      this.eventHandlers.set(eventType, []);
    }
    this.eventHandlers.get(eventType)!.push(handler);
  }

  private dispatchEvent(eventType: string, payload: any) {
    const handlers = this.eventHandlers.get(eventType);
    handlers?.forEach(handler => handler(payload));
  }
}

Store示例

@Injectable({ providedIn: 'root' })
export class UserStore {
  private userSubject = new BehaviorSubject<User | null>(null);
  user$ = this.userSubject.asObservable();

  constructor(private wsService: WebSocketService) {
    // 注册关心的事件及处理逻辑
    this.wsService.registerEventHandler('userUpdated', (payload) => {
      this.userSubject.next(payload);
    });
  }

  // 其他状态更新方法
  updateUser(user: User) {
    this.userSubject.next(user);
  }
}

总结 #

方案一和方案二都存在明显局限性，而事件注册分发模式既保持了低耦合，又避免了冗余代码与订阅风险，是更适配Angular环境的实现方式。

内容的提问来源于stack exchange，提问作者Lenntror