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
WebSocketSubjectshared across all components viashareReplayA 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!
SOCIAL SHARE CARD GENERATOR