Sanntidsstrømmesystemer (WebRTC + sanntidsdata) · leksjon

WebSockets for toveis dataflyt

Implementer og forstå WebSockets, en full-dupleks-kommunikasjonsprotokoll som egner seg for toveis datautveksling i sanntid mellom klient og server.

Leksjon 2 av 411 trinn

WebSockets for toveis dataflyt er en gratis leksjon i Sanntidsstrømmesystemer (WebRTC + sanntidsdata) 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 Sanntidsstrømmesystemer (WebRTC + sanntidsdata), og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Sanntidsstrømmesystemer (WebRTC + sanntidsdata) inneholder totalt 4 leksjoner.

Hva er WebSockets?

Se for deg en telefonsamtale der begge kan snakke og lytte samtidig, uten å legge på og ringe opp igjen for hver setning. En WebSocket-tilkobling fungerer på lignende måte!

WebSockets tilbyr en full-dupleks-kommunikasjonskanal over én enkelt, langvarig tilkobling. Det betyr at data kan flyte i begge retninger samtidig, slik at interaksjoner i sanntid blir smidige og effektive.

Utover HTTP: Toveis dataflyt

Tradisjonell HTTP-kommunikasjon fungerer som å sende et brev og vente på svar. Hver forespørsel er separat.

HTTP: Klienten sender en forespørsel, og serveren sender et svar. Tilkoblingen lukkes vanligvis.
WebSockets: Når tilkoblingen er opprettet, kan klienten og serveren sende meldinger til hverandre når som helst, uten en ny forespørsel–svar-syklus. Tilkoblingen forblir åpen.

Denne vedvarende, toveis egenskapen er avgjørende for direkte oppdateringer.

Opprette en WebSocket

En WebSocket-tilkobling starter med en standard HTTP-forespørsel, men den inneholder en spesiell header for å «oppgradere» tilkoblingen.

Denne prosessen kalles WebSocket Handshake:

Klienten sender en HTTP-forespørsel med en «Upgrade»-header.
Serveren svarer med statusen «101 Switching Protocols».
Tilkoblingen blir deretter en vedvarende WebSocket-tilkobling.

Etter håndtrykket brukes den underliggende TCP-tilkoblingen til direkte utveksling av WebSocket-meldinger.

Nettleserens WebSocket-API

I nettlesere bruker du det innebygde WebSocket-API-et til å samhandle med WebSockets. Det er et JavaScript-objekt som håndterer tilkoblingsdetaljene for deg.

Du oppretter en ny WebSocket-instans ved å oppgi URL-en til WebSocket-serveren. Denne URL-en begynner vanligvis med ws:// for ukrypterte eller wss:// for krypterte tilkoblinger (sikre WebSockets).

Koble til en server

La oss se hvordan du oppretter en grunnleggende WebSocket-tilkobling fra nettleseren. Vi kobler til en offentlig ekko-server som ganske enkelt sender tilbake alt den mottar.

Prøv å kjøre dette eksempelet. Du skal se «Connected!» når tilkoblingen er opprettet.

<!DOCTYPE html>
<html>
<head>
  <title>WebSocket Connect</title>
</head>
<body>
  <h1>Connecting...</h1>
  <script>
    // Use wss:// for secure connections
    const socket = new WebSocket('wss://echo.websocket.events');

    socket.onopen = () => {
      document.querySelector('h1').innerText = 'Connected!';
      console.log('WebSocket connection opened');
    };

    socket.onerror = (error) => {
      document.querySelector('h1').innerText = 'Error!';
      console.error('WebSocket Error:', error);
    };
  </script>
</body>
</html>

Sende data til serveren

Når du er tilkoblet, kan du sende data til WebSocket-serveren ved hjelp av send()-metoden til WebSocket-objektet ditt. Du kan sende tekst, binærdata eller til og med JSON-strenger.

Skriv inn en melding i dette eksempelet og klikk på «Send». Ekko-serveren mottar den.

<!DOCTYPE html>
<html>
<head>
  <title>Send WebSocket</title>
</head>
<body>
  <input type="text" id="messageInput" placeholder="Type a message">
  <button onclick="sendMessage()">Send</button>
  <p id="status"></p>
  <script>
    const socket = new WebSocket('wss://echo.websocket.events');

    socket.onopen = () => {
      document.getElementById('status').innerText = 'Connected. Send a message!';
    };

    function sendMessage() {
      const input = document.getElementById('messageInput');
      const message = input.value;
      if (socket.readyState === WebSocket.OPEN) {
        socket.send(message);
        document.getElementById('status').innerText = 'Sent: ' + message;
        input.value = ''; // Clear input after sending
      } else {
        document.getElementById('status').innerText = 'Not connected yet!';
      }
    }
  </script>
