⚡ Socket.IO Implementation

Why Socket.IO?

In the last lesson you built a WebSocket by hand — and discovered how much it doesn't do. It won't reconnect. It won't detect a silently dead connection. It won't buffer the message you tried to send while offline. It has no concept of "send this to just these five users." Socket.IO is a library that solves all of that with a clean, event-driven API.

What you get over raw WebSockets

• Automatic reconnection with exponential backoff and jitter — built in
• Fallback transports: if a proxy blocks WebSockets, it degrades to HTTP long-polling automatically
• Heartbeats that detect and clean up dead connections
• Rooms & namespaces for targeted, organized broadcasting
• Acknowledgements — a request/response pattern layered inside the socket
• Packet buffering so emits during a brief disconnect aren't simply lost

Server & Client Setup

Install the server package with npm install socket.io. In development the browser client is served automatically at /socket.io/socket.io.js, so you often don't install anything on the front end at all.

The server

// npm install express socket.io
const express = require('express');
const http = require('http');
const { Server } = require('socket.io');

const app = express();
const server = http.createServer(app);
const io = new Server(server); // attach Socket.IO to the HTTP server

app.use(express.static('public'));

io.on('connection', (socket) => {
  console.log('A user connected:', socket.id); // every socket has a unique id

  socket.on('chat message', (msg) => {
    console.log('Received:', msg);
    io.emit('chat message', msg); // send to ALL connected clients
  });

  socket.on('disconnect', () => {
    console.log('User disconnected:', socket.id);
  });
});

const PORT = process.env.PORT || 3000;
server.listen(PORT, () => console.log(`Listening on ${PORT}`));

The client

<!-- public/index.html -->
<ul id="messages"></ul>
<form id="form">
  <input id="input" autocomplete="off" /><button>Send</button>
</form>

<script src="/socket.io/socket.io.js"></script>
<script>
  const socket = io(); // connects to the server that served this page

  const form = document.getElementById('form');
  const input = document.getElementById('input');
  const messages = document.getElementById('messages');

  form.addEventListener('submit', (e) => {
    e.preventDefault();
    if (input.value) {
      socket.emit('chat message', input.value); // send to server
      input.value = '';
    }
  });

  socket.on('chat message', (msg) => {          // receive from server
    const li = document.createElement('li');
    li.textContent = msg;
    messages.appendChild(li);
  });
</script>

// Server — allow a front end hosted elsewhere
const io = new Server(server, {
  cors: { origin: 'https://app.example.com', methods: ['GET', 'POST'] },
});

// Client — connect to a remote server with tuned reconnection
const socket = io('https://api.example.com', {
  reconnectionAttempts: 10,   // give up after 10 tries
  reconnectionDelay: 1000,    // start at 1s
  reconnectionDelayMax: 5000, // cap the backoff at 5s
});

The emit / on Event Model

Socket.IO communication is built entirely on named events. One side calls emit('eventName', data) to send; the other side registers on('eventName', handler) to receive. Event names are arbitrary strings you invent — 'chat message', 'typing', 'order:updated' — which makes the protocol self-documenting.

// --- Server ---
io.on('connection', (socket) => {
  // Listen for a client event
  socket.on('user action', (data) => {
    console.log('User action:', data);
  });

  // Emit an event to this one client
  socket.emit('server update', { status: 'processing', progress: 50 });
});

// --- Client ---
socket.emit('user action', { type: 'click', element: 'signup' });

socket.on('server update', (data) => {
  updateProgressBar(data.progress);
});

Acknowledgements — request/response inside a socket

Sometimes you need to know the emit succeeded. Pass a callback as the last argument to emit; the receiver calls it to send a reply straight back to the sender. This gives you a clean request/response flow without leaving the socket.

// --- Client: emit with a callback ---
socket.emit('save note', { text: 'Buy milk' }, (response) => {
  if (response.ok) {
    console.log('Saved with id', response.id);
  } else {
    console.error('Save failed:', response.error);
  }
});

// --- Server: call the callback to acknowledge ---
socket.on('save note', (note, ack) => {
  try {
    const id = db.saveNote(note);
    ack({ ok: true, id });     // reply to the sender only
  } catch (err) {
    ack({ ok: false, error: err.message });
  }
});

Broadcasting

The real power of a real-time server is sending one message to many clients. Socket.IO gives you precise control over the audience with a small, expressive set of targets.

io.on('connection', (socket) => {
  // 1. To EVERY connected client (including the sender)
  io.emit('global', { text: 'Server restarting in 5 minutes' });

  // 2. To everyone EXCEPT the sender
  socket.broadcast.emit('user joined', { id: socket.id });

  // 3. To a specific client by its socket id
  io.to(someSocketId).emit('private', { text: 'Just for you' });

  // 4. To everyone in a room
  io.to('room-42').emit('chat message', { text: 'Hello room' });

  // 5. To a room, excluding the sender (socket.to instead of io.to)
  socket.to('room-42').emit('typing', { id: socket.id });
});

Rooms & Namespaces

Socket.IO offers two levels of organization. Namespaces are separate communication channels that share one physical connection — think of them as different endpoints (/chat, /admin). Rooms are subdivisions inside a namespace that a socket can freely join and leave — perfect for chat rooms, game lobbies, or per-document collaboration.

