Programmering av WebSockets og sanntidssystemer · leksjon

Server-Sent Events (SSE) på nytt

Vurder SSE på nytt for enveis strømming fra server til klient, og sammenlign teknologien med WebSocket for bestemte bruksområder.

Leksjon 2 av 412 trinn

Server-Sent Events (SSE) på nytt er en gratis leksjon i Programmering av WebSockets og sanntidssystemer på CoddyKit. Dette er leksjon 2 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 Programmering av WebSockets og sanntidssystemer, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Programmering av WebSockets og sanntidssystemer inneholder totalt 4 leksjoner.

En ny gjennomgang av Server-Sent Events

Velkommen tilbake til Server-Sent Events (SSE)! Selv om vi var kort innom SSE tidligere, går denne leksjonen dypere inn i de unike styrkene og beste bruksområdene i moderne webutvikling i sanntid.

I en verden der WebSockets dominerer for full-dupleks-kommunikasjon, er SSE fortsatt et godt valg i bestemte situasjoner der en enklere, enveis strøm er alt du trenger.

SSE: Bare fra server til klient

Det grunnleggende prinsippet for SSE er den enveisrettede naturen. Det lar en server sende oppdateringer til en klient over én vedvarende HTTP-tilkobling.

Data flyter bare fra serveren til klienten.
Klienter kan ikke sende meldinger tilbake til serveren via den samme SSE-tilkoblingen.
Denne enkelheten gjør SSE ideelt for oppdateringer av typen kringkasting.

Hvorfor velge SSE? Viktige fordeler

SSE har flere fordeler, særlig sammenlignet med å spørre serveren med jevne mellomrom:

Enkelhet: Bygger på HTTP og er enklere å implementere enn WebSockets for enkle push-oppdateringer.
Automatisk tilkobling på nytt: Nettlesere håndterer nye tilkoblinger automatisk hvis tilkoblingen brytes.
Hendelses-ID-er: En innebygd mekanisme holder oversikt over den sist mottatte hendelsen og hindrer datatap.
Innebygd i nettleseren: Bruker standard-API-et EventSource, uten behov for komplekse biblioteker.

SSE og WebSockets: enveis og toveis

Dette er det avgjørende skillet:

SSE: Best i situasjoner der klienten bare trenger å motta oppdateringer (for eksempel nyhetsstrømmer og aksjekurser). Det fungerer som en radiosending.
WebSockets: Nødvendig for interaktive applikasjoner der klienter og servere må kunne sende og motta meldinger fritt (for eksempel chatteapplikasjoner og nettspill). Det fungerer som en telefonsamtale.

Valget mellom dem avhenger utelukkende av applikasjonens kommunikasjonsbehov.

Bruksområde: Datastrømmer i sanntid

Vurder applikasjoner som viser informasjon som oppdateres kontinuerlig. Disse passer perfekt for SSE:

Aksjekurser: Vise endringer i aksjekurser i sanntid.
Nyhetsstrømmer: Sende nye overskrifter eller artikler etter hvert som de publiseres.
Sportsresultater: Umiddelbare oppdateringer av kampresultater eller hendelser.

Klienten lytter bare; den trenger ikke å sende noe tilbake for å starte oppdateringer.

Bruksområde: Varsler og fremdrift

Et annet godt bruksområde for SSE er levering av ikke-interaktive varsler eller fremdriftsinformasjon:

Brukervarsler: «Du har en ny melding!» eller «Vennen din likte innlegget ditt.»
Fremdrift for bakgrunnsjobber: Vise statusen til en langvarig oppgave på serveren (for eksempel «Filopplastingen er 50 % fullført»).

Disse situasjonene drar nytte av at serveren sender oppdateringer uten en forespørsel fra klienten, og klienten trenger ikke å svare.

Bygge en SSE-server (Node.js)

Her er et enkelt Node.js-eksempel som bruker Express til å opprette et SSE-endepunkt. Legg merke til Content-Type-headeren, som er avgjørende for SSE.

Prøv å kjøre dette eksempelet:

const express = require('express');
const app = express();
const PORT = 3000;

app.get('/events', (req, res) => {
  res.setHeader('Content-Type', 'text/event-stream');
  res.setHeader('Cache-Control', 'no-cache');
  res.setHeader('Connection', 'keep-alive');
  res.flushHeaders(); // Flush headers to establish connection

  let counter = 0;
  const intervalId = setInterval(() => {
    counter++;
    res.write(`data: Server time: ${new Date().toLocaleTimeString()}, count: ${counter}\n\n`);
    if (counter >= 5) {
      res.end(); // End connection after 5 messages
      clearInterval(intervalId);
    }
  }, 1000);

  req.on('close', () => {
    console.log('Client disconnected');
    clearInterval(intervalId);
  });
});

