SSE notifikace v SPA: reálný čas bez pollingu

Asynchronní aktualizace dat v SPA pomocí SSE a Mercure

Frontendové aplikace vyžadují neustálou aktualizaci dat, aby odrážely změny na backendu. Standardní API dotazy zachycují stav v době odpovědi, ale backend dále zpracovává události: doplňování zůstatků, moderaci obsahu, odpovědi podpory. K řešení se používají push mechanismy založené na SSE, integrované s existující OpenAPI specifikací.

Systém kombinuje pull přístup (periodické dotazy) s push (oznámení v reálném čase). SSE zajišťuje jednosměrný tok událostí přes HTTP/2, což minimalizuje zátěž ve srovnání s pollingem.

Scénáře použití asynchronních oznámení

Asynchronní oznámení jsou klíčová v obchodních procesech:

• Doplnění zůstatku: zobrazení aktuálního stavu pro okamžitý nákup.
• Moderace obsahu: aktualizace stavu po kontrole.
• Odpovědi podpory: okamžité upozornění na nový ticket.

V typickém případě uživatel – inzerent nebo vykonavatel – sleduje čítače žádostí: počet vyžadujících akci, nepřečtených komentářů, kontrol umístění. Tato data jsou dostupná přes API endpoint /rest/User/info (operationId: getInfo).

/rest/User/info:
  get:
    tags:
      - User
    summary: Vrací informace o aktuálním uživateli
    operationId: getInfo
    responses:
      200:
        description: Informace o aktuálním uživateli
        content:
          application/json:
            schema:
              type: object
              properties:
                id:
                  type: integer
                  format: int32
                  minimum: 0
                locale:
                  type: string
                  enum: [ru, en]
                login:
                  type: string
                  minimum: 3
                  maximum: 320
                seoCounters:
                  $ref: '#/components/schemas/SeoCounters'

Schéma SeoCounters definuje strukturu:

SeoCounters:
  type: object
  properties:
    nofRequests:
      type: integer
      format: int32
      minimum: 0
    nofLinksStatusNeedApprove:
      type: integer
      format: int32
      minimum: 0
    nofLinksWithUnreadComments:
      type: integer
      format: int32
      minimum: 0
    nofChanges:
      type: integer
      format: int32
      minimum: 0
    nofPlacementCheck:
      type: integer
      format: int32
      minimum: 0

Integrace CDC a Data Platform

Změny v tabulce user_counters jsou sledovány přes CDC (Change Data Capture). Proud modifikací je předáván do Data Platform – korporátního ETL systému. Odtud jsou události pushovány do UI přes SSE hub.

Architektura používá hexagonální model: OpenAPI specifikace automaticky generuje REST adaptéry a TypeScript typy. Pro frontend typy vypadají takto:

/* Generated by orval */
export interface SeoCounters {
  nofRequests?: number;
  nofLinksStatusNeedApprove?: number;
  nofLinksWithUnreadComments?: number;
  nofChanges?: number;
  nofPlacementCheck?: number;
}

export type GetInfo200 = {
  id: number;
  locale: 'ru' | 'en';
  login: string;
  seoCounters?: SeoCounters;
};

Tyto typy jsou znovu použity pro zpracování SSE událostí, což zajišťuje typovou bezpečnost.

Implementace SSE v aplikaci

SSE (Server-Sent Events) – standard pro serverové pushy, podporovaný prohlížeči. EventSource se připojuje k endpointu:

const evtSource = new EventSource('/sse-endpoint', {
  withCredentials: true,
});

evtSource.onmessage = (event) => {
  const data = JSON.parse(event.data);
  // Aktualizace store s typizovanými daty
  updateSeoCounters(data.seoCounters);
};

Pro autorizaci, témata a škálování se používá Mercure – open-source hub na SSE. Hub přijímá publikace přes REST s JWT a rozesílá odběratelům.

Příklad publikace:

curl -d 'topic=https://example.com/books/1' \
     -d 'data={"foo": "updated value"}' \
     -H 'Authorization: Bearer <JWT>' \
     -X POST https://hub/.well-known/mercure

JWT definuje práva na publish/subscribe podle témat. Mercure je nasazen jako kontejner s externí databází, integruje se s CDC proudy.

Výhody přístupu

• Znovupoužití schémat: OpenAPI struktury jsou použity v pull i push bez duplikace.
• Reálný čas: Změny se odrážejí okamžitě bez polling.
• Škálovatelnost: Mercure hub distribuuje zátěž.

Seznam klíčových čítačů pro monitorování:

• nofRequests – žádosti o akci.
• nofLinksStatusNeedApprove – odkazy na potvrzení.
• nofLinksWithUnreadComments – nepřečtené komentáře.
• nofPlacementCheck – kontroly umístění.

Co je důležité

• SSE s Mercure zajišťuje typizovaná push oznámení bez WebSocket obalů.
• CDC zachycuje změny databáze v reálném čase pro ETL procesy.
• Autogenerace TypeScript typů z OpenAPI garantuje konzistenci dat.
• Přístup se škáluje pro high-load systémy s tisíci uživateli.
• JWT v Mercure spravuje přístup k tématům oznámení.

— Editorial Team