WebSockets & Realtime Systems Programming · Lektion

Der WebSocket-Handshake erklärt

Analysieren Sie den HTTP-basierten Handshake-Prozess, der eine standardmäßige HTTP-Verbindung zu einer WebSocket-Verbindung hochstuft.

Lektion 1 von 410 Schritte

Der WebSocket-Handshake erklärt ist eine kostenlose WebSockets & Realtime Systems Programming-Lektion auf CoddyKit. Dies ist Lektion 1 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.

Handshake: The Connection Upgrade

Imagine you're calling a friend, but instead of just talking, you first agree on a secret language. The WebSocket handshake is similar!

It's the crucial initial step where your browser (client) and a server agree to switch from a standard HTTP connection to a WebSocket connection.

Beyond HTTP's Limitations

Traditional HTTP is designed for short, one-off requests and responses. Think of loading a webpage – you ask, the server sends, and the connection closes.

  • One-way: Client requests, server responds.
  • Short-lived: Connection closes after each interaction.
  • Overhead: Each new request needs to set up a new connection.

WebSockets need a persistent, two-way street for real-time data.

Client Initiates the Upgrade

The handshake begins with the client (your browser) sending a regular HTTP GET request to the server. But it's not truly "regular"!

This request includes special HTTP headers that signal the client's intention to "upgrade" to the WebSocket protocol. It's like adding a special note to your call asking to switch to the secret language.

Signaling the Intent to Switch

Two key headers clearly tell the server the client wants a WebSocket connection:

  • Upgrade: websocket: This header specifies the protocol the client wants to switch to.
  • Connection: Upgrade: This header is a general HTTP header that indicates the client wishes to upgrade or switch protocols.

Together, they form the core of the upgrade request.

The Client's Secret Key

Another vital header from the client is Sec-WebSocket-Key.

  • It's a 16-byte random value, encoded in Base64.
  • It acts as a unique, unpredictable "nonce" (number used once) for each handshake.
  • The server uses this key to prove it understands the WebSocket protocol and to prevent certain types of caching or proxy issues.

Protocol Version Check

The Sec-WebSocket-Version header is straightforward but important.

It tells the server which version of the WebSocket protocol the client is using. Currently, the standard version is 13.

This ensures both client and server speak the same "dialect" of the WebSocket language, guaranteeing compatibility.

Server Responds: 101 Switching Protocols

If the server supports WebSockets and agrees to the upgrade, it sends a special HTTP response back to the client.

The most important part of this response is the HTTP status code 101: Switching Protocols. This code explicitly means the server is changing protocols as requested by the client.

Server's Confirmation Key

The server's response also includes key headers:

  • Upgrade: websocket and Connection: Upgrade: Mirroring the client, these confirm the server's agreement to upgrade.
  • Sec-WebSocket-Accept: This is a hash generated by the server using the client's Sec-WebSocket-Key plus a specific "magic string". It proves the server understood the key and is capable of WebSockets.

Handshake Key Check

You've learned about the important headers involved in the WebSocket handshake.

Which of the following headers is sent by the client to initiate the WebSocket upgrade, and contains a random, unique value?

Connection Upgraded & Ready!

Once the client receives and validates the server's 101 response with the correct Sec-WebSocket-Accept header, the HTTP handshake is complete!

The connection is now upgraded to a full-duplex WebSocket. Both client and server can send and receive data simultaneously over this persistent connection, enabling true real-time communication.

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

Häufig gestellte Fragen

Ist die Lektion „Der WebSocket-Handshake erklärt“ kostenlos?

Ja — der vollständige Text von „Der WebSocket-Handshake erklärt“ 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 „Der WebSocket-Handshake erklärt“?

Analysieren Sie den HTTP-basierten Handshake-Prozess, der eine standardmäßige HTTP-Verbindung zu einer WebSocket-Verbindung hochstuft. 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 1 von 4.

Wie lange dauert die Lektion „Der WebSocket-Handshake erklärt“?

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

  1. Der WebSocket-Handshake erklärt
  2. WebSocket-Daten-Frames und Nachrichten
  3. Lebenszyklus und Zustände einer Verbindung
  4. Subprotokolle, Erweiterungen und Komprimierung
← Zurück zu WebSockets & Realtime Systems Programming