Design a High-Performance Live Sports Scoreboard Dashboard

  interface ScoreboardState {
    matches: Record<string, MatchModel>;
    visibleMatchIds: string[];
    activeMatchId: string | null;
  }

export class MatchModel {
  readonly id: string;
  readonly homeTeam: string;
  readonly awayTeam: string;
  readonly homeScore: number;
  readonly awayScore: number;
  readonly status: 'scheduled' | 'live' | 'completed';
  readonly lastUpdated: number;

  constructor(data: any) {
    this.id = data.id;
    this.homeTeam = data.homeTeam;
    this.awayTeam = data.awayTeam;
    this.homeScore = Number(data.homeScore || 0);
    this.awayScore = Number(data.awayScore || 0);
    this.status = data.status;
    this.lastUpdated = data.lastUpdated;
  }

  get isLive(): boolean {
    return this.status === 'live';
  }

  get totalScoreString(): string {
    return `${this.homeScore} - ${this.awayScore}`;
  }
}

export class RealtimeSubscriptionService {
  private eventSource: EventSource | null = null;

  subscribeToMatchStream(onMessage: (data: any) => void, onError: () => void) {
    this.eventSource = new EventSource('/api/v1/sports/live-stream', {
      withCredentials: true,
    });

    this.eventSource.onmessage = (event) => {
      const parsedData = JSON.parse(event.data);
      onMessage(parsedData);
    };

    this.eventSource.onerror = () => {
      this.eventSource?.close();
      onError();
    };
  }

  unsubscribe() {
    this.eventSource?.close();
  }
}