Stop 12 · Real-time FeaturesTopics · 2/4

Socket.io

Part of the Full Stack Developer Roadmap

In short

Raw WebSockets give you a pipe and nothing else. Socket.io adds the things every real app needs: named events, rooms, auto-reconnect and acknowledgements.

A library built on top of WebSockets (with automatic fallbacks) adding rooms and a simple event-based API — the most common way to add real-time features to a full-stack JS app.

The blob as a fest volunteer talks into a walkie-talkie and turns its channel knob.

Think of it like this

Walkie-talkies at the college fest

Fest volunteers don't just shout into one big line. Security is on channel 1, food on channel 2, stage on channel 3. If someone walks out of range, the set reconnects by itself. Socket.io gives your sockets those channels (rooms) and that reconnect.

Watch it happen

Rooms in action

Riya

Socket.io

Aman

emit join cse-2026

1/5Riya's client emits a named event asking to join the cse-2026 room.

The big ideas

What you need to know

Named events

Instead of parsing every message, you write socket.on("chat", ...) and socket.emit("chat", data). Cleaner code.

Rooms

socket.join("room") and io.to("room").emit(...) send to a group. Great for chat groups, documents or match ids.

Acknowledgements

Pass a callback when emitting, and the other side can call it back to confirm it got the message.

Its own protocol

Socket.io is not plain WebSocket. A raw WebSocket client can't talk to it; use the socket.io-client package.

See it in code

Walk through the code

1import { createServer } from "node:http";2import { Server } from "socket.io";3 4const httpServer = createServer();5const io = new Server(httpServer, { cors: { origin: "http://localhost:5173" } });6 7io.on("connection", (socket) => {8  socket.on("join", (room: string) => socket.join(room));9 10  socket.on("chat", ({ room, text }) => {11    io.to(room).emit("chat", { from: socket.id, text });12  });13});14 15httpServer.listen(3000);

1/3Socket.io sits on a normal Node HTTP server. CORS must allow your frontend's origin.

On the client: const socket = io("http://localhost:3000"); socket.emit("join", "cse-2026"). Reconnection and heartbeats are built in.

Save yourself the pain

Common mistakes

Oops

Letting clients join any room name they send.

Do this instead

Check on the server that the user is allowed in that room before calling socket.join.

Oops

Using socket.id as the user's identity.

Do this instead

socket.id changes on every reconnect. Authenticate in a middleware and store the real user id on socket.data.

Your mission

Two rooms, one server

~30 min

Quick check

You emit to io.to("match-7"). Who receives it?

Go deeper

1Build a Socket.io server and connect a React frontend to it.
2Use Socket.io 'rooms' to broadcast messages to a specific subset of connected clients.
3Sync incoming Socket.io events into your frontend's state (React Query cache or local state).