Reunalaskenta Cloudflare Workersilla ja Denolla · Oppitunti

WebSockets ja reaaliaikaisuus

Toteuta reaaliaikaisia sovelluksia Cloudflare Workersin ja WebSocketsin avulla interaktiivisten käyttökokemusten luomiseksi

Oppitunti 1/411 vaihetta

WebSockets ja reaaliaikaisuus on ilmainen Reunalaskenta Cloudflare Workersilla ja Denolla-oppitunti CoddyKitissä. Tämä on oppitunti 1/4. Voit lukea koko oppitunnin alta ilmaiseksi ja harjoitella sen jälkeen käytännössä selaimessa sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla. Oppitunti kuuluu Reunalaskenta Cloudflare Workersilla ja Denolla-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Reunalaskenta Cloudflare Workersilla ja Denolla-kurssilla on yhteensä 4 oppituntia.

Reaaliaikaiset sovellukset WebSocket-yhteyksillä

Mitä WebSocketit ovat? Ne mahdollistavat reaaliaikaisen kaksisuuntaisen viestinnän asiakkaan, kuten selaimen, ja palvelimen välillä. Perinteisistä HTTP-pyynnöistä poiketen WebSocketit pitävät pysyvän yhteyden avoinna.

Tämä sopii erinomaisesti sovelluksiin, jotka tarvitsevat välittömiä päivityksiä, kuten chat-sovelluksiin, reaaliaikaisiin koontinäyttöihin ja verkkopeleihin.

HTTP-yhteys vs. WebSocket-yhteys

Perinteinen HTTP on tilaton ja pyyntö–vastaus-pohjainen. Jokainen toiminto edellyttää asiakkaalta uuden pyynnön.

WebSocketit puolestaan muodostavat yhden pitkäkestoisen yhteyden. Kun yhteys on avattu, sekä asiakas että palvelin voivat lähettää viestejä milloin tahansa odottamatta pyyntöä.

HTTP: Asiakas lähettää pyynnön, palvelin vastaa ja yhteys suljetaan.
WebSocket: Asiakas pyytää päivitystä, palvelin hyväksyy sen ja yhteys pysyy avoinna.

WebSocket-päivitys

Ennen WebSocket-yhteyden muodostamista lähetetään alustava HTTP-pyyntö. Asiakas lähettää "Upgrade"-otsakkeen ilmoittaakseen haluavansa vaihtaa protokollaa.

Jos palvelin tukee WebSocketeja, se vastaa "101 Switching Protocols" -tilakoodilla ja päivittää yhteyden HTTP:stä WebSocket-protokollaan. Tätä kutsutaan WebSocket-kättelyksi.

Cloudflare Workerit ja WebSocketit

Cloudflare Workerit sopivat erinomaisesti WebSocketien käsittelyyn reunalla. Ne voivat toimia palvelimen päätepisteenä, hallita yhteyksiä ja käsitellä reaaliaikaisia viestejä suoraan käyttäjien lähellä.

Workerit tarjoavat WebSocketPair-APIn, jolla saapuvan HTTP-pyynnön voi helposti päivittää WebSocket-yhteydeksi. Tämä yksinkertaistaa kättelyprosessia.

Workerin WebSocket-päivitys

Luodaan Worker, joka hyväksyy saapuvan WebSocket-yhteyden. Käytämme yhteyden hallintaan komentoa new WebSocketPair().

Kokeilkaa suorittaa tämä esimerkki. Testaamista varten muodostaisitte yleensä yhteyden WebSocket-asiakkaalla, kuten selaimen kehittäjäkonsolilla tai erillisellä työkalulla.

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-tapahtumakuuntelijat

Kun WebSocket-yhteys on muodostettu, palvelimen puolella olevalle WebSocket-oliolle voi määrittää kuuntelijat eri tapahtumia varten:

'open': Yhteys on muodostettu onnistuneesti.
'message': Asiakkaalta vastaanotetaan viesti. Viestin tiedot ovat kohteessa event.data.
'close': Kumpi tahansa osapuoli sulkee yhteyden.
'error': Yhteydessä tapahtui virhe.

Näiden avulla Worker voi reagoida dynaamisesti asiakkaan toimintaan.

Viestien kaikukaiunta

Aiemmassa koodissa lisäsimme tapahtumakuuntelijan tapahtumalle 'message'. Laajennetaan sitä niin, että Worker lähettää takaisin kaikki vastaanottamansa viestit.

