What is a WebSocket? How is WebSocket different from HTTP?

Question

Accepted Answer

WebSocket is a communication protocol designed for real-time, bidirectional, and full-duplex communication between a client (like a web browser) and a server. Unlike HTTP, where the client must initiate every request, WebSocket allows the server to push data to the client at any time, making it ideal for applications requiring live updates such as chat applications, online gaming, financial trading dashboards, and collaborative editing tools. The protocol starts with an HTTP handshake and then upgrades the connection to the WebSocket protocol. **HTTP handshake**: The client sends an HTTP request with an `Upgrade: websocket` header, indicating it wants to switch to the WebSocket protocol . **Protocol upgrade**: If the server supports WebSocket, it responds with a `101 Switching Protocols` status code, and the connection is upgraded . **Persistent connection**: After upgrade, the TCP connection remains open, allowing both client and server to send messages at any time . **Full-duplex communication**: Data can flow in both directions simultaneously, unlike HTTP's half-duplex where one side waits for the other . **Framed messages**: WebSocket uses a lightweight framing format with small overhead (2-14 bytes per message), efficient for many small messages . **Close handshake**: Either party can initiate a close handshake to terminate the connection gracefully . // Client request (HTTP upgrade)
GET /chat HTTP/1.1
Host: server.example.com
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ==
Sec-WebSocket-Protocol: chat, superchat
Sec-WebSocket-Version: 13
Origin: http://example.com

// Server response (switching protocols)
HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: s3pPLMBiTxaQ9kYGzzhZRbK+xOo=
Sec-WebSocket-Protocol: chat

// JavaScript client code
const socket = new WebSocket('ws://server.example.com/chat');

socket.onopen = (event) => {
  socket.send('Hello Server!'); // Send message
};

socket.onmessage = (event) => {
  console.log('Message from server:', event.data);
};

socket.onclose = (event) => {
  console.log('Connection closed');
}; **Communication model**: HTTP is request-response (client asks, server answers). WebSocket is full-duplex (both sides can send anytime) . **Connection lifetime**: HTTP connections are typically short-lived (closed after response). WebSocket connections are long-lived and persistent . **Overhead per message**: HTTP has significant header overhead per request (hundreds of bytes). WebSocket has minimal framing overhead (2-14 bytes) . **Directionality**: HTTP only allows server to respond to client requests. WebSocket allows server to initiate communication . **Statefulness**: HTTP is stateless by design (though cookies/sessions add state). WebSocket maintains connection state throughout . **Protocol layers**: HTTP is application layer; WebSocket operates over TCP but with its own framing, often layered on HTTP for handshake . **Browser support**: Both are well-supported, but WebSocket requires modern browsers and server configuration . The fundamental difference is that HTTP was designed for document retrieval—a client asks for something, and the server delivers it. WebSocket was designed for conversations—a continuous, bidirectional exchange of messages. In HTTP, if the server wants to send data to the client, the client must have previously requested it (polling) or the server must trick the client into requesting it (long-polling, server-sent events). WebSocket eliminates this asymmetry. // HTTP Long-Polling (before WebSocket)
function pollForUpdates() {
  fetch('/api/updates')
    .then(response => response.json())
    .then(updates => {
      processUpdates(updates);
      // Immediately poll again
      pollForUpdates();
    });
}

// Problems:
// - New HTTP connection for every message
// - High latency (message waits for next poll)
// - Server can't push immediately

// WebSocket approach
const socket = new WebSocket('ws://api.example.com');

socket.onmessage = (event) => {
  // Server pushes immediately when data available
  processUpdates(JSON.parse(event.data));
};

// Benefits:
// - Single persistent connection
// - Minimal latency
// - Server can send anytime
// - Lower overhead per message **Message types**: Can send text (UTF-8) or binary data (Blob, ArrayBuffer) . **Subprotocols**: Can negotiate subprotocols like MQTT, STOMP, or custom protocols during handshake . **Extensions**: Support for compression (permessage-deflate) and other extensions . **Heartbeat/ping-pong**: Built-in ping/pong frames to keep connections alive and detect disconnections . **Cross-origin**: Uses Origin header for security, similar to CORS . **Secure WebSocket (wss://)**: Encrypted version over TLS, analogous to HTTPS . For the JavaScript engine, WebSocket is an API provided by the browser or Node.js runtime, not a feature of the language itself. When you create a WebSocket in JavaScript, the engine delegate

What is a WebSocket? How is WebSocket different from HTTP?

WebSocket is a protocol that provides full-duplex, persistent communication channels over a single TCP connection, enabling real-time bidirectional data flow between client and server, fundamentally different from HTTP's request-response model.

What is a WebSocket? How is WebSocket different from HTTP?

WebSocket is a protocol that provides full-duplex, persistent communication channels over a single TCP connection, enabling real-time bidirectional data flow between client and server, fundamentally different from HTTP's request-response model.

Scenario Questions

Follow-up Questions