W
WebDevGuide
⚡

WebSockets

Real-time bi-directional communication and handshake process

What are WebSockets?

Real-time bi-directional communication for the modern web

WebSockets provide a persistent, full-duplex communication channel between a client and server over a single TCP connection. Unlike HTTP's request-response model, WebSockets allow both sides to send messages independently and simultaneously.

A WebSocket connection starts as a regular HTTP request with an Upgrade: websocket header. Once the server agrees, the protocol switches from HTTP to WebSocket, and both sides can exchange lightweight frames with minimal overhead (as low as 2 bytes per frame).

The WebSocket Handshake

How an HTTP connection upgrades to WebSocket

WebSocket Opening Handshake

Watch the upgrade from HTTP to WebSocket protocol

Client
HTTP Request (Upgrade)
Server
HTTP Request (Upgrade)

Client sends a regular HTTP request with Upgrade: websocket header and a random Sec-WebSocket-Key

GET /chat HTTP/1.1
Host: server.example.com
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: dGhlIHNhbXBsZQ==
Sec-WebSocket-Version: 13
Sec-WebSocket-Key

Random base64-encoded value sent by client. Server hashes it with a GUID to prove it received the request.

Sec-WebSocket-Accept

Server's proof of understanding. Computed by concatenating the key with a magic GUID and taking the SHA-1 hash.

Bi-Directional Message Flow

Real-time data exchange between client and server

Live Message Stream

Watch messages flow between client and server in real-time

Client
Messages will appear here...
Server
Text Frame

UTF-8 encoded text data (JSON, plain text)

Binary Frame

Raw binary data (images, audio, files)

Ping / Pong

Keep-alive heartbeat frames

Close Frame

Graceful connection termination

Connection Lifecycle

WebSocket API events, ready states, and close codes

WebSocket Ready States

WebSocket Events

Click an event to see example code

Creating a WebSocket Connection

// Create a new WebSocket connection
const ws = new WebSocket('wss://api.example.com/ws');

// Send data (only when readyState is OPEN)
ws.send(JSON.stringify({ type: 'chat', message: 'Hello!' }));

// Close the connection gracefully
ws.close(1000, 'Normal closure');

Common Close Codes

1000 Normal Closure
1001 Going Away
1006 Abnormal Closure
1008 Policy Violation
1011 Internal Error

WebSockets vs Alternatives

Choosing the right real-time communication approach

Real-Time Communication Approaches

Compare polling, long polling, SSE, and WebSockets

Click on an approach to compare details

Connection Patterns

Polling
Long Poll
SSE
WebSocket
Request
Response
Waiting
Bi-directional

Common Use Cases

When WebSockets are the right tool for the job

Click on a use case to learn more
💡

When NOT to Use WebSockets

  • • Simple CRUD: REST APIs are simpler and more appropriate
  • • One-way server pushes: Server-Sent Events (SSE) are lighter
  • • Infrequent updates: HTTP polling is simpler to implement
  • • Request/response patterns: HTTP with caching is more efficient

Key Terms to Remember

Master these terms for technical interviews