Streaming-systemer i realtid (WebRTC og live-data) · Lektion

Server-Sent Events (SSE) til envejs-push

Udforsk Server-Sent Events (SSE) som et enklere alternativ til WebSockets til push af envejsdataopdateringer fra server til klient.

Lektion 3 af 412 trin

Server-Sent Events (SSE) til envejs-push er en gratis Streaming-systemer i realtid (WebRTC og live-data)-lektion på CoddyKit. Dette er lektion 3 af 4. Du kan læse hele lektionen gratis nedenfor — og derefter øve dig praktisk i browseren med en indbygget kodeeditor og en AI-vejleder, der er tilgængelig døgnet rundt. Den er en del af læringsforløbet i Streaming-systemer i realtid (WebRTC og live-data), og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Streaming-systemer i realtid (WebRTC og live-data)-kurset indeholder 4 lektioner i alt.

Introduktion til Server-Sent Events

Velkommen! I denne lektion undersøger vi Server-Sent Events (SSE), en effektiv og enkel måde for servere at sende realtidsopdateringer til klienter på.

I modsætning til traditionelle HTTP-anmodninger, hvor klienten altid beder serveren om data, giver SSE serveren mulighed for at sende data til klienten, når nye oplysninger er tilgængelige, uden at klienten konstant behøver at sende forespørgsler.

SSE: Enklere envejs-push

Du kender måske WebSockets til kommunikation i realtid. Hvor WebSockets muliggør fuld tovejskommunikation, er SSE specifikt designet til envejs-dataflow fra serveren til klienten.

Det gør SSE til et enklere og ofte mere effektivt valg i situationer, hvor klienten kun skal modtage opdateringer og ikke sende dem tilbage i realtid.

Sådan fungerer SSE-forbindelser

SSE fungerer over en almindelig HTTP-forbindelse. Klienten starter en almindelig HTTP-anmodning, men serveren svarer med en særlig Content-Type: text/event-stream-header.

I stedet for at lukke forbindelsen efter at have sendt data holder serveren den åben. Den sender derefter nye data til klienten, når opdateringerne er klar, så hændelser effektivt streames over denne ene, vedvarende forbindelse.

Lyt med EventSource

På klientsiden (typisk i en webbrowser) bruger du den indbyggede EventSource-API til at oprette forbindelse til en SSE-strøm og lytte efter indkommende hændelser.

Her er et grundlæggende JavaScript-kodestykke, der opretter forbindelse til et SSE-slutpunkt og logger beskeder:

const eventSource = new EventSource('/stream');

eventSource.onmessage = (event) => {
  console.log('New data:', event.data);
  // Update your UI here
};

eventSource.onerror = (error) => {
  console.error('SSE Error:', error);
  eventSource.close(); // Close connection on error
};

Byg en SSE-server

Lad os se, hvordan en simpel server kan sende SSE-beskeder. Dette Node.js-eksempel opretter en HTTP-server, der sender det aktuelle klokkeslæt hvert sekund.

Kør denne kode, åbn derefter en browser, og gå til http://localhost:8080 for at se hændelsesstrømmen i din konsol.

const http = require('http');

http.createServer((req, res) => {
  res.writeHead(200, {
    'Content-Type': 'text/event-stream',
    'Cache-Control': 'no-cache',
    'Connection': 'keep-alive'
  });

  // Send a message every second
  const intervalId = setInterval(() => {
    res.write('data: The time is ' + new Date().toLocaleTimeString() + '\n\n');
  }, 1000);

  // Clean up on client disconnect
  req.on('close', () => {
    clearInterval(intervalId);
    res.end();
  });

}).listen(8080, () => {
  console.log('SSE server running on http://localhost:8080');
});

Send brugerdefinerede SSE-hændelsestyper

Ud over standardhændelsen message giver SSE dig mulighed for at definere brugerdefinerede hændelsestyper ved hjælp af feltet event:. Det hjælper klienter med at håndtere forskellige typer opdateringer forskelligt.

På klienten bruger du eventSource.addEventListener('myCustomEvent', handler).

const http = require('http');

http.createServer((req, res) => {
  res.writeHead(200, {
    'Content-Type': 'text/event-stream',
    'Cache-Control': 'no-cache',
    'Connection': 'keep-alive'
  });

  let counter = 0;
  const intervalId = setInterval(() => {
    if (counter % 2 === 0) {
      res.write('event: heartbeat\n');
      res.write('data: Ping! ' + counter + '\n\n');
    } else {
      res.write('event: update\n');
      res.write('data: New data point: ' + Math.random().toFixed(2) + '\n\n');
    }
    counter++;
  }, 2000);

  req.on('close', () => {
    clearInterval(intervalId);
    res.end();
  });

}).listen(8080, () => {
  console.log('SSE server (custom events) running on http://localhost:8080');
});

