WebSockets: A Persistent, Two-Way Connection

Why it exists

Standard HTTP is inefficient for real-time, server-initiated communication. It's a request-response protocol, meaning the client must constantly poll the server to check for new data, which adds latency and overhead. WebSockets were created to provide a single, long-lived, full-duplex connection, allowing the server to push data to the client instantly.

The mental model

Imagine HTTP is like sending postal mail; you send a letter and wait for a reply. Each exchange is a separate transaction. A WebSocket is like opening a phone line; once connected, both parties can talk freely and instantly in either direction until one hangs up. This persistent, two-way channel is the key difference.

How it works

A WebSocket connection begins as a standard HTTP request with a special "Upgrade" header. If the server supports WebSockets, it agrees, and the connection is promoted from HTTP to the WebSocket protocol. From that point on, you interact with it via an event-driven API. You listen for events like open (connection established), message (data received), error, and close. To send data, you call the send() method on the socket object.

When to use it

Use WebSockets for features that require low-latency, real-time updates pushed from the server. Prime examples include live chat apps, collaborative editing tools (like in Google Docs), multiplayer game state synchronization, and live data feeds for stock tickers or sports scores.

When not to use it

Avoid WebSockets for fetching static or infrequently updated data where the client initiates all requests; standard HTTP is more efficient and cache-friendly for this. The most significant footgun is the lack of built-in backpressure. If a server sends messages faster than your client can process them, they will buffer in memory indefinitely, which can lead to your app becoming unresponsive or crashing. You must implement your own throttling logic or use a newer API like WebSocketStream that handles this.

One canonical example

To create a connection, you instantiate the WebSocket object with a ws:// or wss:// URL: const socket = new WebSocket("wss://api.example.com/updates");. You then add event listeners. To send a message upon connection, use the open event: socket.addEventListener("open", () => socket.send("Hello Server!"));. To process incoming data, listen for the message event: socket.addEventListener("message", (event) => { console.log("Data from server:", event.data); });.