Bootcamp i backendutveckling med Node.js · Lektion

Introduktion till WebSockets

Förstå WebSocket-protokollet, dess fördelar jämfört med HTTP för realtidskommunikation och hur det konfigureras i grunden.

Lektion 1 av 611 steg

Introduktion till WebSockets är en gratis lektion i Bootcamp i backendutveckling med Node.js på CoddyKit. Detta är lektion 1 av 6. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för Bootcamp i backendutveckling med Node.js, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Bootcamp i backendutveckling med Node.js innehåller totalt 6 lektioner.

Välkommen till WebSockets

Välkommen till WebSockets värld! I den här lektionen introduceras ett kraftfullt protokoll för kommunikation i realtid mellan klienter (som din webbläsare) och servrar.

Till skillnad från traditionell HTTP möjliggör WebSockets en beständig anslutning i båda riktningarna, vilket gör liveuppdateringar och interaktiva upplevelser möjliga.

Varför realtid är viktigt

Tänk på appar som chattklienter, resultattavlor för direktsänd sport eller redigerare för samarbetsdokument. Alla behöver omedelbara uppdateringar utan att sidan hela tiden måste läsas in på nytt.

Chattappar: Meddelanden visas direkt.
Livepaneler: Data uppdateras när den ändras.
Spel: Interaktion med låg fördröjning.

Det är här WebSockets verkligen kommer till sin rätt!

HTTP: Begäran och svar

Innan WebSockets förlitade sig det mesta av kommunikationen på webben på HTTP. HTTP använder en modell med begäran och svar:

Klienten skickar en begäran till servern.
Servern behandlar den och skickar tillbaka ett svar.

Varje interaktion använder en ny anslutning, vilket är ineffektivt vid kontinuerligt datautbyte i realtid.

WebSockets: En beständig länk

WebSockets upprättar en beständig full-duplex-kommunikationskanal över en enda TCP-anslutning.

Det innebär följande:

Både klienten och servern kan skicka data till varandra när som helst.
Det finns inget behov av att hela tiden öppna och stänga anslutningar.
Betydligt mindre overhead vid kontinuerlig kommunikation.

WebSocket-handskakningen

En WebSocket-anslutning börjar med en vanlig HTTP-begäran, men den innehåller en särskild header:

Upgrade: websocket
Connection: Upgrade

Den här "handskakningen" talar om för servern att klienten vill byta protokoll. Om servern godkänner uppgraderas anslutningen till WebSocket, och kommunikationen i realtid kan börja!

ws:// och wss://

Precis som HTTP har http:// och https:// använder WebSockets egna URI-scheman:

ws://: För okrypterade WebSocket-anslutningar.
wss://: För krypterade WebSocket-anslutningar (säkra och rekommenderade i produktion).

De anger protokollet och serveradressen som ska anslutas till.

Viktiga WebSocket-händelser

WebSockets är händelsestyrda. Din programkod lyssnar efter specifika händelser för att hantera kommunikationen:

onopen: Anslutningen har upprättats.
onmessage: Data har tagits emot från servern.
onclose: Anslutningen har stängts.
onerror: Ett fel har inträffat.

Med hjälp av dessa händelser kan du reagera på anslutningens livscykel.

En enkel klientanslutning

Här är ett grundläggande JavaScript-exempel som visar hur en klient (till exempel en webbläsare) initierar en WebSocket-anslutning och lyssnar efter händelser. Den här koden körs vanligtvis i en webbläsarmiljö.

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

Användningsområden för WebSocket

WebSockets passar utmärkt för program som kräver datautbyte i realtid med låg fördröjning. Några vanliga exempel är:

Chattappar online: Omedelbar leverans av meddelanden.
Liveflöden och paneler: Aktiekurser, sportresultat och analysdata.
Onlinespel för flera spelare: Spelarinteraktioner i realtid.
Samarbetsverktyg: Gemensam redigering av dokument.

Kontroll av WebSocket-protokollet

Nu kontrollerar vi dina kunskaper om WebSockets jämfört med HTTP.

Besvara frågan i den interaktiva lektionen

Sammanfattning och nästa steg

Bra jobbat! Du har nu lärt dig grunderna i WebSockets.

WebSockets tillhandahåller beständig full-duplex-kommunikation.
De börjar med en HTTP-handskakning och uppgraderas sedan.
De passar perfekt för realtidsprogram som chatt och liveuppdateringar.
Viktiga händelser är open, message, close och error.

Härnäst går vi igenom hur Socket.IO implementeras i Node.js för att skapa kraftfulla funktioner i realtid!

Gratis att börja

Lär dig JavaScript med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser: 22
Lektioner: 92

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”Introduktion till WebSockets” gratis?

Ja – hela texten till ”Introduktion till WebSockets” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i Bootcamp i backendutveckling med Node.js, kan Ni uppgradera till CoddyKit PRO. Kursen i Bootcamp i backendutveckling med Node.js innehåller totalt 6 lektioner.

Vad lär jag mig i ”Introduktion till WebSockets”?

Förstå WebSocket-protokollet, dess fördelar jämfört med HTTP för realtidskommunikation och hur det konfigureras i grunden. Ni övar på Bootcamp i backendutveckling med Node.js med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig Bootcamp i backendutveckling med Node.js?

Du behöver inga förkunskaper. Utbildningen i Bootcamp i backendutveckling med Node.js på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 1 av 6.

Hur lång tid tar lektionen ”Introduktion till WebSockets”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här Bootcamp i backendutveckling med Node.js-lektionen?

Ja. Varje Bootcamp i backendutveckling med Node.js-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

← Tillbaka till Bootcamp i backendutveckling med Node.js