Angular 11中如何持续监控SignalR连接状态

核心问题解答 #

• 能否用connection.OnClose()实现？
  可以，但它是被动触发（仅当连接断开时执行回调），无法主动定时检查连接状态。建议结合主动定时检查+被动断开通知，实现更全面的状态监控。
• 是否需要Observable？
  需要。用Observable可以统一管理连接状态，让任意组件订阅状态变化，符合Angular的响应式编程模式。
• Observable应该放在哪里？
  直接放在你的SignalrService中（根注入的单例服务），不要放在组件或模块里。服务是全局单例，适合统一维护SignalR连接的生命周期和状态，所有组件都能通过注入服务订阅状态。

修改后的SignalrService实现 #

import { Injectable, OnDestroy } from '@angular/core';
import { signalR } from '@microsoft/signalr';
import { environment } from '../environments/environment';
import { BehaviorSubject, interval, Subscription } from 'rxjs';
import { map } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})
export class SignalrService implements OnDestroy {
  private connection: signalR.HubConnection;
  // BehaviorSubject保存当前连接状态，初始值设为Disconnected
  private connectionStateSubject = new BehaviorSubject<signalR.HubConnectionState>(signalR.HubConnectionState.Disconnected);
  // 暴露给外部订阅的Observable
  public connectionState$ = this.connectionStateSubject.asObservable();
  private statusCheckSubscription?: Subscription;
  // 定时检查间隔（毫秒），可根据需求设置1分钟(60000)或3分钟(180000)
  private readonly CHECK_INTERVAL = 60000;

  constructor() {
    this.initConnection();
    this.startConnection();
    this.setupConnectionListeners();
    this.startStatusCheck();
  }

  private initConnection(): void {
    this.connection = new signalR.HubConnectionBuilder()
      .withUrl(environment.hubAddress)
      .build();
  }

  private startConnection(): void {
    if (this.connection.state === signalR.HubConnectionState.Disconnected) {
      this.connection.start()
        .then(() => this.updateConnectionState(this.connection.state))
        .catch(err => {
          console.error('SignalR连接失败:', err);
          this.updateConnectionState(this.connection.state);
        });
    }
  }

  private setupConnectionListeners(): void {
    // 监听连接断开事件，被动更新状态+尝试重连
    this.connection.onclose(() => {
      this.updateConnectionState(signalR.HubConnectionState.Disconnected);
      // 可选：断开后自动重连，比如延迟3秒重试
      setTimeout(() => this.startConnection(), 3000);
    });

    // 监听连接重新建立事件
    this.connection.onreconnected(() => {
      this.updateConnectionState(signalR.HubConnectionState.Connected);
    });
  }

  private startStatusCheck(): void {
    // 定时检查连接状态，主动更新
    this.statusCheckSubscription = interval(this.CHECK_INTERVAL)
      .pipe(map(() => this.connection.state))
      .subscribe(state => {
        if (state !== this.connectionStateSubject.value) {
          this.updateConnectionState(state);
        }
      });
  }

  private updateConnectionState(state: signalR.HubConnectionState): void {
    this.connectionStateSubject.next(state);
    // 可选：打印状态日志，方便调试
    console.log('SignalR连接状态更新:', signalR.HubConnectionState[state]);
  }

  public getMessage(next: (message: any) => void): void {
    this.connection.on('SendMessage', (message) => {
      next(message);
    });
  }

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

  ngOnDestroy(): void {
    // 清理定时订阅，避免内存泄漏
    this.statusCheckSubscription?.unsubscribe();
    this.disconnect();
  }
}

组件中如何使用 #

以AppComponent为例，订阅连接状态：

import { Component, OnInit } from '@angular/core';
import { SignalrService } from './signalr.service';
import { signalR } from '@microsoft/signalr';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent implements OnInit {
  connectionStatus: string = '';

  constructor(private signalrService: SignalrService) {}

  ngOnInit(): void {
    this.signalrService.connectionState$.subscribe(state => {
      this.connectionStatus = signalR.HubConnectionState[state];
      // 根据状态做业务处理，比如显示连接提示、禁用功能等
      if (state === signalR.HubConnectionState.Disconnected) {
        console.log('连接已断开，请检查网络');
      }
    });
  }
}

关键说明 #

1. BehaviorSubject的作用：保存当前连接状态，新订阅的组件能立即获取最新状态，避免初始状态缺失。
2. 主动+被动结合：定时检查确保即使连接异常静默断开（比如网络波动未触发onclose）也能检测到；onclose则在连接主动断开时立即响应。
3. 内存泄漏防护：在服务销毁时清理定时订阅，避免内存泄漏。
4. 可配置间隔：CHECK_INTERVAL变量可直接修改为1分钟或3分钟，满足你的需求。

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