Full Socket.IO Client & Server Cheat Sheet with Examples Socket.IO is a powerful library for building real-time web applications using WebSockets and other fallback technologies. This guide gives you a complete cheat sheet for Socket.IO on both server-side (Node.js + Express) and client-side (browser), along with full example code for a working real-time chat application.
Server-Side Cheat Sheet (Node.js / Express + Socket.IO)
| Event / Method | Description |
|---|---|
io.on('connection', socket => {}) | Fired when a new client connects. |
socket.id | Unique ID for the connected client. Changes on reconnect. |
socket.on('eventName', callback) | Listen for custom/built-in events from this client. |
socket.emit('eventName', data) | Send an event to only this client. |
socket.broadcast.emit('eventName', data) | Send an event to all other clients except this one. |
io.emit('eventName', data) | Send to all clients. |
socket.join('roomName') | Put this client into a room for group messages. |
socket.leave('roomName') | Remove this client from a room. |
io.to('roomName').emit('eventName', data) | Send an event to everyone in a room. |
socket.on('disconnect', reason => {}) | Runs when a client disconnects. |
socket.on('disconnecting', reason => {}) | Runs just before disconnect. You can still check rooms. |
io.sockets.sockets | Map of all connected sockets. |
Array.from(io.sockets.sockets.keys()) | List all connected socket IDs. |
io.fetchSockets() | Promise returning socket objects for all connected clients. |
socket.data | Store custom data for that socket. |
Client-Side Cheat Sheet (Browser + Socket.IO)
| Event / Method | Description |
|---|---|
const socket = io('http://localhost:3000') | Connect to server. |
socket.on('connect', () => {}) | Runs when connected. Access socket.id here. |
socket.on('disconnect', reason => {}) | Runs when disconnected. |
socket.on('eventName', callback) | Listen for custom/built-in events from the server. |
socket.emit('eventName', data) | Send data/event to the server. |
socket.id | Current connection ID. Changes if reconnected. |
socket.on('connect_error', err => {}) | Fired if connection fails. |
socket.on('reconnect', attempt => {}) | Fired when reconnect succeeds. |
socket.on('reconnect_attempt', attempt => {}) | Fired when trying to reconnect. |
socket.on('reconnect_error', err => {}) | Fired if a reconnect attempt fails. |
socket.on('reconnect_failed', () => {}) | Fired when all reconnect attempts fail. |
socket.close() | Manually disconnect from server. |
socket.open() | Manually reconnect to server. |
💻 Step 1 — Server Code (Node.js + Express + Socket.IO)
// server.js
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, { cors: { origin: "*" } });
// Store user mapping
let socketUsers = {};
io.on('connection', (socket) => {
console.log('✅ User connected:', socket.id);
// Save username from client
socket.on('register_user', (username) => {
socketUsers[socket.id] = username;
console.log(`Registered ${username} with ID ${socket.id}`);
io.emit('user_list', socketUsers);
});
// Handle messages
socket.on('chat_message', (msg) => {
console.log(`💬 ${socketUsers[socket.id]}: ${msg}`);
io.emit('chat_message', {
user: socketUsers[socket.id],
message: msg
});
});
// On disconnect
socket.on('disconnect', (reason) => {
console.log(`❌ User disconnected: ${socket.id} Reason: ${reason}`);
delete socketUsers[socket.id];
io.emit('user_list', socketUsers);
});
});
server.listen(3000, () => {
console.log('🚀 Server running on port 3000');
});
💻 Step 2 — Client Code (Browser)<!DOCTYPE html>
<html>
<head>
<title>Socket.IO Chat Example</title>
<script src="https://cdn.socket.io/4.7.5/socket.io.min.js"></script>
</head>
<body>
<h1>Socket.IO Chat</h1>
<input id="username" placeholder="Enter username" />
<button onclick="registerUser()">Register</button>
<div id="chat">
<input id="message" placeholder="Type message..." />
<button onclick="sendMessage()">Send</button>
</div>
<h3>Connected Users:</h3>
<ul id="users"></ul>
<script>
const socket = io('http://localhost:3000');
// On connect
socket.on('connect', () => {
console.log('Connected! My ID:', socket.id);
});
// Update user list
socket.on('user_list', (users) => {
const userList = document.getElementById('users');
userList.innerHTML = '';
for (let id in users) {
const li = document.createElement('li');
li.textContent = `${users[id]} (${id})`;
userList.appendChild(li);
}
});
// Receive chat messages
socket.on('chat_message', (data) => {
console.log(`${data.user}: ${data.message}`);
});
// Register username
function registerUser() {
const name = document.getElementById('username').value;
if (name.trim()) {
socket.emit('register_user', name);
}
}
// Send message
function sendMessage() {
const msg = document.getElementById('message').value;
if (msg.trim()) {
socket.emit('chat_message', msg);
document.getElementById('message').value = '';
}
}
</script>
</body>
</html>
What This Gives You
All major events for client & server.
Store usernames linked to socket.id.
Update user list on connect/disconnect.
Send and receive real-time messages.
