Frontend Academy · leksjon

Server-Sent Events for strømming én vei

Bruk EventSource til å motta en strøm av server-sendte hendelser, analyser hendelsestyper og data, og koble automatisk til på nytt ved nettverksbrudd.

Leksjon 3 av 415 trinn

Server-Sent Events for strømming én vei er en gratis leksjon i Frontend Academy på CoddyKit. Dette er leksjon 3 av 4. Du kan lese hele leksjonen gratis nedenfor – og deretter øve praktisk i nettleseren med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i Frontend Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Frontend Academy inneholder totalt 4 leksjoner.

Hva er Server-Sent Events?

SSE er en standardbasert HTTP-protokoll der serveren sender hendelser til nettleseren over én langvarig tilkobling. Énveis: bare fra server til klient. Det er enklere enn WebSockets når du ikke trenger å sende data tilbake.

EventSource-API

Nettleserens EventSource kobler til en URL og lytter etter hendelser. Det er standardisert og innebygd, så du trenger ikke noe bibliotek.

const es = new EventSource('/api/events');

es.addEventListener('message', (event) => {
  console.log('Received:', event.data);
});

es.addEventListener('error', () => {
  console.error('Connection error');
});

Format for serversvaret

Serveren sender en ren tekststrøm med Content-Type: text/event-stream. Hver melding begynner med data: og avsluttes med en tom linje.

// Server response:
Content-Type: text/event-stream
Cache-Control: no-cache

data: hello\n\n
data: another message\n\n
data: {"type":"chat","text":"Hi"}\n\n

Navngitte hendelser

Serveren kan navngi hendelser med event:. Nettleseren utløser dem med dette navnet.

// Server:
event: chat
data: {"user":"Alice","text":"Hi"}\n\n

event: user-joined
data: {"name":"Bob"}\n\n

// Client:
es.addEventListener('chat', (e) => { /* ... */ });
es.addEventListener('user-joined', (e) => { /* ... */ });

Automatisk ny tilkobling

EventSource kobler automatisk til på nytt ved frakobling (etter omtrent 3 sekunder). Serveren kan foreslå en forsinkelse med retry: 5000.

// Server:
retry: 5000\n
data: hello\n\n

Hendelses-ID-er og gjenopptakelse

Serveren sender id: med hver hendelse. Etter en ny tilkobling sender nettleseren den sist mottatte ID-en i headeren Last-Event-ID — serveren kan fortsette derfra.

// Server:
id: 42
event: chat
data: {"text":"Hi"}\n\n

id: 43
event: chat
data: {"text":"How are you?"}\n\n

// Client reconnect sends: Last-Event-ID: 43

Tolke JSON

event.data er alltid en streng. Tolk JSON selv.

es.addEventListener('chat', (e) => {
  const msg = JSON.parse(e.data);
  console.log(msg.user, msg.text);
});

Avslutte tilkoblingen

Kall es.close() for å stoppe. Nettlesere lukker også tilkoblingen når fanen lukkes.

es.close();

// In React, close in useEffect cleanup:
useEffect(() => {
  const es = new EventSource('/events');
  es.onmessage = (e) => setData(d => [...d, e.data]);
  return () => es.close();
}, []);

Bruksområder

Direkteoversikter (måltall, overvåking). Varsler (nye e-poster, alarmer). Aksjekurser i sanntid. AI-chatfullføringer (hvert token = en hendelse). Direkte sportsresultater. Statusoppdateringer fra langvarige jobber.

Praktisk eksempel: AI-strømming

Fullføringer fra OpenAI/Anthropic strømmes som SSE. Hvert token kommer som en data-hendelse — gjengi dem fortløpende for å skape en skriveeffekt.

const es = new EventSource('/api/chat?prompt=hello');
let text = '';
es.addEventListener('message', (e) => {
  if (e.data === '[DONE]') {
    es.close();
    return;
  }
  const { delta } = JSON.parse(e.data);
  text += delta;
  setMessage(text);
});

SSE vs. WebSocket vs. polling

SSE: HTTP-basert, bare fra server til klient, automatisk ny tilkobling og enkelt. WebSocket: full dupleks, mindre overhead per melding og mer komplekst. Polling: enklest, men med høyest forsinkelse og belastning. Velg SSE for enveisstrømming og WS for toveis kommunikasjon som i en chat.

Nettleserbegrensninger og proxyer

Nettlesere begrenser antallet samtidige SSE-tilkoblinger per origin (omtrent 6). Enkelte bedriftsproxyer og eldre lastbalansere bufrer svar, noe som ødelegger SSE — test i målmiljøene. Bruk HTTPS for å omgå de fleste proxyer som bufrer.

CORS for SSE

EventSource respekterer CORS. Serveren må sende Access-Control-Allow-Origin. For legitimasjon sender du { withCredentials: true } til EventSource-konstruktøren og setter Access-Control-Allow-Credentials: true på serveren.

Hurtigsjekk

Hva er den viktigste forskjellen mellom Server-Sent Events og WebSockets?

Besvar den i den interaktive leksjonen

Oppsummering: Server-Sent Events

EventSource åpner en HTTP-strøm med hendelser av typen text/event-stream. Serveren sender 'data:'-meldinger med valgfrie event:-navn og id:. Automatisk ny tilkobling med gjenopptakelse via Last-Event-ID. Énveis (server → klient). Utmerket for direkteoversikter, AI-strømming og varsler. Enklere enn WebSocket når du ikke trenger toveis kommunikasjon. Vær oppmerksom på begrensninger for samtidige tilkoblinger og proxy-bufring.

Gratis å komme i gang

Lær deg HTML med en AI-veileder – gratis

Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.

Kurs: 41
Leksjoner: 163

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «Server-Sent Events for strømming én vei» gratis?

Ja – hele teksten i «Server-Sent Events for strømming én vei» er gratis å lese her på nettet. For å øve interaktivt med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt, og for å låse opp resten av Frontend Academy-kurset, kan du oppgradere til CoddyKit PRO. Kurset i Frontend Academy inneholder totalt 4 leksjoner.

Hva lærer jeg i «Server-Sent Events for strømming én vei»?

Bruk EventSource til å motta en strøm av server-sendte hendelser, analyser hendelsestyper og data, og koble automatisk til på nytt ved nettverksbrudd. Du øver på Frontend Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.

Trenger jeg erfaring for å begynne med Frontend Academy?

Ingen tidligere erfaring er nødvendig. Frontend Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 3 av 4.

Hvor lang tid tar leksjonen «Server-Sent Events for strømming én vei»?

De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.

Kan jeg skrive og kjøre kode i denne Frontend Academy-leksjonen?

Ja. Alle Frontend Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.

Alle leksjonene i dette kurset

WebSocket API: open, message, close og error
Integrasjon av Socket.io-klienten
Server-Sent Events for strømming én vei
Mønstre for sanntidsgrensesnitt

← Tilbake til Frontend Academy