0Pricing
WebSockets & Realtime Systems Programming · Leçon

Le protocole d’établissement de connexion WebSocket expliqué

Analysez le processus d’établissement de connexion fondé sur HTTP qui transforme une connexion HTTP standard en connexion WebSocket.

Le protocole d’établissement de connexion WebSocket expliqué est une leçon WebSockets & Realtime Systems Programming gratuite sur CoddyKit. Ceci est la leçon 1 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage WebSockets & Realtime Systems Programming, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours WebSockets & Realtime Systems Programming comprend 4 leçons au total.

Certaines parties de cette leçon n'ont pas encore été traduites et s'affichent en anglais.

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.

Questions Fréquemment Posées

La leçon « Le protocole d’établissement de connexion WebSocket expliqué » est-elle gratuite ?

Oui — le texte complet de « Le protocole d’établissement de connexion WebSocket expliqué » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours WebSockets & Realtime Systems Programming, passe à CoddyKit PRO. Le cours WebSockets & Realtime Systems Programming comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Le protocole d’établissement de connexion WebSocket expliqué » ?

Analysez le processus d’établissement de connexion fondé sur HTTP qui transforme une connexion HTTP standard en connexion WebSocket. Tu pratiques WebSockets & Realtime Systems Programming avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer WebSockets & Realtime Systems Programming ?

Aucune expérience préalable n'est requise. WebSockets & Realtime Systems Programming sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 1 sur 4.

Combien de temps prend la leçon « Le protocole d’établissement de connexion WebSocket expliqué » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon WebSockets & Realtime Systems Programming ?

Oui. Chaque leçon WebSockets & Realtime Systems Programming inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

  1. Le protocole d’établissement de connexion WebSocket expliqué
  2. Encadrement et messages WebSocket
  3. Cycle de vie et états d’une connexion
  4. Sous-protocoles, extensions et compression
← Retour à WebSockets & Realtime Systems Programming