Node.js Socket.IO

Key Features

Real-time bidirectional communication

Automatic reconnection

Room support

Binary support

Multiplexing

Fallback options

- Automatically falls back to HTTP long - polling if WebSockets aren't available

Use Cases

Real-time chat applications

Live notifications

Collaborative tools

Online gaming

Live analytics

Document collaboration

Real-time dashboards

IoT applications

A client - side library that runs in the browser
A server - side library for Node.js

Server-Side Installation

Client-Side Setup

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

# Install the client library npm install socket.io - client
# Or using Yarn yarn add socket.io - client
Option 3: Using ES6 Modules import { io } from 'socket.io - client';

Version Compatibility

Note:

Let's build a simple real - time chat application using Node.js and Socket.IO.

const express = require('express');
const http = require('http');
const { Server } = require('socket.io');
const path = require('path');
const app = express();
const server = http.createServer(app);
const io = new Server(server);
// Serve static files app.use(express.static(path.join(__dirname, 'public')));
// Simple route app.get('/', (req, res) => {
;  res.sendFile(path.join(__dirname, 'public', 'index.html'));
});
// Socket.IO connection handler io.on('connection', (socket) => {
console.log('A user connected');
// Handle new messages socket.on('chat message', (msg) => {
console.log('Message received:', msg);
// Broadcast the message to all connected clients io.emit('chat message', msg);
});
// Handle disconnection socket.on('disconnect', () => {
console.log('A user disconnected');
});
});
const PORT = process.env.PORT || 3000;
server.listen(PORT, () => {
console.log(`Server running on port ${PORT}`);
});
Create the Client (public/index.html)

< title > Simple Chat </title >

body {
margin: 0;
padding: 20px;
font-family: Arial, sans-serif;
}
#messages {
list-style-type: none;
margin: 0;
padding: 0;
margin-bottom: 20px;
border: 1px solid #ddd;
padding: 10px;
height: 400px;
overflow-y: auto;
}
#messages li {
padding: 8px 16px;
border-bottom: 1px solid #eee;
}
#messages li:last-child {
border-bottom: none;
}
#form {
display: flex;
margin-top: 10px;
}
#input {
flex-grow: 1;
padding: 10px;
font-size: 16px;
}
button {
padding: 10px 20px;
background: #4CAF50;
color: white;
border: none;
cursor: pointer;
margin-left: 10px;
}
button:hover {
background: #45a049;
}

< h1 > Simple Chat </h1 >

< button > Send </button >

< script src ="/socket.io/socket.io.js"></script >

const socket = io();
const form = document.getElementById('form');
const input = document.getElementById('input');
const messages = document.getElementById('messages');
// Handle form submission form.addEventListener('submit', (e) => {
e.preventDefault();
const message = input.value.trim();
if (message) {
// Emit the message to the server socket.emit('chat message', message);
// Clear the input input.value = '';
}
});
// Listen for incoming messages socket.on('chat message', (msg) => {
const item = document.createElement('li');
item.textContent = msg;
messages.appendChild(item);
// Scroll to the bottom messages.scrollTop = messages.scrollHeight;
});

Run the Application

Start the server:

Open your browser and navigate to http://localhost:3000

Open multiple browser windows to see the real - time updates