Stop 06 · Browser APIsTopics · 12/13

WebSocket

In short

Live cricket scores, chat apps, multiplayer games. These need the server to push updates the moment they happen. WebSocket keeps a two-way line open for that.

A persistent, full-duplex connection between browser and server that enables real-time, bidirectional communication — used for chat, live notifications and live dashboards. Unlike ordinary request-response communication, a WebSocket stays open so either side can send messages whenever needed, making it well suited to live application state.

The jaadu mascot chats happily on a corded phone while a pile of letters sits ignored.

Think of it like this

A phone call vs sending letters

With normal HTTP, you write a letter, wait for the reply, then write again. WebSocket is a phone call. Once connected, either side can talk anytime, until someone hangs up.

Watch it happen

Live score over one connection

Browser

Score server

GET + Upgrade: websocket

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

The big ideas

What you need to know

One open connection

It starts as an HTTP request, then upgrades to a connection that stays open.

Both sides can send

The server can push data without the browser asking. Perfect for live updates.

Use wss://

wss:// is the encrypted version, like https://. HTTPS pages usually can't open plain ws:// connections.

No auto-reconnect

If Wi-Fi drops, the socket closes and stays closed. You write the reconnect logic yourself.

See it in code

Walk through the code

1function connect() {2  const ws = new WebSocket("wss://scores.example.com/live");3 4  ws.addEventListener("open", () => {5    ws.send(JSON.stringify({ type: "subscribe", match: "IND-AUS" }));6  });7 8  ws.addEventListener("message", (e) => {9    const update = JSON.parse(e.data);10    scoreEl.textContent = `${update.runs}/${update.wickets}`;11  });12 13  ws.addEventListener("close", () => setTimeout(connect, 3000)); // retry14}15connect();

1/4Open an encrypted WebSocket connection to the score server.

Messages are usually text, so JSON is the common format. The close handler retries after 3 seconds. Real apps wait longer after each failed try.

Save yourself the pain

Common mistakes

Oops

Calling ws.send() right after new WebSocket().

Do this instead

Wait for the open event. Sending before the connection is ready throws an error.

Oops

Using WebSocket for data that changes once an hour.

Do this instead

Plain fetch is simpler for that. Use WebSocket when updates are frequent or must be instant.

Your mission

Talk to an echo server

~25 min

Quick check

What can a WebSocket do that a normal fetch request can't?

Go deeper

1Connect to a public WebSocket echo server and send/receive a message. Validate your understanding by applying it in a small practical example.
2Learn the WebSocket lifecycle events: `open`, `message`, `close`, `error`. Focus on understanding the underlying reason it works, not only memorizing the definition.
3Compare WebSockets to polling — understand why they're more efficient for real-time features.