Angular组件销毁后重建SignalR服务的问题求解

问题根源 #

你的SignalrService使用providedIn: 'root'标记，这是Angular的单例服务，整个应用生命周期内只会被实例化一次。第一次登录时构造函数执行并创建连接，登出后服务实例依然存在；再次登录时构造函数不会重复执行，旧连接因登出时token失效无法重新建立，导致连接失败。

符合Angular规范的解决方案 #

方案1：重构单例服务，手动控制连接生命周期

将连接初始化逻辑从构造函数中剥离，改为通过公共方法手动触发，确保每次登录时能重新创建连接并使用最新的token。

修改SignalrService代码：

@Injectable({
  providedIn: 'root'
})
export class SignalrService {
  private message$: Subject<string>;
  private messageGroup$: Subject<string>;
  private connection: signalR.HubConnection | null = null;
  connectionId: string;

  constructor() {
    console.log("SignalrService constructor called");
    this.message$ = new Subject<string>();
    this.messageGroup$ = new Subject<string>();
    // 构造函数仅初始化Subject，不创建连接
  }

  /**
   * 初始化SignalR连接（销毁旧连接+创建新连接）
   */
  public initConnection(): void {
    // 先清理旧连接
    if (this.connection) {
      this.connection.stop().then(() => {
        this.connection.off('BroadcastToUser');
        this.connection.off('AddFeedsUser');
        this.connection = null;
      });
    }

    // 创建新连接，此时accessTokenFactory会读取最新的token
    this.connection = new signalR.HubConnectionBuilder()
      .withUrl(`${environment.apiUrl}/notify`, {
        accessTokenFactory: () => localStorage.getItem('accessToken') || ''
      })
      .withAutomaticReconnect([0, 5000, 10000])
      .build();
  }

  public connect(): void {
    if (!this.connection) {
      console.error('请先调用initConnection初始化连接');
      return;
    }
    this.connection.start()
      .then(() => this.addUserToGroup())
      .catch(err => console.error('SignalR连接失败:', err));
  }

  /**
   * 注册用户消息监听（先移除旧监听避免重复触发）
   */
  public addBroadcastToUser(): void {
    if (!this.connection) return;
    this.connection.off('BroadcastToUser');
    this.connection.on('BroadcastToUser', (message) => {
      this.message$.next(message);
    });
  }

  /**
   * 注册群组消息监听（先移除旧监听避免重复触发）
   */
  public addFeedsUser(): void {
    if (!this.connection) return;
    this.connection.off('AddFeedsUser');
    this.connection.on('AddFeedsUser', (message) => {
      this.messageGroup$.next(message);
    });
  }

  public getMessage(): Observable<string> {
    return this.message$.asObservable();
  }

  public getGroupTradeRoomMessage(): Observable<string> {
    return this.messageGroup$.asObservable();
  }

  public disconnect(): void {
    if (this.connection) {
      this.connection.stop().catch(err => console.error('SignalR断开失败:', err));
    }
  }

  public getConnectionId(): void {
    if (!this.connection) return;
    this.connection.invoke('getConnectionId').then(
      (data) => {
        this.connectionId = data;
      }
    );
  };

  public addUserToGroup(): void {
    if (!this.connection) return;
    this.connection.invoke('addUserToGroup').then(
      (data) => {
        this.connectionId = data;
      }
    );
  };
}

在登录逻辑中触发连接初始化：

在你的登录组件/服务中，登录成功后立即调用初始化和连接方法：

login(credentials: LoginCredentials) {
  this.authService.login(credentials).subscribe({
    next: () => {
      // 登录成功后初始化并建立SignalR连接
      this.signalrService.initConnection();
      this.signalrService.connect();
    },
    error: (err) => {
      console.error('登录失败:', err);
    }
  });
}

修改HeaderComponent代码：

将监听注册逻辑移到ngOnInit，确保连接已初始化后再注册：

export class HeaderComponent implements OnInit, OnDestroy {
  private messageSubscription?: Subscription;
  private groupMessageSubscription?: Subscription;

  constructor(private signalrService: SignalrService) {}
  
  ngOnInit(): void {
    // 注册消息监听
    this.signalrService.addBroadcastToUser();
    this.signalrService.addFeedsUser();

    // 订阅消息
    this.messageSubscription = this.signalrService.getMessage().subscribe(
      (message) => this.onDataUpdate(message)
    );

    this.groupMessageSubscription = this.signalrService.getGroupTradeRoomMessage().subscribe(
      (message) => this.onGroupDataUpdate(message)
    );
  }
  
  ngOnDestroy(): void {
    console.log("HeaderComponent destroyed");
    // 断开连接
    this.signalrService.disconnect();
    // 取消订阅避免内存泄漏
    this.messageSubscription?.unsubscribe();
    this.groupMessageSubscription?.unsubscribe();
    // 移除监听
    this.signalrService.addBroadcastToUser();
    this.signalrService.addFeedsUser();
  }

  private onDataUpdate(message: string): void {
    // 处理用户消息逻辑
  }

  private onGroupDataUpdate(message: string): void {
    // 处理群组消息逻辑
  }
}

方案2：组件级注入服务（仅适用于单一组件使用SignalR的场景）

如果只有HeaderComponent需要使用SignalR服务，可以将服务的注入范围改为组件级，这样每次HeaderComponent创建时都会生成新的服务实例：

修改HeaderComponent的装饰器：

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.css'],
  providers: [SignalrService] // 组件级注入，每个组件实例对应一个服务实例
})
export class HeaderComponent implements OnInit, OnDestroy {
  // 组件代码无需大幅修改，构造函数会自动获取新的服务实例
}

注意：此方案下服务不再是单例，其他组件注入时会得到不同的实例，不适合需要跨组件共享SignalR连接的场景。

关键注意事项 #

• 避免在服务构造函数中执行业务逻辑（如自动连接），构造函数仅用于初始化依赖。
• 每次注册监听前先调用off移除旧监听，避免重复触发消息。
• 登出时务必断开连接并取消订阅，防止内存泄漏。

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