WebSockets & Realtime Systems Programming · Lektion

Lebenszyklus und Zustände einer Verbindung

Erkunden Sie die verschiedenen Zustände einer WebSocket-Verbindung – vom Öffnen bis zum Schließen – und erfahren Sie, wie Sie sie verwalten.

Lektion 3 von 411 Schritte

Lebenszyklus und Zustände einer Verbindung ist eine kostenlose WebSockets & Realtime Systems Programming-Lektion auf CoddyKit. Dies ist Lektion 3 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des WebSockets & Realtime Systems Programming-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der WebSockets & Realtime Systems Programming-Kurs umfasst insgesamt 4 Lektionen.

Teile dieser Lektion wurden noch nicht übersetzt und werden auf Englisch angezeigt.

Understanding Connection States

When you work with WebSockets, it's crucial to know the current state of your connection. This helps you manage data flow and handle disconnections gracefully.

Just like a phone call goes through phases (dialing, connected, hanging up), a WebSocket connection has a defined lifecycle with specific states.

The CONNECTING State (0)

The very first state of a WebSocket is CONNECTING. This happens immediately after you create a new WebSocket object.

Its numeric value is 0.
In this state, the client is trying to establish a connection with the server.
This includes the initial HTTP handshake process that upgrades the connection to WebSocket.
You cannot send messages yet.

Connecting with Node.js

When a WebSocket client attempts to connect, it enters the CONNECTING state (readyState = 0). This is where the initial handshake occurs.

To run this Node.js example:

Make sure you have Node.js installed.
Open your terminal and run npm init -y
Install the ws library: npm install ws
Save the code below as index.js.
Run node index.js.

Note: You'll need a WebSocket server running on ws://localhost:8080 for a successful connection.

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

The OPEN State (1)

Once the handshake is complete and the connection is successfully established, the WebSocket enters the OPEN state.

Its numeric value is 1.
In this state, the connection is ready for bidirectional communication.
You can send data to the server, and the server can send data to you.
This is the active communication phase.

Handling the OPEN Event

The onopen event is fired once the WebSocket connection transitions from CONNECTING to OPEN. This is your cue that you can start sending messages.

Run this Node.js example to see the onopen event in action:

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

The CLOSING State (2)

When either the client or the server decides to terminate the connection, it enters the CLOSING state.

Its numeric value is 2.
This state occurs after ws.close() is called, but before the connection is fully shut down.
During this phase, a closing handshake is performed to ensure a clean termination.
No new messages should be sent, though some buffered messages might still be processed.

Gracefully Closing a Connection

You can explicitly close a WebSocket connection using the ws.close() method. This will transition the connection through the CLOSING state (readyState = 2) before finally becoming CLOSED (readyState = 3).

Observe the state changes when closing:

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

The CLOSED State (3)

The final state for a WebSocket connection is CLOSED.

Its numeric value is 3.
The connection has been completely terminated.
No further communication can occur on this particular WebSocket object.
If you need to reconnect, you must create a new WebSocket instance.

Checking Connection Status

You can always check the current state of a WebSocket connection using its readyState property. This property returns one of the numeric values (0, 1, 2, 3) or their corresponding named constants:

WebSocket.CONNECTING (0)
WebSocket.OPEN (1)
WebSocket.CLOSING (2)
WebSocket.CLOSED (3)

Using these constants makes your code more readable!

Quick Check: Connection States

The readyState property indicates the current status of a WebSocket connection.

Beantworte es in der interaktiven Lektion

Recap: WebSocket Lifecycle

Great job! You've learned about the four essential states of a WebSocket connection:

CONNECTING (0): Handshake in progress.
OPEN (1): Connection established, ready for data.
CLOSING (2): Close handshake initiated.
CLOSED (3): Connection terminated.

Understanding these states is fundamental for building robust and reliable realtime applications.

Kostenlos starten

Lerne WebSockets & Realtime Systems Programming mit einem KI-Tutor — kostenlos

Schreibe und führe echten Code in deinem Browser aus, bekomme sofortige Hilfe von einem 24/7 KI-Tutor und setze dein Lernen im Web oder in der App fort.

Kurse: 12
Lektionen: 47

Kostenlos lernen Den vollständigen Kurs ansehen

Häufig gestellte Fragen

Ist die Lektion „Lebenszyklus und Zustände einer Verbindung“ kostenlos?

Ja — der vollständige Text von „Lebenszyklus und Zustände einer Verbindung“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des WebSockets & Realtime Systems Programming-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der WebSockets & Realtime Systems Programming-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Lebenszyklus und Zustände einer Verbindung“?

Erkunden Sie die verschiedenen Zustände einer WebSocket-Verbindung – vom Öffnen bis zum Schließen – und erfahren Sie, wie Sie sie verwalten. Du übst WebSockets & Realtime Systems Programming mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um WebSockets & Realtime Systems Programming zu starten?

Keine Vorkenntnisse erforderlich. WebSockets & Realtime Systems Programming auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 3 von 4.

Wie lange dauert die Lektion „Lebenszyklus und Zustände einer Verbindung“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser WebSockets & Realtime Systems Programming-Lektion Code schreiben und ausführen?

Ja. Jede WebSockets & Realtime Systems Programming-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

Der WebSocket-Handshake erklärt
WebSocket-Daten-Frames und Nachrichten
Lebenszyklus und Zustände einer Verbindung
Subprotokolle, Erweiterungen und Komprimierung

← Zurück zu WebSockets & Realtime Systems Programming