WebSocket is a communication protocol that facilitates full-duplex communication channels over a single, long-lived connection. It's designed to be efficient and minimize overhead compared to traditional HTTP-based communication. Here's a simplified explanation of how WebSocket works under the hood:

The process begins with a WebSocket handshake initiated by the client. The client sends a standard HTTP request to the server, expressing the desire to upgrade the connection to a WebSocket connection. The client includes a special header, 

, indicating the intention to establish a WebSocket connection. If the server supports WebSocket and agrees to the upgrade, it responds with an HTTP 101 status code (Switching Protocols), confirming a successful upgrade.

Once the handshake is complete, the connection is upgraded from HTTP to WebSocket. This results in a persistent, full-duplex connection, eliminating the need to repeatedly open and close connections for each message.

WebSocket communication is frame-based, where data is exchanged in small binary or text frames between the client and the server. Each frame can carry a part of the message, and multiple frames can be used to transmit a larger message.

---
title: Understanding WebSockets Under The Hood
---

## WebSocket Under the Hood

WebSocket is a communication protocol that facilitates full-duplex communication channels over a single, long-lived connection. It's designed to be efficient and minimize overhead compared to traditional HTTP-based communication. Here's a simplified explanation of how WebSocket works under the hood:

### 1. Handshake:

The process begins with a WebSocket handshake initiated by the client. The client sends a standard HTTP request to the server, expressing the desire to upgrade the connection to a WebSocket connection. The client includes a special header, `Upgrade: webSocket`, indicating the intention to establish a WebSocket connection. If the server supports WebSocket and agrees to the upgrade, it responds with an HTTP 101 status code (Switching Protocols), confirming a successful upgrade.

### 2. Persistent Connection:

Once the handshake is complete, the connection is upgraded from HTTP to WebSocket. This results in a persistent, full-duplex connection, eliminating the need to repeatedly open and close connections for each message.

### 3. Frame-Based Communication:

WebSocket communication is frame-based, where data is exchanged in small binary or text frames between the client and the server. Each frame can carry a part of the message, and multiple frames can be used to transmit a larger message.

### 4. Data Framing:

Each frame typically includes an opcode that defines the type of message (text, binary, ping, pong, etc.) and payload data. Payload data can be anything, depending on the opcode. For text frames, it's UTF-8 encoded text, while for binary frames, it can be any binary data.

Learn

The newline Guide to Building Your First GraphQL Server with Node and TypeScript

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

Masterclasses

Tutorials

Fullstack React with TypeScript