Metodin server.send(message) avulla Worker voi lähettää tietoja takaisin yhdistetylle asiakkaalle. Näin syntyy yksinkertainen "echo"-palvelin.

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

Reaaliaikainen yleislähetys

Kaikupalvelin on hyvä alku, mutta monien reaaliaikaisten sovellusten on lähetettävä viestejä useille yhdistetyille asiakkaille eli suoritettava yleislähetys.

Esimerkiksi chat-sovelluksessa kaikkien muiden keskusteluhuoneen käyttäjien pitäisi saada viesti, kun yksi käyttäjä lähettää viestin.

Cloudflare Workerit ovat oletusarvoisesti tilattomia, joten ne tarvitsevat mekanismin yhteyksien hallintaan pyyntöjen välillä. Tässä Durable Objects on erittäin hyödyllinen, sillä se ylläpitää tilaa ja hallitsee jaetun resurssin useita WebSocket-yhteyksiä.

(Tutustumme Durable Objectseihin myöhemmällä oppitunnilla!)

WebSocketien suojaaminen

HTTP:n tavoin myös WebSocket-yhteydet tulee suojata. Käyttäkää aina osoitetta wss:// (WebSocket Secure) osoitteen ws:// sijaan.

wss://-yhteydet salataan TLS/SSL:n avulla, mikä estää salakuuntelun ja peukaloinnin. Cloudflare Workerit käsittelevät TLS:n päättämisen automaattisesti, joten yhteydet ovat oletusarvoisesti suojattuja käyttöönoton jälkeen.

Käyttäkää tuotannossa osoitetta wss://.
Toteuttakaa tunnistautuminen ja käyttöoikeuksien tarkistus.
Vahvistakaa kaikki saapuvat viestit.

Testaa ymmärryksesi

Tarkastellaan Cloudflare Workeria, jonka tavoitteena on muodostaa WebSocket-yhteys asiakkaan kanssa.

Vastaa interaktiivisessa oppitunnissa

Kertaus: WebSocketit reunalla

Hienoa työtä! Olette oppineet toteuttamaan reaaliaikaisen viestinnän WebSocketien avulla Cloudflare Workersissa.

WebSocketit mahdollistavat jatkuvan kaksisuuntaisen viestinnän.
Workerit käyttävät kättelyssä WebSocketPair-paria ja 101 Switching Protocols -tilakoodia.
Tapahtumankuuntelijat ('message', 'close', 'error') hallitsevat yhteyden elinkaarta.
Käyttäkää suojatuissa yhteyksissä aina wss://-protokollaa.

Tulevilla oppitunneilla perehdytte Durable Objectseihin, joiden avulla tilaa voidaan hallita useiden WebSocket-yhteyksien välillä kehittyneissä reaaliaikaisissa sovelluksissa.

Aloita maksutta

Opi Reunalaskenta Cloudflare Workersilla ja Denolla tekoälytuutorin avulla — ilmaiseksi

Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.

Kurssit: 12
Oppitunnit: 47

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”WebSockets ja reaaliaikaisuus” ilmainen?

Kyllä – oppitunnin ”WebSockets ja reaaliaikaisuus” koko tekstin voi lukea täällä verkossa ilmaiseksi. Jos haluat harjoitella interaktiivisesti sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla sekä avata koko Reunalaskenta Cloudflare Workersilla ja Denolla-kurssin, päivitä CoddyKit PROhon. Reunalaskenta Cloudflare Workersilla ja Denolla-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”WebSockets ja reaaliaikaisuus”?

Toteuta reaaliaikaisia sovelluksia Cloudflare Workersin ja WebSocketsin avulla interaktiivisten käyttökokemusten luomiseksi Harjoittelet Reunalaskenta Cloudflare Workersilla ja Denolla-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni Reunalaskenta Cloudflare Workersilla ja Denolla-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin Reunalaskenta Cloudflare Workersilla ja Denolla-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 1/4.

Kuinka kauan ”WebSockets ja reaaliaikaisuus”-oppitunnin suorittaminen kestää?

Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.

Voinko kirjoittaa ja suorittaa koodia tällä Reunalaskenta Cloudflare Workersilla ja Denolla-oppitunnilla?

Kyllä. Jokainen Reunalaskenta Cloudflare Workersilla ja Denolla-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.

Kaikki tämän kurssin oppitunnit

← Takaisin: Reunalaskenta Cloudflare Workersilla ja Denolla