SSE Parser

Server-Sent Events (SSE) sind die einfachste Form von Server-Push. Kein WebSocket-Overhead, kein Polling, eingebautes Browser-Reconnect.

Das Basis-Setup

// In einem Angular-Service:
streamUpdates(url: string): Observable<TaskUpdate> {
  return new Observable(observer => {
    const source = new EventSource(url);

    source.onmessage = (event) => {
      try {
        const data = JSON.parse(event.data) as TaskUpdate;
        observer.next(data);
      } catch {
        observer.error(new Error('Invalid SSE payload'));
      }
    };

    source.onerror = () => observer.error(new Error('SSE connection failed'));

    return () => source.close();
  });
}

Typed Events

SSE kann verschiedene Event-Typen haben:

source.addEventListener('task-created', handler);
source.addEventListener('task-updated', handler);
source.addEventListener('task-deleted', handler);

Der Parser validiert und mappt pro Event-Typ auf den richtigen Domain-Typ.

NestJS Backend

@Sse('stream')
stream(): Observable<MessageEvent> {
  return this.service.getUpdates().pipe(
    map(update => ({ data: JSON.stringify(update), type: update.type }))
  );
}

Im Store

SSE-Events triggern Store-Updates direkt — kein manuelles Polling, keine WebSocket-Verbindungsverwaltung:

withHooks((store) => ({
  onInit() {
    inject(TaskStreamService)
      .streamUpdates('/api/tasks/stream')
      .pipe(takeUntilDestroyed())
      .subscribe((update) => store.applyUpdate(update));
  },
}));