Rooms

A socket joins a room by name. Rooms are created on demand and cleaned up automatically when empty — you never declare them. Every socket is already alone in a room named after its own id, which is how targeted "private" sends work.

io.on('connection', (socket) => {
  socket.on('join room', (room) => {
    socket.join(room);                       // join
    socket.emit('joined', room);             // confirm to this client
    socket.to(room).emit('user joined', { id: socket.id }); // tell the room
  });

  socket.on('leave room', (room) => {
    socket.leave(room);                      // leave
    socket.to(room).emit('user left', { id: socket.id });
  });

  socket.on('room message', ({ room, text }) => {
    io.to(room).emit('room message', { from: socket.id, text });
  });
});

Namespaces

Create a namespace on the server with io.of('/name') and connect to it on the client with io('/name'). Each namespace has its own connection handler, its own middleware, and its own rooms.

// --- Server ---
const chat = io.of('/chat');
chat.on('connection', (socket) => {
  console.log('Connected to /chat:', socket.id);
  socket.join('public');
  socket.on('message', (text) => chat.to('public').emit('message', text));
});

// --- Client ---
const chatSocket = io('/chat');
chatSocket.on('message', (text) => renderMessage(text));

Authentication Middleware

You should never let an anonymous socket into your app. Socket.IO runs middleware before the connection event fires — the ideal place to verify a token and either accept the socket or reject it. Middleware is a function (socket, next): call next() to allow, or next(new Error(...)) to deny.

const jwt = require('jsonwebtoken');

// Runs once per connection, before 'connection'
io.use((socket, next) => {
  const token = socket.handshake.auth.token; // sent by the client
  if (!token) return next(new Error('Authentication required'));

  try {
    const user = jwt.verify(token, process.env.JWT_SECRET);
    socket.data.user = user; // stash it for later handlers
    next();                  // accept the connection
  } catch {
    next(new Error('Invalid token')); // reject
  }
});

io.on('connection', (socket) => {
  console.log('Authenticated:', socket.data.user.username);
});

The client supplies the token in the auth option and listens for connect_error to detect rejection:

const socket = io({ auth: { token: localStorage.getItem('jwt') } });

socket.on('connect', () => console.log('Connected as an authenticated user'));
socket.on('connect_error', (err) => console.error('Rejected:', err.message));

Scaling with Redis

One Node process can only hold so many connections. To scale, you run several server instances behind a load balancer — but that creates a problem: a client on Server 1 emits to a room, yet the other members of that room are connected to Server 2, which never hears about it.

The Redis adapter solves this. Each server publishes its emits to Redis and subscribes to the others', so a broadcast on any instance reaches clients on every instance. Your application code doesn't change at all — you just install the adapter.

// npm install @socket.io/redis-adapter redis
const { Server } = require('socket.io');
const { createAdapter } = require('@socket.io/redis-adapter');
const { createClient } = require('redis');

const io = new Server(httpServer);

const pubClient = createClient({ url: process.env.REDIS_URL });
const subClient = pubClient.duplicate();

async function start() {
  await Promise.all([pubClient.connect(), subClient.connect()]);
  io.adapter(createAdapter(pubClient, subClient)); // wire up the adapter

  io.on('connection', (socket) => {
    socket.on('join room', (room) => socket.join(room));
    socket.on('room message', ({ room, text }) => {
      // This now reaches clients on ALL server instances
      io.to(room).emit('room message', { text });
    });
  });

  httpServer.listen(process.env.PORT || 3000);
}
start().catch((err) => { console.error(err); process.exit(1); });

Practice & Quiz

io.on('connection', (socket) => {
  socket.on('chat message', ({ room, text }) => {
    io.to(room).emit('chat message', {
      from: socket.id,
      text,
      at: Date.now(),
    });
  });
});

socket.on('typing', ({ room, isTyping }) => {
  socket.to(room).emit('typing', {
    user: socket.data.user.username,
    isTyping,
  });
});

Best Practices & Pitfalls

✅ Do

• Authenticate connections in io.use() middleware, before connection fires
• Validate and sanitize every event payload — sockets are untrusted input
• Namespace event names (chat:message, order:updated) as the app grows
• Use rooms for targeted broadcasts instead of tracking socket ids by hand
• Add the Redis adapter and sticky sessions before running more than one instance
• Clean up server-side state (maps, timers) in the disconnect handler

❌ Don't

• Confuse Socket.IO with raw WebSockets — the client and server libraries must match
• Emit sensitive data with io.emit when you meant a single room or user
• Store per-user state in a plain object and expect it to work across multiple servers
• Render incoming text as HTML without escaping it — that's a straight path to XSS
• Forget to handle connect_error on the client, leaving auth failures invisible

Summary

📚 Additional Resources

• Socket.IO — Official Documentation
• Socket.IO — Rooms
• Socket.IO — The Redis adapter
• Socket.IO — Middlewares

🚀 What's Next?

You can now move events between browser and server at will. Next we put that engine to work on the feature users notice most: Real-time Notifications — targeting individual users, building a toast UI, and delivering alerts even when the recipient is offline.