Why should you care?

Batch REST polling every 5s loads DB; push updates scale better for NOC views.

See it live — copy this example

Paste into your MeanVerse project (Angular + Express + MongoDB), then run with ng serve / node / mongosh as noted.

@Component({
  standalone: true,
  template: `
    <canvas baseChart [data]="chartData()" [options]="{ responsive: true }"></canvas>
    <p>Active users: {{ activeUsers() }}</p>`
})
export class OpsDashboardComponent implements OnInit {
  activeUsers = signal(0);
  chartData = signal({ labels: [] as string[], datasets: [{ data: [] as number[], label: 'TPS' }] });

  ngOnInit() {
    this.socket.fromEvent<{ tps: number; ts: string }>('metrics:tps')
      .pipe(scan((acc, m) => ({ labels: [...acc.labels, m.ts].slice(-20), values: [...acc.values, m.tps].slice(-20) }),
        { labels: [] as string[], values: [] as number[] }))
      .subscribe(({ labels, values }) => {
        this.chartData.set({ labels, datasets: [{ data: values, label: 'TPS' }] });
      });
  }
}

What happened?

• socket.fromEvent listens for server pushes.
• scan accumulates last 20 points for sparkline.
• signal updates chart binding reactively.

Practice next

1. Server aggregates metrics every second emits metrics:tps.
2. Angular subscribes on dashboard route enter.
3. Unsubscribe or use takeUntilDestroyed on navigate away.
4. Add reconnect banner when socket offline.
5. Merge server metrics with client-side filter signal.

Remember

Push metrics via WebSocket/Socket.IO. Angular signals or RxJS update charts live. Limit buffer window for performance.

Payment gateway NOC

MeanVerse SRE watches TPS and error rate during launch.

Outcome: Spike visible in 1s; autoscale triggers before users notice.