Bootcamp i backendutvikling med Node.js · leksjon

Introduksjon til WebSockets

Forstå WebSocket-protokollen, fordelene sammenlignet med HTTP for sanntidskommunikasjon og grunnleggende oppsett.

Leksjon 1 av 611 trinn

Introduksjon til WebSockets er en gratis leksjon i Bootcamp i backendutvikling med Node.js på CoddyKit. Dette er leksjon 1 av 6. 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 Bootcamp i backendutvikling med Node.js, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Bootcamp i backendutvikling med Node.js inneholder totalt 6 leksjoner.

Velkommen til WebSockets

Velkommen til WebSockets-verdenen! I denne leksjonen blir De introdusert for en kraftig protokoll for sanntidskommunikasjon mellom klienter (for eksempel nettleseren Deres) og servere.

I motsetning til tradisjonell HTTP gjør WebSockets det mulig å opprette en vedvarende forbindelse i begge retninger, slik at direkte oppdateringer og interaktive opplevelser blir mulig.

Hvorfor sanntid er viktig

Tenk på apper som chattemeldinger, resultattavler for direktesendt sport eller redigeringsverktøy for samarbeidsdokumenter. Alle trenger umiddelbare oppdateringer uten stadig å måtte laste inn siden på nytt.

  • Chatteapper: Meldinger vises umiddelbart.
  • Dashbord i sanntid: Data oppdateres når den endres.
  • Spill: Interaksjon med lav forsinkelse.

Det er her WebSockets virkelig kommer til sin rett!

HTTP: Forespørsel og svar

Før WebSockets var det meste av webkommunikasjonen basert på HTTP. HTTP bruker en modell med forespørsel og svar:

  • Klienten sender en forespørsel til serveren.
  • Serveren behandler den og sender et svar tilbake.

Hver interaksjon oppretter en ny forbindelse, noe som er lite effektivt ved kontinuerlig utveksling av data i sanntid.

WebSockets: En vedvarende forbindelse

WebSockets oppretter en vedvarende, full-dupleks kommunikasjonskanal over én TCP-forbindelse.

Det betyr at:

  • Både klienten og serveren kan sende data til hverandre når som helst.
  • Det er ikke nødvendig å stadig åpne og lukke forbindelser.
  • Overheaden blir mye lavere ved kontinuerlig kommunikasjon.

WebSocket-håndtrykket

En WebSocket-forbindelse starter med en vanlig HTTP-forespørsel, men den inneholder en spesiell header:

Upgrade: websocket
Connection: Upgrade

Dette «håndtrykket» forteller serveren at klienten ønsker å bytte protokoll. Hvis serveren godtar det, blir forbindelsen «oppgradert» til WebSocket, og sanntidskommunikasjonen kan begynne!

ws:// og wss://

Akkurat som HTTP har http:// og https://, bruker WebSockets egne URI-skjemaer:

  • ws://: For WebSocket-forbindelser uten kryptering.
  • wss://: For krypterte WebSocket-forbindelser (sikre og anbefalt i produksjon).

Disse angir protokollen og serveradressen det skal kobles til.

Viktige WebSocket-hendelser

WebSockets er hendelsesstyrte. Programkoden Deres lytter etter bestemte hendelser for å håndtere kommunikasjonen:

  • onopen: Forbindelsen er opprettet.
  • onmessage: Data er mottatt fra serveren.
  • onclose: Forbindelsen er lukket.
  • onerror: Det oppstod en feil.

Disse hendelsene gjør det mulig å reagere på forbindelsens livssyklus.

En enkel klientforbindelse

Her er et grunnleggende JavaScript-eksempel på hvordan en klient (for eksempel en nettleser) oppretter en WebSocket-forbindelse og lytter etter hendelser. Denne koden kjøres vanligvis i et nettlesermiljø.

const socket = new WebSocket('ws://localhost:8080');

socket.onopen = (event) => {
  console.log('Connected to WebSocket server!');
  socket.send('Hello from client!');
};

socket.onmessage = (event) => {
  console.log('Message from server:', event.data);
};

socket.onclose = (event) => {
  console.log('Disconnected:', event.code, event.reason);
};

socket.onerror = (error) => {
  console.error('WebSocket Error:', error);
};

Bruksområder for WebSocket

WebSockets passer utmerket for apper som trenger datautveksling i sanntid med lav forsinkelse. Noen vanlige eksempler er:

  • Nettbaserte chatteapplikasjoner: Umiddelbar levering av meldinger.
  • Direktesendte strømmer og dashbord: Aksjekurser, sportsresultater og analyser.
  • Nettbaserte flerspillerspill: Spillerinteraksjon i sanntid.
  • Samarbeidsverktøy: Redigering av delte dokumenter.

Kontroll av WebSocket-protokollen

La oss kontrollere forståelsen Deres av WebSockets sammenlignet med HTTP.

Oppsummering og veien videre

Godt jobbet! De har nettopp lært det grunnleggende om WebSockets.

  • WebSockets gir vedvarende kommunikasjon i begge retninger.
  • De starter med et HTTP-håndtrykk og blir deretter oppgradert.
  • De passer perfekt for sanntidsapplikasjoner som chat og direkte oppdateringer.
  • Viktige hendelser omfatter open, message, close og error.

Deretter skal vi se nærmere på hvordan Socket.IO implementeres i Node.js for å bygge kraftige sanntidsfunksjoner!

Gratis å komme i gang

Lær deg JavaScript 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
22
Leksjoner
92

Ofte stilte spørsmål

Er leksjonen «Introduksjon til WebSockets» gratis?

Ja – hele teksten i «Introduksjon til WebSockets» 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 Bootcamp i backendutvikling med Node.js-kurset, kan du oppgradere til CoddyKit PRO. Kurset i Bootcamp i backendutvikling med Node.js inneholder totalt 6 leksjoner.

Hva lærer jeg i «Introduksjon til WebSockets»?

Forstå WebSocket-protokollen, fordelene sammenlignet med HTTP for sanntidskommunikasjon og grunnleggende oppsett. Du øver på Bootcamp i backendutvikling med Node.js 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 Bootcamp i backendutvikling med Node.js?

Ingen tidligere erfaring er nødvendig. Bootcamp i backendutvikling med Node.js 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 6.

Hvor lang tid tar leksjonen «Introduksjon til WebSockets»?

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 Bootcamp i backendutvikling med Node.js-leksjonen?

Ja. Alle Bootcamp i backendutvikling med Node.js-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

  1. Introduksjon til WebSockets
  2. WebSockets med NestJS
  3. Implementere Socket.IO i Node.js
  4. Konfigurasjon av gatewayer
  5. Bygge en sanntids chatapplikasjon
  6. Chatapplikasjon i sanntid
← Tilbake til Bootcamp i backendutvikling med Node.js