Magien ved automatisk genforbindelse

En af de mest praktiske funktioner i EventSource er dens indbyggede automatiske genoprettelse af forbindelsen. Hvis forbindelsen afbrydes (på grund af netværksproblemer, genstart af serveren osv.), forsøger browseren automatisk at oprette forbindelse igen efter en kort forsinkelse.

Du behøver ikke skrive ekstra kode til at håndtere forbindelsesfejl og nye forsøg, hvilket gør SSE meget robust til løbende opdateringer.

Fordele ved at bruge SSE

SSE har flere væsentlige fordele ved push fra server til klient:

Enkelhed: Nemmere at implementere end WebSockets til envejsdata.
Indbygget genoprettelse af forbindelsen: EventSource håndterer automatisk afbrydelser af forbindelsen.
HTTP-kompatibilitet: Fungerer via standard-HTTP/HTTPS og er kompatibel med eksisterende infrastruktur (proxyer, firewalls).
Multiplexing med HTTP/2: Kan dele én forbindelse effektivt med andre HTTP-anmodninger.

Begrænsninger ved SSE

SSE er effektivt, men egner sig ikke til alle scenarier i realtid:

Kun envejs: Understøtter kun kommunikation fra server til klient. Til kommunikation fra klient til server eller ægte tovejskommunikation kræves WebSockets.
Ingen binære data: Begrænset til UTF-8-kodet tekst. Du kan ikke sende rå binære data direkte via SSE.
Browsernes forbindelsesgrænser: Browsere begrænser typisk antallet af samtidige SSE-forbindelser pr. domæne (f.eks. 6).

SSE-eksempler fra virkeligheden

SSE er særligt velegnet til programmer, der har brug for løbende envejsopdateringer:

Aktuelle aktiekurser: Løbende visning af prisopdateringer i handelsoversigter.
Nyhedsstrømme: Øjeblikkelig levering af nyheder eller opdateringer af artikler.
Aktivitetsstrømme: Notifikationer i realtid (f.eks. nye e-mails eller aktivitet på sociale medier).
Oversigter: Liveopdateringer af systemmålinger eller brugerstatistikker.

Hurtigt SSE-tjek

Nu er det tid til at teste din forståelse af Server-Sent Events!

Besvar den i den interaktive lektion

Lektionsopsummering: SSE

Godt gået! Du har nu lært om Server-Sent Events (SSE).

SSE muliggør envejs push af data fra server til klient via én HTTP-forbindelse.
Det er enklere end WebSockets til envejsopdateringer og har automatisk genoprettelse af forbindelsen.
Du bruger API'et EventSource på klientsiden til at lytte efter hændelser.
SSE er perfekt til liveoversigter, nyhedsstrømme og notifikationer i realtid.

Fortsæt med at undersøge, hvordan disse arkitekturer til live data kan forbedre dine programmer!

Gratis at komme i gang

Lær Streaming-systemer i realtid (WebRTC og live-data) med en AI-underviser — gratis

Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.

Kurser: 12
Lektioner: 48

Start gratis Se hele kurset

Ofte stillede spørgsmål

Er lektionen “Server-Sent Events (SSE) til envejs-push” gratis?

Ja — hele teksten til “Server-Sent Events (SSE) til envejs-push” kan læses gratis her på nettet. Hvis du vil øve dig interaktivt med en indbygget kodeeditor og en AI-vejleder døgnet rundt og få adgang til resten af Streaming-systemer i realtid (WebRTC og live-data)-kurset, skal du opgradere til CoddyKit PRO. Streaming-systemer i realtid (WebRTC og live-data)-kurset indeholder 4 lektioner i alt.

Hvad lærer jeg i “Server-Sent Events (SSE) til envejs-push”?

Udforsk Server-Sent Events (SSE) som et enklere alternativ til WebSockets til push af envejsdataopdateringer fra server til klient. Du øver dig i Streaming-systemer i realtid (WebRTC og live-data) med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.

Skal jeg have erfaring for at begynde på Streaming-systemer i realtid (WebRTC og live-data)?

Der kræves ingen tidligere erfaring. Streaming-systemer i realtid (WebRTC og live-data) på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 3 af 4.

Hvor lang tid tager lektionen “Server-Sent Events (SSE) til envejs-push”?

De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.

Kan jeg skrive og køre kode i denne Streaming-systemer i realtid (WebRTC og live-data)-lektion?

Ja. Alle Streaming-systemer i realtid (WebRTC og live-data)-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.

Alle lektioner i dette kursus

Live-data kontra traditionel HTTP
WebSockets til tovejskommunikation
Server-Sent Events (SSE) til envejs-push
Long polling og udviklingen mod streaming

← Tilbage til Streaming-systemer i realtid (WebRTC og live-data)