Angular嵌套组件SignalR消息重复接收问题咨询

核心原因：SignalR回调未随组件销毁清理 #

SignalR的connection.on(topic, callback)方法是向指定topic添加新的回调函数，而非替换已存在的回调。每次调用该方法，都会把新的回调加入到该topic的回调队列中。

你的场景中：

• 嵌套组件在ngOnInit里调用this._signalRService.recieve("some_topic", ...)，每次组件实例创建时，都会给some_topic新增一个回调。
• 路由切换时，旧的嵌套组件实例会被Angular销毁，但如果没有在ngOnDestroy中移除对应的SignalR回调，这个旧实例的回调仍然会绑定在SignalR连接上。
• 新的页面加载后，新的嵌套组件实例又会添加一个新的回调，此时some_topic下就存在多个回调函数。当SignalR推送消息时，所有绑定的回调都会被触发，导致你看到的重复接收现象。

为什么路由组件没有这个问题？ #

虽然路由组件也会在路由切换时重建，但大概率是以下两种情况之一：

1. 路由组件的SignalR订阅逻辑不同：比如使用了Angular的async管道、takeUntil操作符等，这些方式会在组件销毁时自动取消订阅/清理回调。
2. 路由组件的订阅是在全局服务或父级组件中完成的，而非每个路由组件实例单独订阅，避免了回调堆积。

你的解决思路是正确的 #

在ngOnDestroy中调用connection.off(topic)，可以移除该topic下的所有回调函数，确保旧组件实例的回调被清理，新组件实例添加的回调不会和旧回调堆积，从而解决重复接收的问题。

如果想要更精准地清理当前组件的回调（避免影响其他组件对同一topic的订阅），可以修改你的SignalR服务，支持移除特定的回调：

// SignalR服务新增方法
receive<T>(topic: string, callback: (d: T) => void): () => void {
  this.connection.on(topic, callback);
  // 返回一个清理函数，用于移除当前回调
  return () => this.connection.off(topic, callback);
}

然后在嵌套组件中：

private cleanupCallback?: () => void;

ngOnInit(): void {
  this.cleanupCallback = this._signalRService.receive("some_topic", (notification) => {
    // 处理通知逻辑
  });
}

ngOnDestroy(): void {
  this.cleanupCallback?.();
}

这样只会移除当前组件实例添加的回调，不会影响其他组件对同一topic的订阅。

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