</body>
</html>

Motta oppdateringer fra serveren

For å motta meldinger fra serveren lytter du etter message-hendelsen ved hjelp av socket.onmessage. Hendelsesobjektet inneholder dataene som ble mottatt.

Kjør denne koden. Den sender en melding når tilkoblingen åpnes, og viser deretter svaret fra ekko-serveren.

<!DOCTYPE html>
<html>
<head>
  <title>Receive WebSocket</title>
</head>
<body>
  <h1>Echo Messages</h1>
  <ul id="messages"></ul>
  <script>
    const socket = new WebSocket('wss://echo.websocket.events');

    socket.onopen = () => {
      console.log('WebSocket connection opened.');
      // Send a message to get a response from the echo server
      socket.send('Hello Echo Server!'); 
    };

    socket.onmessage = (event) => {
      const messageList = document.getElementById('messages');
      const newItem = document.createElement('li');
      newItem.textContent = 'Received: ' + event.data;
      messageList.appendChild(newItem);
    };

    socket.onerror = (error) => {
      console.error('WebSocket Error:', error);
    };
  </script>
</body>
</html>

Lukke WebSockets på en ryddig måte

Det er god praksis å administrere WebSocket-tilkoblingene dine. Du kan lukke en tilkobling ved hjelp av socket.close()-metoden.

Du kan også lytte etter andre hendelser:

socket.onclose: Utløses når tilkoblingen lukkes.
socket.onerror: Utløses hvis det oppstår en feil under tilkoblingen.

Riktig håndtering av disse hendelsene bidrar til robuste sanntidsapplikasjoner.

Der WebSockets virkelig utmerker seg

WebSockets passer perfekt for applikasjoner som trenger umiddelbare, kontinuerlige oppdateringer mellom klienter og servere. Vanlige bruksområder er:

Sanntidsbaserte chatteapplikasjoner: Meldinger vises umiddelbart for alle deltakerne.
Direkte sportsresultater og aksjekurser: Data oppdateres uten at siden må lastes inn på nytt.
Flerspillers nettspill: Synkronisering av spilltilstand og spillerhandlinger.
Samarbeidsredigering: Se andres endringer i sanntid.

De tilbyr et mer effektivt alternativ til å spørre serveren gjentatte ganger.

Kunnskapstest om WebSockets

Du har lært om WebSockets. La oss teste forståelsen din!

Besvar den i den interaktive leksjonen

Oppsummering av WebSockets

Godt jobbet! I denne leksjonen har du utforsket WebSockets, en kraftig teknologi for kommunikasjon i sanntid.

WebSockets tilbyr full-dupleks, toveis kommunikasjon.
De oppretter en vedvarende tilkobling etter et HTTP-håndtrykk.
Nettleserens WebSocket-API lar deg koble til, sende og motta meldinger.
WebSockets passer perfekt for applikasjoner som trenger umiddelbare, kontinuerlige oppdateringer.

Deretter skal du se nærmere på praktisk bruk av datakanaler i WebRTC!

Gratis å komme i gang

Lær deg Sanntidsstrømmesystemer (WebRTC + sanntidsdata) 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: 48

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «WebSockets for toveis dataflyt» gratis?

Ja – hele teksten i «WebSockets for toveis dataflyt» 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 Sanntidsstrømmesystemer (WebRTC + sanntidsdata)-kurset, kan du oppgradere til CoddyKit PRO. Kurset i Sanntidsstrømmesystemer (WebRTC + sanntidsdata) inneholder totalt 4 leksjoner.

Hva lærer jeg i «WebSockets for toveis dataflyt»?

Implementer og forstå WebSockets, en full-dupleks-kommunikasjonsprotokoll som egner seg for toveis datautveksling i sanntid mellom klient og server. Du øver på Sanntidsstrømmesystemer (WebRTC + sanntidsdata) 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 Sanntidsstrømmesystemer (WebRTC + sanntidsdata)?

Ingen tidligere erfaring er nødvendig. Sanntidsstrømmesystemer (WebRTC + sanntidsdata) 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 «WebSockets for toveis dataflyt»?

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 Sanntidsstrømmesystemer (WebRTC + sanntidsdata)-leksjonen?

Ja. Alle Sanntidsstrømmesystemer (WebRTC + sanntidsdata)-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

Sanntidsdata kontra tradisjonell HTTP
WebSockets for toveis dataflyt
Server-Sent Events (SSE) for enveis push
Long polling og utviklingen mot strømming

← Tilbake til Sanntidsstrømmesystemer (WebRTC + sanntidsdata)