El handshake de WebSocket explicado
Analice el proceso de handshake basado en HTTP que transforma una conexión HTTP estándar en una conexión WebSocket.
El handshake de WebSocket explicado es una lección gratuita de WebSockets & Realtime Systems Programming en CoddyKit. Esta es la lección 1 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de WebSockets & Realtime Systems Programming, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de WebSockets & Realtime Systems Programming incluye 4 lecciones en total.
Partes de esta lección aún no han sido traducidas y se muestran en inglés.
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: websocketandConnection: 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'sSec-WebSocket-Keyplus 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.
Preguntas frecuentes
¿La lección «El handshake de WebSocket explicado» es gratis?
Sí — el texto completo de «El handshake de WebSocket explicado» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de WebSockets & Realtime Systems Programming, actualiza a CoddyKit PRO. El curso de WebSockets & Realtime Systems Programming incluye 4 lecciones en total.
¿Qué aprenderé en «El handshake de WebSocket explicado»?
Analice el proceso de handshake basado en HTTP que transforma una conexión HTTP estándar en una conexión WebSocket. Practicas WebSockets & Realtime Systems Programming con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar WebSockets & Realtime Systems Programming?
No se requiere experiencia previa. WebSockets & Realtime Systems Programming en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 1 de 4.
¿Cuánto tiempo toma la lección «El handshake de WebSocket explicado»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de WebSockets & Realtime Systems Programming?
Sí. Cada lección de WebSockets & Realtime Systems Programming incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- El handshake de WebSocket explicado
- Tramas y mensajes de datos de WebSocket
- Ciclo de vida y estados de una conexión
- Subprotocolos, extensiones y compresión