app.get('/', (req, res) => {
  res.send('<p>Go to <a href="/events">/events</a> to see SSE stream.</p><script>const eventSource = new EventSource("/events"); eventSource.onmessage = function(event) { console.log(event.data); document.body.innerHTML += `<p>${event.data}</p>`; }; eventSource.onerror = function(error) { console.error("SSE Error:", error); };</script>');
});

app.listen(PORT, () => {
  console.log(`SSE server listening on port ${PORT}`);
});

Bruke SSE i nettleseren

På klientsiden er det enkelt å bruke SSE ved hjelp av det innebygde EventSource-API-et. Ingen spesielle biblioteker er nødvendige!

Dette JavaScript-utdraget viser hvordan du kobler til og håndterer innkommende meldinger:

const eventSource = new EventSource('/my-sse-endpoint');

eventSource.onmessage = function(event) {
  console.log("Data received:", event.data);
  // event.data contains the message payload
  // event.lastEventId contains the ID of the last event
};

eventSource.addEventListener('myCustomEvent', function(event) {
  console.log("Custom event received:", event.data);
});

eventSource.onopen = function() {
  console.log("SSE connection established.");
};

eventSource.onerror = function() {
  console.error("SSE connection error or closed.");
  if (eventSource.readyState === EventSource.CLOSED) {
    console.log("Connection closed. Browser will try to reconnect.");
  }
};

// To manually close the connection
// eventSource.close();

Forstå begrensningene til SSE

SSE er kraftig innenfor sitt bruksområde, men løser ikke alle problemer. Vær oppmerksom på begrensningene:

Ingen toveis kommunikasjon: Klienter kan ikke sende data tilbake til serveren over SSE-tilkoblingen. Til det trenger du en separat HTTP-forespørsel eller WebSockets.
Bare tekstdata: SSE støtter innebygd bare UTF-8-kodede tekstdata. Binærdata krever koding (for eksempel Base64), noe som gir ekstra overhead.
Tilkoblingsbegrensninger: Nettlesere begrenser vanligvis antallet samtidige HTTP-tilkoblinger (som regel 6–8 per domene), og dette gjelder også for SSE.

Hendelses-ID-er og automatiske nye tilkoblinger

EventSource har innebygde funksjoner for robusthet:

Last-Event-ID: Hvis tilkoblingen brytes, inkluderer nettleseren automatisk headeren Last-Event-ID i forespørselen om å koble til på nytt. Serveren kan bruke denne til å sende bare hendelsene som mangler.
Automatisk tilkobling på nytt: Nettleseren forsøker automatisk å koble til SSE-endepunktet på nytt hvis tilkoblingen går tapt. Serveren kan også foreslå et nytt forsøksintervall ved hjelp av feltet retry:.

Disse funksjonene forenkler feilhåndteringen betydelig sammenlignet med periodiske forespørsler.

SSE: Hurtigsjekk

Hvilken påstand beskriver best kjernefunksjonaliteten til Server-Sent Events (SSE)?

Besvar den i den interaktive leksjonen

SSE på nytt: Oppsummering

I denne leksjonen så vi på Server-Sent Events (SSE) på nytt og fikk en forståelse av den særskilte rollen teknologien har i webapplikasjoner i sanntid.

SSE er ideelt for enveis strømming fra server til klient og passer perfekt for live-strømmer og varsler.
Det er enklere å implementere enn WebSockets i situasjoner som bare krever push, og tilbyr automatisk tilkobling på nytt og hendelses-ID-er.
Husk begrensningene: ingen kommunikasjon fra klient til server og bare tekstdata.

Velg SSE når du bare trenger at serveren kringkaster oppdateringer til klienter, slik at arkitekturen forblir enkel og effektiv.

Gratis å komme i gang

Lær deg Programmering av WebSockets og sanntidssystemer 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: 12
Leksjoner: 47

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «Server-Sent Events (SSE) på nytt» gratis?

Ja – hele teksten i «Server-Sent Events (SSE) på nytt» 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 Programmering av WebSockets og sanntidssystemer-kurset, kan du oppgradere til CoddyKit PRO. Kurset i Programmering av WebSockets og sanntidssystemer inneholder totalt 4 leksjoner.

Hva lærer jeg i «Server-Sent Events (SSE) på nytt»?

Vurder SSE på nytt for enveis strømming fra server til klient, og sammenlign teknologien med WebSocket for bestemte bruksområder. Du øver på Programmering av WebSockets og sanntidssystemer 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 Programmering av WebSockets og sanntidssystemer?

Ingen tidligere erfaring er nødvendig. Programmering av WebSockets og sanntidssystemer 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 2 av 4.

Hvor lang tid tar leksjonen «Server-Sent Events (SSE) på nytt»?

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 Programmering av WebSockets og sanntidssystemer-leksjonen?

Ja. Alle Programmering av WebSockets og sanntidssystemer-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

WebTransport og WebRTC-datakanaler
Server-Sent Events (SSE) på nytt
Fremtiden for Web API-er i sanntid
Edge computing og sanntid på nettverkskanten

← Tilbake til Programmering av WebSockets og sanntidssystemer