Building Real-Time Dashboards in Angular with WebSockets

Most dashboards are built the same way: the user lands on the page, data loads, and then... it sits there. Stale. Until the user hits refresh or you set up an awkward polling interval that hammers your server every few seconds.
There's a better way. WebSockets give you a persistent, two-way connection between your Angular app and your server — meaning your dashboard updates the moment new data exists, with zero wasted requests.
In this article we'll build a complete real-time dashboard in Angular from scratch — WebSocket service, Signal-based components, auto-reconnection, and production-ready patterns.

How WebSockets Differ From Regular HTTP

Before writing any code, it's worth understanding what makes WebSockets special.

Regular HTTP:
Client → "Give me data" → Server
Client ← "Here's your data" ← Server
[Connection closes]

WebSocket:
Client ←→ Server [Connection stays open]
Server → "New data!" → Client (anytime)
Server → "More data!" → Client (anytime)
Client → "Send this" → Server (anytime

For a real-time dashboard showing live metrics, user activity, or financial data — the WebSocket model is a natural fit. The server pushes updates the moment they happen. No polling, no refresh button, no stale data.

Project Setup

For this article we'll build a dashboard that shows three live metrics: active users, requests per second, and server CPU usage.
Start with a fresh Angular 22 project:

ng new realtime-dashboard --standalone
cd realtime-dashboard
ng serve

RxJS ships with Angular so no extra dependencies are needed — webSocket from rxjs/webSocket handles everything.

Step 1 — Define Your Data Model

Start with a clear TypeScript interface for the data your server will push:

// core/models/dashboard.model.ts
export interface DashboardMetrics {
  activeUsers: number;
  requestsPerSecond: number;
  cpuUsage: number;
  timestamp: Date;
}

export interface MetricAlert {
  type: 'warning' | 'critical';
  metric: string;
  value: number;
  message: string;
}

export type DashboardEvent =
  | { kind: 'metrics'; payload: DashboardMetrics }
  | { kind: 'alert'; payload: MetricAlert };

Step 2 — The WebSocket Service

This is the heart of your real-time dashboard. One service manages the connection, handles errors, and exposes clean Observables for your components to consume:

// core/services/dashboard-socket.service.ts
import { Injectable, inject } from '@angular/core';
import { webSocket, WebSocketSubject } from 'rxjs/webSocket';
import {
  Observable,
  EMPTY,
  timer,
  Subject,
  switchMap,
  catchError,
  filter,
  map,
  shareReplay,
  takeUntil
} from 'rxjs';
import { DashboardEvent, DashboardMetrics, MetricAlert } from '../models/dashboard.model';
import { environment } from '../../environments/environment';

@Injectable({ providedIn: 'root' })
export class DashboardSocketService {
  private socket$!: WebSocketSubject<DashboardEvent>;
  private destroy$ = new Subject<void>();
  private connected = false;

  private readonly connection$: Observable<DashboardEvent> = timer(0, 3000).pipe(
    switchMap(() => {
      if (!this.connected) {
        this.socket$ = webSocket<DashboardEvent>(environment.wsUrl);
        this.connected = true;
      }
      return this.socket$.pipe(
        catchError(error => {
          console.error('[WebSocket] Connection error:', error);
          this.connected = false;
          return EMPTY;
        })
      );
    }),
    takeUntil(this.destroy$),
    shareReplay({ bufferSize: 1, refCount: true })
  );

  // Stream of live metrics
  metrics$: Observable<DashboardMetrics> = this.connection$.pipe(
    filter(event => event.kind === 'metrics'),
    map(event => (event as { kind: 'metrics'; payload: DashboardMetrics }).payload)
  );

  // Stream of alerts only
  alerts$: Observable<MetricAlert> = this.connection$.pipe(
    filter(event => event.kind === 'alert'),
    map(event => (event as { kind: 'alert'; payload: MetricAlert }).payload)
  );

  // Send a message to the server
  send(message: DashboardEvent): void {
    if (this.socket$ && this.connected) {
      this.socket$.next(message);
    }
  }

  disconnect(): void {
    this.destroy$.next();
    this.destroy$.complete();
    if (this.socket$) {
      this.socket$.complete();
    }
  }
}

A few things worth noting here:

shareReplay({ bufferSize: 1, refCount: true }) means multiple components can subscribe to the same connection without opening multiple WebSocket connections — crucial for a multi-widget dashboard.
Separating metrics$ and alerts$ into distinct streams lets each component subscribe only to what it needs.
The timer(0, 3000) pattern handles auto-reconnection: if the connection drops, it retries every 3 seconds.

Step 3 — A Metrics Store with Signals

Rather than subscribing directly in each component, create a Signal-based store that holds the latest dashboard state. This gives you one source of truth across your entire dashboard:

// core/stores/dashboard.store.ts
import { Injectable, signal, computed, inject, OnDestroy } from '@angular/core';
import { DashboardSocketService } from '../services/dashboard-socket.service';
import { DashboardMetrics, MetricAlert } from '../models/dashboard.model';

@Injectable({ providedIn: 'root' })
export class DashboardStore implements OnDestroy {
  private socketService = inject(DashboardSocketService);

  // Raw signals
  private _metrics = signal<DashboardMetrics | null>(null);
  private _alerts = signal<MetricAlert[]>([]);
  private _connected = signal(false);

  // Public readonly signals
  metrics = this._metrics.asReadonly();
  alerts = this._alerts.asReadonly();
  connected = this._connected.asReadonly();

  // Computed signals
  isCpuCritical = computed(() => (this._metrics()?.cpuUsage ?? 0) > 90);
  hasAlerts = computed(() => this._alerts().length > 0);
  latestAlert = computed(() => this._alerts()[0] ?? null);

  private metricsSub = this.socketService.metrics$.subscribe({
    next: data => {
      this._metrics.set(data);
      this._connected.set(true);
    },
    error: () => this._connected.set(false)
  });

  private alertsSub = this.socketService.alerts$.subscribe(alert => {
    this._alerts.update(current => [alert, ...current].slice(0, 10));
  });

  clearAlerts(): void {
    this._alerts.set([]);
  }

  ngOnDestroy(): void {
    this.metricsSub.unsubscribe();
    this.alertsSub.unsubscribe();
    this.socketService.disconnect();
  }
}

The store keeps the last 10 alerts with .slice(0, 10) — enough history to be useful without growing unbounded.

Step 4 — The Dashboard Component

With the store in place, the component becomes almost trivially simple:

// features/dashboard/dashboard.component.ts
import { Component, inject } from '@angular/core';
import { DashboardStore } from '../../core/stores/dashboard.store';
import { MetricCardComponent } from './components/metric-card.component';
import { AlertBannerComponent } from './components/alert-banner.component';
import { ConnectionStatusComponent } from './components/connection-status.component';

@Component({
  selector: 'app-dashboard',
  standalone: true,
  imports: [MetricCardComponent, AlertBannerComponent, ConnectionStatusComponent],
  template: `
    <app-connection-status [connected]="store.connected()" />

    @if (store.hasAlerts()) {
      <app-alert-banner [alert]="store.latestAlert()!" (dismiss)="store.clearAlerts()" />
    }

    @if (store.metrics(); as m) {
      <div class="metrics-grid">
        <app-metric-card
          label="Active users"
          [value]="m.activeUsers"
          unit="users"
          color="blue"
        />
        <app-metric-card
          label="Requests / sec"
          [value]="m.requestsPerSecond"
          unit="req/s"
          color="teal"
        />
        <app-metric-card
          label="CPU usage"
          [value]="m.cpuUsage"
          unit="%"
          [color]="store.isCpuCritical() ? 'red' : 'green'"
        />
      </div>
    } @else {
      <div class="loading">Connecting to server...</div>
    }
  `
})
export class DashboardComponent {
  store = inject(DashboardStore);
}

The component has zero business logic. It just reads from the store and renders. That's exactly how it should be.

Step 5 — The Metric Card Component

A clean, reusable card that displays a single metric:

// features/dashboard/components/metric-card.component.ts
import { Component, input } from '@angular/core';

@Component({
  selector: 'app-metric-card',
  standalone: true,
  template: `
    <div class="card" [class]="'card--' + color()">
      <span class="card__label">{{ label() }}</span>
      <span class="card__value">{{ value() | number:'1.0-0' }}</span>
      <span class="card__unit">{{ unit() }}</span>
    </div>
  `,
  styles: [`
    .card {
      padding: 24px;
      border-radius: 12px;
      background: var(--card-bg, #f8f9fa);
      border-left: 4px solid var(--card-accent, #6c757d);
      transition: border-color 0.3s ease;
    }
    .card__label { font-size: 12px; color: #6c757d; text-transform: uppercase; }
    .card__value { font-size: 36px; font-weight: 500; display: block; }
    .card__unit  { font-size: 14px; color: #6c757d; }
    .card--blue  { --card-accent: #0d6efd; }
    .card--teal  { --card-accent: #0dcaf0; }
    .card--green { --card-accent: #198754; }
    .card--red   { --card-accent: #dc3545; }
  `]
})
export class MetricCardComponent {
  label = input.required<string>();
  value = input.required<number>();
  unit  = input.required<string>();
  color = input<string>('blue');
}

Step 6 — Handling the Connection Status

A small but important UX detail — always show the user whether they're connected:

// features/dashboard/components/connection-status.component.ts
import { Component, input } from '@angular/core';

@Component({
  selector: 'app-connection-status',
  standalone: true,
  template: `
    <div class="status" [class.status--connected]="connected()">
      <span class="dot"></span>
      {{ connected() ? 'Live' : 'Reconnecting...' }}
    </div>
  `,
  styles: [`
    .status { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #dc3545; }
    .status--connected { color: #198754; }
    .dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
    .status--connected .dot { animation: pulse 2s infinite; }
    @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.4} }
  `]
})
export class ConnectionStatusComponent {
  connected = input.required<boolean>();
}

Simulating a WebSocket Server for Testing

Don't have a real WebSocket server? Here's a minimal Node.js mock to test against:

// server/mock-ws.js
const { WebSocketServer } = require('ws');
const wss = new WebSocketServer({ port: 8080 });

wss.on('connection', ws => {
  console.log('Client connected');

  const interval = setInterval(() => {
    const metrics = {
      kind: 'metrics',
      payload: {
        activeUsers: Math.floor(Math.random() * 1000) + 500,
        requestsPerSecond: Math.floor(Math.random() * 200) + 50,
        cpuUsage: Math.floor(Math.random() * 100),
        timestamp: new Date()
      }
    };
    ws.send(JSON.stringify(metrics));

    // Occasionally send an alert
    if (Math.random() < 0.1) {
      ws.send(JSON.stringify({
        kind: 'alert',
        payload: {
          type: 'warning',
          metric: 'cpuUsage',
          value: 95,
          message: 'CPU usage is critically high'
        }
      }));
    }
  }, 1000);

  ws.on('close', () => clearInterval(interval));
});

console.log('Mock WebSocket server running on ws://localhost:8080');

Run it with node server/mock-ws.js and point your environment.wsUrl to ws://localhost:8080

Production Checklist

Before shipping your real-time dashboard to production:
Authentication

Pass your auth token as a query parameter or handle it on the first message:

webSocket(`wss://api.example.com/dashboard?token=${authToken}`)

Exponential backoff

Replace the fixed 3-second retry with exponential backoff to avoid hammering your server during outages:

import { retryWhen, delay, scan } from 'rxjs';

retryWhen(errors => errors.pipe(
  scan((retryCount, _) => retryCount + 1, 0),
  delay(attempt => Math.min(1000 * 2 ** attempt, 30000))
))

Environment configuration

// environments/environment.prod.ts
export const environment = {
  production: true,
  wsUrl: 'wss://api.yourapp.com/dashboard'
};

For a dashboard where you only receive data (no need to send back), Server-Sent Events (SSE) is actually a simpler alternative worth considering. But if you need bidirectional communication — sending filters, subscribing to specific metrics, sending user actions — WebSockets are the right choice

Building a real-time Angular dashboard with WebSockets is more accessible than it looks. The combination of RxJS's webSocket(), Angular Signals for state, and a clean store architecture gives you a production-ready foundation that scales as your dashboard grows.
The key patterns to take away:

One WebSocketSubject shared across all components via shareReplay
A Signal-based store as the single source of truth
Auto-reconnection built into the service layer
Components that are pure — just reading from the store and rendering

Your users deserve data that's always fresh. Give them that — and retire the refresh button for good.

Have you built real-time features in Angular? What approach did you use — WebSockets, SSE, or polling? Share your experience below!

推荐订阅源

DEV Community