Socket.io for JavaScript (Node.js): Complete Guide with Examples

What is Socket.io and why is it needed?

Socket.io is a powerful JavaScript library that provides real-time bidirectional communication between a client (browser) and a server (Node.js). Unlike the traditional HTTP protocol, where a client sends a request and waits for a response, Socket.io allows the server to independently initiate sending data to the client at any time, and vice versa.

Why is this needed? Imagine a chat application, an online game, a monitoring dashboard with live charts, or a collaborative document editing system. In all these scenarios, data must update instantly, without reloading the page. HTTP is not suitable for this because it works on a "request-response" principle. Socket.io solves this problem by establishing a persistent connection (usually via WebSocket) over which data can be transmitted in both directions at any time.

Key features of Socket.io:

• Bidirectional: The server and client can send messages to each other.
• Real-time: Messages are delivered instantly (with minimal latency).
• Automatic reconnection: If the connection drops, Socket.io automatically tries to restore it.
• Rooms: The ability to group clients and send messages only to a specific group.
• Namespaces: Dividing the application into independent communication channels.
• Reliability: If WebSocket is not supported, Socket.io automatically falls back to other methods (long-polling, FlashSocket, etc.).

Installing Socket.io

Socket.io consists of two parts: server-side (for Node.js) and client-side (for the browser). Both are installed via npm.

Installing the server-side part

Open a terminal in your project folder and run the command:

npm install socket.io

Installing the client-side part

The client script can be included in two ways:

1. Via CDN (easiest to start with):

<script src="https://cdn.socket.io/4.7.5/socket.io.min.js"></script>

2. Via npm (for projects with bundlers, e.g., Webpack):

npm install socket.io-client

Quick start: first chat

Let's create a simple chat where messages from one client are visible to all others.

Step 1: Server (file server.js)

// server.jsconst http = require('http');const { Server } = require("socket.io");

// 1. Create an HTTP serverconst server = http.createServer((req, res) => {    res.writeHead(200, { 'Content-Type': 'text/plain' });    res.end('Socket.io server is running');});

// 2. Create a Socket.io instance attached to the serverconst io = new Server(server);

// 3. Handler for new client connectionio.on('connection', (socket) => {    console.log('New user connected:', socket.id);

    // 4. Listen for the 'chat message' event from the client    socket.on('chat message', (msg) => {        console.log('Message:', msg);        // 5. Send the message to ALL connected clients (including the sender)        io.emit('chat message', msg);    });

    // 6. Handler for client disconnection    socket.on('disconnect', () => {        console.log('User disconnected:', socket.id);    });});

// 7. Start the server on port 3000server.listen(3000, () => {    console.log('Server running at http://localhost:3000');});

Step 2: Client (file index.html)

<!DOCTYPE html><html><head>    <title>Socket.io Chat</title>    <script src="https://cdn.socket.io/4.7.5/socket.io.min.js"></script>