Stop 14 · Real-time CommunicationTopics · 1/6

WebSockets

In short

Normal HTTP is ask-then-answer. Chat, live scores and multiplayer games need the server to speak first. WebSockets keep one line open so both sides can talk any time.

A protocol providing a persistent, full-duplex connection between client and server — the foundation for real-time features like chat, live dashboards and multiplayer interactions.

The blob chats happily on an old curly-cord telephone while a pile of letters sits ignored.

Think of it like this

A phone call instead of letters

With letters, you write, wait, get a reply, and write again. Every exchange starts from scratch. A phone call connects once, then either person can speak the moment they have something to say. WebSockets turn HTTP letters into a phone call.

Watch it happen

Opening and using a WebSocket

Browser

Server

Upgrade: websocket

1/6It starts as a normal HTTP request, asking the server to switch protocols.

The big ideas

What you need to know

Full duplex

Both sides can send at the same time over one connection. Perfect for chat, cursors and live games.

Tiny frames

After the handshake, each message carries just a few bytes of overhead instead of full HTTP headers.

Connections are stateful

The server holds every open socket in memory. Ten thousand users means ten thousand live connections.

Reconnect is your job

Raw WebSockets don't reconnect on their own. Wi-Fi drops, so clients need retry logic with backoff.

See it in code

Walk through the code

1import { WebSocketServer, WebSocket } from "ws";2 3const wss = new WebSocketServer({ port: 8080 });4 5wss.on("connection", (socket) => {6  socket.send(JSON.stringify({ type: "welcome" }));7 8  socket.on("message", (raw) => {9    const msg = JSON.parse(raw.toString());10    for (const client of wss.clients) {11      if (client.readyState === WebSocket.OPEN) client.send(JSON.stringify(msg));12    }13  });14});

1/4The ws package starts a WebSocket server on port 8080 and handles the upgrade handshake for you.

In the browser: const ws = new WebSocket("ws://localhost:8080"); ws.onmessage = (e) => console.log(e.data). Use wss:// in production, which is WebSocket over TLS.

Save yourself the pain

Common mistakes

Oops

Trusting every incoming message because the socket was opened after login.

Do this instead

Check auth during the handshake and validate every message's shape, just like an HTTP body.

Oops

Using WebSockets for data that changes once a minute.

Do this instead

A simple fetch every minute, or SSE, is easier to run. Keep WebSockets for truly two-way, frequent updates.

Your mission

A two-tab chat with raw ws

~30 min

Quick check

What status code does a server send to accept a WebSocket upgrade?

Go deeper

1Build a raw WebSocket server using Node's `ws` library.
2Learn the WebSocket handshake and how it upgrades from an HTTP connection.
3Handle connection drops and reconnection logic on both client and server.