Edge computing met Cloudflare Workers en Deno · Les

WebSockets en realtime

Implementeer realtimeapplicaties met Cloudflare Workers en WebSockets voor interactieve ervaringen.

Les 1 van 411 stappen

WebSockets en realtime is een gratis Edge computing met Cloudflare Workers en Deno-les op CoddyKit. Dit is les 1 van 4. Je kunt de volledige les hieronder gratis lezen en daarna in de browser praktisch oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject Edge computing met Cloudflare Workers en Deno. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus Edge computing met Cloudflare Workers en Deno bevat in totaal 4 lessen.

Realtime-apps met WebSockets

Wat zijn WebSockets? Ze maken realtimecommunicatie in twee richtingen mogelijk tussen een client (zoals je browser) en een server. In tegenstelling tot traditionele HTTP-verzoeken houden WebSockets een permanente verbinding open.

Dit is ideaal voor toepassingen die direct updates nodig hebben, zoals chatapps, live dashboards of onlinegames.

HTTP versus WebSocket-verbinding

Traditioneel HTTP is stateless en gebaseerd op verzoek en antwoord. Voor elke actie is een nieuw verzoek van de client nodig.

WebSockets brengen daarentegen één langdurige verbinding tot stand. Zodra de verbinding open is, kunnen zowel de client als de server op elk moment berichten versturen zonder op een verzoek te wachten.

HTTP: de client doet een verzoek, de server antwoordt en de verbinding wordt gesloten.
WebSocket: de client vraagt om een upgrade, de server keurt deze goed en de verbinding blijft open.

De WebSocket-upgrade

Voordat een WebSocket-verbinding tot stand wordt gebracht, wordt er eerst een HTTP-verzoek gedaan. De client verstuurt een header "Upgrade" om aan te geven dat de protocollen moeten worden gewisseld.

Als de server WebSockets ondersteunt, antwoordt deze met statuscode "101 Switching Protocols" en wordt de verbinding geüpgraded van het HTTP-protocol naar het WebSocket-protocol. Dit wordt de WebSocket-handshake genoemd.

Cloudflare Workers en WebSockets

Cloudflare Workers zijn ideaal voor het verwerken van WebSockets aan de edge. Ze kunnen fungeren als servereindpunt, verbindingen beheren en realtimeberichten rechtstreeks verwerken op de plek waar je gebruikers zich bevinden.

Workers bieden een WebSocketPair-API om een binnenkomend HTTP-verzoek eenvoudig te upgraden naar een WebSocket-verbinding, waardoor het handshakeproces eenvoudiger wordt.

WebSocket-upgrade in een Worker

We maken een Worker die een binnenkomende WebSocket-verbinding accepteert. We gebruiken new WebSocketPair() om de verbinding te beheren.

Probeer dit voorbeeld uit. Om het te testen maak je doorgaans verbinding met een WebSocket-client, bijvoorbeeld via de ontwikkelaarsconsole van een browser of met een speciaal hulpmiddel.

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,
    });
  },
};

Luisteraars voor WebSocket-gebeurtenissen

Zodra een WebSocket-verbinding tot stand is gebracht, kun je luisteren naar verschillende gebeurtenissen op het server-side-object WebSocket:

'open': de verbinding is tot stand gebracht.
'message': de client heeft een bericht verzonden. De berichtgegevens staan in event.data.
'close': de verbinding is door een van beide kanten gesloten.
'error': er is een fout opgetreden in de verbinding.

Hiermee kan je Worker dynamisch reageren op interacties van clients.

Berichten terugsturen

In de vorige code hebben we een gebeurtenisluisteraar voor 'message' toegevoegd. Breid deze uit zodat de Worker elk ontvangen bericht terugstuurt.

Met de methode server.send(message) kan de Worker gegevens terugsturen naar de verbonden client. Zo ontstaat een eenvoudige server die berichten echoot.

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,
    });
  },
};

Realtime uitzenden

Een echoserver is een goed begin, maar veel realtime-apps moeten berichten naar meerdere verbonden clients sturen (uitzenden).

In een chattoepassing moeten bijvoorbeeld alle andere gebruikers in de chatruimte een bericht ontvangen wanneer één gebruiker een bericht verstuurt.

Omdat Cloudflare Workers standaard stateless zijn, hebben ze een mechanisme nodig om deze verbindingen tussen verzoeken door te beheren. Hiervoor zijn Durable Objects bijzonder nuttig: ze behouden de status en beheren meerdere WebSocket-verbindingen voor een gedeelde resource.

(We behandelen Durable Objects in een latere les!)

WebSockets beveiligen

Net als HTTP moeten WebSocket-verbindingen worden beveiligd. Gebruik altijd wss:// (WebSocket Secure) in plaats van ws://.

Verbindingen met wss:// worden versleuteld met TLS/SSL, waardoor afluisteren en manipulatie worden voorkomen. Cloudflare Workers regelen het beëindigen van TLS automatisch, dus je verbindingen zijn standaard beveiligd wanneer je ze implementeert.

Gebruik wss:// in productie.
Implementeer authenticatie en autorisatie.
Valideer alle binnenkomende berichten.

Controleer je begrip

Bekijk een Cloudflare Worker die een WebSocket-verbinding met een client tot stand wil brengen.

Beantwoord dit in de interactieve les

Samenvatting: WebSockets aan de edge

Goed gedaan! Je hebt geleerd hoe je realtimecommunicatie met WebSockets implementeert met Cloudflare Workers.

WebSockets maken permanente communicatie in twee richtingen mogelijk.
Workers gebruiken WebSocketPair en 101 Switching Protocols voor de handshake.
Gebeurtenislisteners ('message', 'close', 'error') beheren de levenscyclus van de verbinding.
Gebruik altijd wss:// voor beveiligde verbindingen.

In toekomstige lessen gaan we dieper in op Durable Objects, waarmee je de status van meerdere WebSocket-verbindingen kunt beheren voor geavanceerde realtimeapplicaties.

Gratis beginnen

Leer Edge computing met Cloudflare Workers en Deno met een AI-tutor — gratis

Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.

Cursussen: 12
Lessen: 47

Gratis beginnen met leren Bekijk de volledige cursus

Veelgestelde vragen

Is de les “WebSockets en realtime” gratis?

Ja — de volledige tekst van “WebSockets en realtime” kun je hier gratis op het web lezen. Als je interactief wilt oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is, en de rest van de cursus Edge computing met Cloudflare Workers en Deno wilt ontgrendelen, kun je upgraden naar CoddyKit PRO. De cursus Edge computing met Cloudflare Workers en Deno bevat in totaal 4 lessen.

Wat leer ik in “WebSockets en realtime”?

Implementeer realtimeapplicaties met Cloudflare Workers en WebSockets voor interactieve ervaringen. Je oefent met Edge computing met Cloudflare Workers en Deno door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.

Heb ik ervaring nodig om met Edge computing met Cloudflare Workers en Deno te beginnen?

Ervaring vooraf is niet nodig. Edge computing met Cloudflare Workers en Deno op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 1 van 4.

Hoe lang duurt de les “WebSockets en realtime”?

De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.

Kan ik code schrijven en uitvoeren in deze les over Edge computing met Cloudflare Workers en Deno?

Ja. Elke les over Edge computing met Cloudflare Workers en Deno bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.

Alle lessen in deze cursus

← Terug naar Edge computing met Cloudflare Workers en Deno