Edge computing med Cloudflare Workers og Deno · leksjon

WebSockets og sanntid

Implementer sanntidsapplikasjoner med Cloudflare Workers og WebSockets for interaktive opplevelser.

Leksjon 1 av 411 trinn

WebSockets og sanntid er en gratis leksjon i Edge computing med Cloudflare Workers og Deno på CoddyKit. Dette er leksjon 1 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 Edge computing med Cloudflare Workers og Deno, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Edge computing med Cloudflare Workers og Deno inneholder totalt 4 leksjoner.

Sanntidsapper med WebSockets

Hva er WebSockets? De muliggjør toveiskommunikasjon i sanntid mellom en klient (for eksempel nettleseren din) og en server. I motsetning til tradisjonelle HTTP-forespørsler holder WebSockets en vedvarende tilkobling åpen.

Dette passer perfekt for applikasjoner som trenger umiddelbare oppdateringer, for eksempel chatteapper, dashbord i sanntid eller nettspill.

HTTP kontra WebSocket-tilkobling

Tradisjonell HTTP er tilstandsløs og basert på forespørsel og svar. Hver handling krever en ny forespørsel fra klienten.

WebSockets oppretter derimot én enkelt, langvarig tilkobling. Når tilkoblingen er åpen, kan både klienten og serveren sende meldinger når som helst uten å vente på en forespørsel.

HTTP: Klienten sender en forespørsel, serveren svarer, og tilkoblingen lukkes.
WebSocket: Klienten ber om en oppgradering, serveren godkjenner den, og tilkoblingen forblir åpen.

WebSocket-oppgraderingen

Før en WebSocket-tilkobling opprettes, sendes en innledende HTTP-forespørsel. Klienten sender et «Upgrade»-hode som angir at den ønsker å bytte protokoll.

Hvis serveren støtter WebSockets, svarer den med statuskoden «101 Switching Protocols» og oppgraderer tilkoblingen fra HTTP til WebSocket-protokollen. Dette kalles WebSocket-håndtrykket.

Cloudflare Workers og WebSockets

Cloudflare Workers egner seg svært godt til å håndtere WebSockets ved kanten. De kan fungere som serverendepunktet, administrere tilkoblinger og behandle meldinger i sanntid direkte der brukerne befinner seg.

Workers tilbyr et WebSocketPair-API som enkelt kan oppgradere en innkommende HTTP-forespørsel til en WebSocket-tilkobling, slik at håndtrykksprosessen blir enklere.

Worker-WebSocket-oppgradering

La oss lage en Worker som godtar en innkommende WebSocket-tilkobling. Vi bruker new WebSocketPair() til å administrere tilkoblingen.

Prøv å kjøre dette eksempelet. For å teste kobler du vanligvis til ved hjelp av en WebSocket-klient (for eksempel utviklerkonsollen i en nettleser eller et dedikert verktøy).

export default {
  async fetch(request) {
    const upgradeHeader = request.headers.get('Upgrade');
    if (!upgradeHeader || upgradeHeader !== 'websocket') {
      return new Response('Expected Upgrade: websocket', { status: 426 });
    }

    const { 0: client, 1: server } = new WebSocketPair();

    server.accept(); // Accept the WebSocket connection

    server.addEventListener('message', event => {
      console.log('Received message:', event.data);
      // We'll add logic to send messages back soon!
    });
    server.addEventListener('close', event => {
      console.log('WebSocket closed:', event.code, event.reason);
    });
    server.addEventListener('error', event => {
      console.error('WebSocket error:', event.message);
    });

    return new Response(null, {
      status: 101,
      webSocket: client,
    });
  },
};

WebSocket-hendelseslyttere

Når en WebSocket-tilkobling er opprettet, kan du lytte etter ulike hendelser på serverens WebSocket-objekt:

'open': Tilkoblingen er opprettet.
'message': En melding er mottatt fra klienten. Meldingsdataene finnes i event.data.
'close': Tilkoblingen lukkes av en av sidene.
'error': Det oppstod en feil i tilkoblingen.

Dette gjør at Workeren kan reagere dynamisk på samhandling fra klienten.

Sende meldinger tilbake

