Have you ever typed a message on WhatsApp and instantly seen “typing…” appear from the other side?
Or watched your Zomato order move from “Preparing → Out for Delivery” without refreshing the screen?
Or seen Google Docs update characters as someone else types?

None of these experiences feel like the old web — the web where you clicked a button, waited for a page reload, and only then got the latest information.

The modern web talks back instantly, and behind the scene lies a simple idea which is

A persistent live connection between the browser and the server.

In order to achieve this we need the help of Websockets which gets the work done, but a more refined version of Websocket is then introduced which is known as Socket.IO.

What exactly is Socket.IO

Socket.IO is not “just WebSockets.”
It’s a high-level realtime engine built on top of WebSockets + fallback techniques + reliability mechanisms.

A pure WebSocket gives you a tunnel.
Socket.IO gives you a two-way messaging system with superpowers:

• Auto-reconnect when the network blips

• Namespaces & Rooms to organize events

• Event-based communication (like WhatsApp events)

• Heartbeats & timeouts

• Reliability & acknowledgments

• Load balancing support with Redis

• Built-in fallback to HTTP long polling

In short:

WebSocket = raw pipe
Socket.IO = smart, safe, production-ready realtime engine

Enough of theroy, lets try with an example,

Let’s begin with the simplest possible Socket.IO server.

Server (Node.js)

import { Server } from "socket.io";
const io = new Server(3000, { cors: { origin: "*" } });

io.on("connection", (socket) => {
  console.log("Client connected:", socket.id);

  socket.on("hello", () => {
    socket.emit("world");
  });
});

Client (Browser)

<script src="https://cdn.socket.io/4.7.5/socket.io.min.js"></script>
<script>
  const socket = io("http://localhost:3000");

  socket.emit("hello");
  socket.on("world", () => {
    console.log("Server responded!");
  });
</script>

Open the HTML file → see the logs → and you have your first realtime message roundtrip.

But let’s go a little deeper…

Building the Classic “Ping–Pong” Demo

You might be familiar with the term ping while playing online multiplayer games. It shows the latency of the network. It also defines,

• if the connection is alive

• messages flow smoothly

• latency is acceptable

It’s the “Hello World” of WebSockets.

---

Step 1: Create a Socket.IO server

import express from "express";
import { createServer } from "http";
import { Server } from "socket.io";

const app = express();
const httpServer = createServer(app);
const io = new Server(httpServer, { cors: { origin: "*" } });

io.on("connection", (socket) => {
  console.log("🔌 Connected:", socket.id);

  socket.on("ping_from_client", () => {
    socket.emit("pong_from_server");
  });
});

httpServer.listen(3000, () => console.log("Server running on 3000"));

---

Step 2: Create a simple client

<script src="https://cdn.socket.io/4.7.5/socket.io.min.js"></script>
<script>
  const socket = io("http://localhost:3000");

  socket.on("connect", () => {
    console.log("connected", socket.id);
  });

  setInterval(() => {
    console.log("client: ping");
    socket.emit("ping_from_client");
  }, 2000);

  socket.on("pong_from_server", () => {
    console.log("server: pong");
  });
</script>

Every 2 seconds:

1. The client sends ping

2. The server replies pong

3. You see the event logs

This verifies your realtime connection end-to-end.