Anslutningens livscykel och tillstånd
Utforska de olika tillstånden hos en WebSocket-anslutning, från öppning till stängning, och hur de hanteras.
Anslutningens livscykel och tillstånd är en gratis lektion i Programmering av WebSockets och system i realtid på CoddyKit. Detta är lektion 3 av 4. 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 Programmering av WebSockets och system i realtid, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Programmering av WebSockets och system i realtid innehåller totalt 4 lektioner.
Förstå anslutningstillstånd
När du arbetar med WebSockets är det viktigt att känna till anslutningens aktuella tillstånd. Det hjälper dig att hantera dataflödet och hantera frånkopplingar på ett smidigt sätt.
Precis som ett telefonsamtal går igenom olika faser (uppringning, anslutning och avslutning) har en WebSocket-anslutning en definierad livscykel med specifika tillstånd.
Tillståndet CONNECTING (0)
Det allra första tillståndet för en WebSocket är CONNECTING. Det inträffar direkt efter att du har skapat ett nytt WebSocket-objekt.
- Dess numeriska värde är
0. - I det här tillståndet försöker klienten upprätta en anslutning till servern.
- Detta omfattar den inledande HTTP-handskakningen som uppgraderar anslutningen till WebSocket.
- Du kan ännu inte skicka meddelanden.
Ansluta med Node.js
När en WebSocket-klient försöker ansluta går den in i tillståndet CONNECTING (readyState = 0). Det är då den inledande handskakningen sker.
Så här kör du det här Node.js-exemplet:
- Kontrollera att Node.js är installerat.
- Öppna terminalen och kör
npm init -y - Installera biblioteket
ws:npm install ws - Spara koden nedan som
index.js. - Kör
node index.js.
Obs! För att anslutningen ska lyckas måste en WebSocket-server köra på ws://localhost:8080.
const WebSocket = require('ws');
const ws = new WebSocket('ws://localhost:8080');
console.log(`Initial state: ${ws.readyState}`); // Expected: 0 (CONNECTING)
ws.onopen = () => {
console.log(`Connection opened! State: ${ws.readyState}`); // Expected: 1 (OPEN)
ws.send('Hello from CoddyKit client!');
setTimeout(() => ws.close(1000, 'Demo complete'), 2000);
};
ws.onmessage = (event) => {
console.log(`Received: ${event.data}`);
};
ws.onclose = (event) => {
console.log(`Connection closed. Code: ${event.code}, Reason: ${event.reason}`);
console.log(`Final state: ${ws.readyState}`); // Expected: 3 (CLOSED)
};
ws.onerror = (error) => {
console.error('WebSocket Error:', error.message);
};Tillståndet OPEN (1)
När handskakningen är klar och anslutningen har upprättats går WebSocket-anslutningen in i tillståndet OPEN.
- Dess numeriska värde är
1. - I det här tillståndet är anslutningen redo för dubbelriktad kommunikation.
- Du kan skicka data till servern och servern kan skicka data till dig.
- Detta är den aktiva kommunikationsfasen.
Hantera händelsen OPEN
Händelsen onopen utlöses när WebSocket-anslutningen övergår från CONNECTING till OPEN. Det är signalen till dig att du kan börja skicka meddelanden.
Kör det här Node.js-exemplet för att se händelsen onopen i praktiken:
const WebSocket = require('ws');
const ws = new WebSocket('ws://localhost:8080');
ws.onopen = () => {
console.log('WebSocket connection is now OPEN!');
console.log(`Current state: ${ws.readyState}`); // Expected: 1 (OPEN)
ws.send('Ready to chat!');
setTimeout(() => ws.close(), 1500); // Close after a short delay
};
ws.onmessage = (event) => {
console.log('Received:', event.data);
};
ws.onclose = () => {
console.log('Connection closed.');
};
ws.onerror = (error) => {
console.error('Error:', error.message);
};Tillståndet CLOSING (2)
När klienten eller servern beslutar att avsluta anslutningen går den in i tillståndet CLOSING.
- Dess numeriska värde är
2. - Det här tillståndet inträffar efter att
ws.close()har anropats, men innan anslutningen har stängts helt. - Under den här fasen genomförs en avslutande handskakning för att säkerställa ett korrekt avslut.
- Inga nya meddelanden bör skickas, även om vissa buffrade meddelanden fortfarande kan behandlas.
Stänga en anslutning på ett korrekt sätt
Du kan uttryckligen stänga en WebSocket-anslutning med metoden ws.close(). Då övergår anslutningen till tillståndet CLOSING (readyState = 2) innan den slutligen blir CLOSED (readyState = 3).
Observera tillståndsändringarna när anslutningen stängs:
const WebSocket = require('ws');
const ws = new WebSocket('ws://localhost:8080');
ws.onopen = () => {
console.log(`Connection OPEN. State: ${ws.readyState}`); // 1
console.log('Initiating connection close...');
ws.close(1000, 'Client requested shutdown'); // Code 1000: normal closure
console.log(`State after calling close(): ${ws.readyState}`); // Expected: 2 (CLOSING)
};
ws.onclose = (event) => {
console.log(`Connection CLOSED. State: ${ws.readyState}`); // 3
console.log(`Close Code: ${event.code}, Reason: ${event.reason}`);
};
ws.onerror = (error) => {
console.error('Error during connection:', error.message);
};Tillståndet CLOSED (3)
Det slutliga tillståndet för en WebSocket-anslutning är CLOSED.
- Dess numeriska värde är
3. - Anslutningen har avslutats helt.
- Ingen ytterligare kommunikation kan ske med just det här WebSocket-objektet.
- Om du behöver ansluta igen måste du skapa en ny
WebSocket-instans.
Kontrollera anslutningens status
Du kan alltid kontrollera det aktuella tillståndet för en WebSocket-anslutning med egenskapen readyState. Egenskapen returnerar ett av de numeriska värdena (0, 1, 2, 3) eller motsvarande namngivna konstanter:
WebSocket.CONNECTING(0)WebSocket.OPEN(1)WebSocket.CLOSING(2)WebSocket.CLOSED(3)
Om du använder dessa konstanter blir koden mer lättläst!
Snabbtest: Anslutningstillstånd
Egenskapen readyState anger det aktuella tillståndet för en WebSocket-anslutning.
Sammanfattning: WebSocket-livscykeln
Bra jobbat! Du har lärt dig om de fyra grundläggande tillstånden för en WebSocket-anslutning:
CONNECTING(0): Handskakning pågår.OPEN(1): Anslutningen är upprättad och redo för data.CLOSING(2): Avslutande handskakning har initierats.CLOSED(3): Anslutningen har avslutats.
Att förstå dessa tillstånd är grundläggande för att bygga robusta och tillförlitliga realtidsapplikationer.
Lär dig Programmering av WebSockets och system i realtid 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
- 12
- Lektioner
- 47
Vanliga frågor
Är lektionen ”Anslutningens livscykel och tillstånd” gratis?
Ja – hela texten till ”Anslutningens livscykel och tillstånd” 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 Programmering av WebSockets och system i realtid, kan Ni uppgradera till CoddyKit PRO. Kursen i Programmering av WebSockets och system i realtid innehåller totalt 4 lektioner.
Vad lär jag mig i ”Anslutningens livscykel och tillstånd”?
Utforska de olika tillstånden hos en WebSocket-anslutning, från öppning till stängning, och hur de hanteras. Ni övar på Programmering av WebSockets och system i realtid 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 Programmering av WebSockets och system i realtid?
Du behöver inga förkunskaper. Utbildningen i Programmering av WebSockets och system i realtid 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 3 av 4.
Hur lång tid tar lektionen ”Anslutningens livscykel och tillstånd”?
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 Programmering av WebSockets och system i realtid-lektionen?
Ja. Varje Programmering av WebSockets och system i realtid-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
- WebSocket-handshaken förklarad
- WebSocket-dataramning och meddelanden
- Anslutningens livscykel och tillstånd
- Subprotokoll, tillägg och komprimering