I den forrige koden la vi til en hendelseslytter for 'message'. La oss utvide den slik at Workeren sender tilbake alle meldinger den mottar.

Metoden server.send(message) gjør at Workeren kan sende data tilbake til den tilkoblede klienten. Dette lager en enkel «echo»-server.

export default {
  async fetch(request) {
    const upgradeHeader = request.headers.get('Upgrade');
    if (!upgradeHeader || upgradeHeader !== 'websocket') {
      return new Response('Expected Upgrade: websocket', { status: 426 });
    }

    const { 0: client, 1: server } = new WebSocketPair();

    server.accept();
    server.addEventListener('message', event => {
      const message = event.data;
      console.log('Received message:', message);
      // Echo the message back to the client
      server.send(`Echo from Worker: ${message}`);
    });
    server.addEventListener('close', event => {
      console.log('WebSocket closed');
    });
    server.addEventListener('error', event => {
      console.error('WebSocket error:', event);
    });

    return new Response(null, {
      status: 101,
      webSocket: client,
    });
  },
};

Kringkasting i sanntid

En echo-server er en god start, men mange sanntidsapper trenger å sende meldinger til flere tilkoblede klienter (kringkasting).

I en chatteapplikasjon bør for eksempel alle andre brukere i chatterommet motta meldingen når én bruker sender en melding.

Cloudflare Workers er som standard tilstandsløse og trenger derfor en mekanisme for å administrere disse tilkoblingene på tvers av forespørsler. Her blir Durable Objects svært nyttige for å opprettholde tilstand og administrere flere WebSocket-tilkoblinger for en delt ressurs.

(Vi utforsker Durable Objects i en senere leksjon!)

Sikre WebSockets

Akkurat som HTTP bør WebSocket-tilkoblinger sikres. Bruk alltid wss:// (WebSocket Secure) i stedet for ws://.

Tilkoblinger med wss:// krypteres ved hjelp av TLS/SSL, noe som hindrer avlytting og manipulering. Cloudflare Workers håndterer TLS-avslutning automatisk, så tilkoblingene dine er sikret som standard når de distribueres.

Bruk wss:// i produksjon.
Implementer autentisering og autorisasjon.
Valider alle innkommende meldinger.

Kontroller forståelsen din

Se for deg en Cloudflare Worker som skal opprette en WebSocket-tilkobling med en klient.

Besvar den i den interaktive leksjonen

Oppsummering: WebSockets ved kanten

Godt jobbet! Du har lært hvordan du implementerer sanntidskommunikasjon med WebSockets ved hjelp av Cloudflare Workers.

WebSockets muliggjør vedvarende kommunikasjon i begge retninger.
Workers bruker WebSocketPair og 101 Switching Protocols til håndtrykket.
Hendelseslyttere ('message', 'close', 'error') håndterer tilkoblingens livssyklus.
Bruk alltid wss:// for sikre tilkoblinger.

I senere leksjoner skal vi se nærmere på Durable Objects for å håndtere tilstand på tvers av flere WebSocket-tilkoblinger i avanserte sanntidsapplikasjoner.

Gratis å komme i gang

Lær deg Edge computing med Cloudflare Workers og Deno 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 «WebSockets og sanntid» gratis?

Ja – hele teksten i «WebSockets og sanntid» 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 Edge computing med Cloudflare Workers og Deno-kurset, kan du oppgradere til CoddyKit PRO. Kurset i Edge computing med Cloudflare Workers og Deno inneholder totalt 4 leksjoner.

Hva lærer jeg i «WebSockets og sanntid»?

Implementer sanntidsapplikasjoner med Cloudflare Workers og WebSockets for interaktive opplevelser. Du øver på Edge computing med Cloudflare Workers og Deno 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 Edge computing med Cloudflare Workers og Deno?

Ingen tidligere erfaring er nødvendig. Edge computing med Cloudflare Workers og Deno 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 1 av 4.

Hvor lang tid tar leksjonen «WebSockets og sanntid»?

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 Edge computing med Cloudflare Workers og Deno-leksjonen?

Ja. Alle Edge computing med Cloudflare Workers og Deno-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

← Tilbake til Edge computing med Cloudflare Workers og Deno