Angular SignalR Service — HubConnection, Reconnection and RxJS Integration

The Angular SignalR service wraps the @microsoft/signalr client library in a testable, reactive service. It manages the connection lifecycle (start, stop, reconnect), exposes hub events as RxJS Subjects that Angular components can subscribe to, and handles authentication by providing the current JWT to the connection factory. The key pattern: SignalR events become Observables that integrate naturally with Angular’s reactive data flow.

Angular SignalR Service #

// npm install @microsoft/signalr
import { HubConnection, HubConnectionBuilder, HubConnectionState,
         LogLevel } from '@microsoft/signalr';

@Injectable({ providedIn: 'root' })
export class SignalRService implements OnDestroy {
  private auth   = inject(AuthService);
  private config = inject(APP_CONFIG);

  private _connection: HubConnection | null = null;

  // ── Connection state ────────────────────────────────────────────────────
  connectionState = signal<HubConnectionState>(HubConnectionState.Disconnected);

  // ── Hub event streams — components subscribe to these ───────────────────
  readonly comments$        = new Subject<CommentDto>();
  readonly viewerCount$     = new Subject<{ postId: number; count: number }>();
  readonly notifications$   = new Subject<NotificationDto>();

  // ── Build and start the connection ──────────────────────────────────────
  async connect(): Promise<void> {
    if (this._connection?.state === HubConnectionState.Connected) return;

    this._connection = new HubConnectionBuilder()
      .withUrl(`${this.config.apiUrl}/hubs/blog`, {
        // Provide JWT for WebSocket connections (can't use headers)
        accessTokenFactory: () => this.auth.accessToken() ?? '',
        withCredentials:    true,
      })
      .withAutomaticReconnect({
        nextRetryDelayInMilliseconds: retryContext => {
          // Exponential backoff: 0, 2, 10, 30 seconds
          const delays = [0, 2000, 10000, 30000];
          return delays[retryContext.previousRetryCount] ?? 30000;
        }
      })
      .configureLogging(
        this.config.production ? LogLevel.Warning : LogLevel.Information
      )
      .build();

    // ── Wire up server-to-client events ──────────────────────────────────
    this._connection.on('ReceiveComment',
      (comment: CommentDto) => this.comments$.next(comment));

    this._connection.on('UpdateViewerCount',
      (postId: number, count: number) => this.viewerCount$.next({ postId, count }));

    this._connection.on('ReceiveNotification',
      (notification: NotificationDto) => this.notifications$.next(notification));

    // ── Track connection state ────────────────────────────────────────────
    this._connection.onreconnecting(() =>
      this.connectionState.set(HubConnectionState.Reconnecting));
    this._connection.onreconnected(() =>
      this.connectionState.set(HubConnectionState.Connected));
    this._connection.onclose(() =>
      this.connectionState.set(HubConnectionState.Disconnected));

    try {
      await this._connection.start();
      this.connectionState.set(HubConnectionState.Connected);
    } catch (err) {
      console.error('SignalR connection failed:', err);
      this.connectionState.set(HubConnectionState.Disconnected);
    }
  }

  // ── Disconnect ────────────────────────────────────────────────────────
  async disconnect(): Promise<void> {
    await this._connection?.stop();
    this._connection = null;
  }

  // ── Client-to-server method invocations ────────────────────────────────
  async joinPostRoom(postId: number): Promise<void> {
    await this._connection?.invoke('JoinPostRoom', postId);
  }

  async leavePostRoom(postId: number): Promise<void> {
    await this._connection?.invoke('LeavePostRoom', postId);
  }

  async sendComment(postId: number, body: string): Promise<void> {
    await this._connection?.invoke('SendComment', postId, body);
  }

  ngOnDestroy(): void { this.disconnect(); }
}

// ── Integrate with auth lifecycle ──────────────────────────────────────────
// In AuthService.setSession():
// this.signalR.connect();   // connect when logged in
// In AuthService.clearSession():
// this.signalR.disconnect(); // disconnect when logged out

Common Mistakes #

Mistake 1 — Not unsubscribing from hub Subjects in components (memory leak) #

❌ Wrong — signalR.comments$.subscribe(c => ...) without takeUntilDestroyed; subscription lives after component destruction.

✅ Correct — signalR.comments$.pipe(takeUntilDestroyed(destroyRef)).subscribe(...).

Mistake 2 — Connecting SignalR before authentication (fails with 401) #

❌ Wrong — SignalRService.connect() called in APP_INITIALIZER before auth session restored; connection fails.

✅ Correct — connect() called inside AuthService.setSession() (after successful login or session restore).