Socket.IO Has a Free API — Here's How to Build Real-Time Apps with WebSockets

Socket.IO enables real-time, bidirectional communication between clients and servers. It handles fallbacks, reconnection, rooms, and namespaces — making real-time features simple to implement.

Installation

npm install socket.io          # Server
npm install socket.io-client   # Client

Server Setup

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

const httpServer = createServer();
const io = new Server(httpServer, {
  cors: { origin: "http://localhost:3000" }
});

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

  socket.on("chat:message", (data) => {
    console.log(`Message from ${socket.id}: ${data.text}`);
    io.emit("chat:message", { ...data, id: socket.id, timestamp: Date.now() });
  });

  socket.on("disconnect", () => {
    console.log(`Disconnected: ${socket.id}`);
  });
});

httpServer.listen(3001);

Client

import { io } from "socket.io-client";

const socket = io("http://localhost:3001");

socket.on("connect", () => console.log(`Connected: ${socket.id}`));

socket.emit("chat:message", { text: "Hello everyone!" });

socket.on("chat:message", (data) => {
  console.log(`${data.id}: ${data.text}`);
});

Rooms

// Server
socket.on("join:room", (roomName) => {
  socket.join(roomName);
  io.to(roomName).emit("system", `${socket.id} joined ${roomName}`);
});

socket.on("room:message", ({ room, text }) => {
  io.to(room).emit("chat:message", { text, sender: socket.id });
});

Namespaces

const adminNs = io.of("/admin");

adminNs.use((socket, next) => {
  const token = socket.handshake.auth.token;
  if (verifyAdmin(token)) return next();
  next(new Error("Unauthorized"));
});

adminNs.on("connection", (socket) => {
  socket.on("admin:action", (data) => {
    adminNs.emit("admin:update", data);
  });
});

Acknowledgements

// Server
socket.on("save:data", async (data, callback) => {
  try {
    const result = await db.save(data);
    callback({ status: "ok", id: result.id });
  } catch (err) {
    callback({ status: "error", message: err.message });
  }
});

// Client
socket.emit("save:data", { name: "test" }, (response) => {
  console.log(response.status); // "ok"
});

---

Need to extract or automate web content at scale? Check out my web scraping tools on Apify — no coding required. Or email me at [e-mail] for custom solutions.