DEV Community

King coder
King coder

Posted on

Socket.IO Cheat Sheet

This cheat sheet provides a comprehensive overview of the Socket.IO library for real-time, bidirectional event-based communication.

Core Concepts

  • Events: Communication is based on emitting and listening to named events.
  • Bidirectional: Both the client and server can initiate communication.
  • Real-time: Low-latency communication, suitable for applications like chat, live stats, and multiplayer games.

1. Server-Side Setup

Installation 

npm install socket.io
Enter fullscreen mode Exit fullscreen mode

Basic Server (server.js) 

import { createServer } from "http"; import { Server } from "socket.io"; const httpServer = createServer(); const io = new Server(httpServer, { cors: { origin: "http://localhost:8080", // Allow requests from this origin methods: ["GET", "POST"] } }); io.on("connection", (socket) => { console.log(`Client connected: ${socket.id}`); // Handle disconnection socket.on("disconnect", () => { console.log(`Client disconnected: ${socket.id}`); }); }); httpServer.listen(3000, () => { console.log("Socket.IO server running at http://localhost:3000/"); });
Enter fullscreen mode Exit fullscreen mode

2. Client-Side Setup

Installation

HTML (via CDN) 

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

Node.js/Bundler 

npm install socket.io-client
Enter fullscreen mode Exit fullscreen mode

Basic Client (index.html or client.js) 

// For browser const socket = io("http://localhost:3000"); // For Node.js client // import { io } from "socket.io-client"; // const socket = io("http://localhost:3000"); socket.on("connect", () => { console.log(`Connected to server with id: ${socket.id}`); }); socket.on("disconnect", () => { console.log("Disconnected from server"); });
Enter fullscreen mode Exit fullscreen mode

3. Emitting and Listening for Events

Server-Side 

io.on("connection", (socket) => { // Listen for a 'messageFromClient' event socket.on("messageFromClient", (data, ack) => { console.log("Message from client:", data); // Acknowledge receipt of the message if (ack) { ack("Server received your message!"); } }); // Emit a 'messageFromServer' event to this specific client socket.emit("messageFromServer", { message: "Welcome to the server!" }); });
Enter fullscreen mode Exit fullscreen mode

Client-Side 

// Listen for a 'messageFromServer' event socket.on("messageFromServer", (data) => { console.log("Message from server:", data.message); }); // Emit a 'messageFromClient' event with an acknowledgement socket.emit("messageFromClient", { message: "Hello from the client!" }, (response) => { console.log("Acknowledgement from server:", response); });
Enter fullscreen mode Exit fullscreen mode

4. Broadcasting

Broadcasting sends a message to all connected clients.

// Server-side: Send to all clients io.emit("broadcastMessage", { info: "This is for everyone!" }); // Server-side: Send to all clients *except* the sender socket.broadcast.emit("broadcastMessage", { info: "A new user has joined!" });
Enter fullscreen mode Exit fullscreen mode

5. Rooms

Rooms are channels that sockets can join and leave. They are useful for sending messages to a specific group of clients.

Joining and Leaving a Room 

// Server-side io.on("connection", (socket) => { // Join a room socket.join("room1"); // Leave a room socket.leave("room1"); });
Enter fullscreen mode Exit fullscreen mode

Emitting to a Room 

// Server-side: Send to all clients in 'room1' io.to("room1").emit("roomMessage", { message: "Hello, room1!" }); // Server-side: Send to all clients in 'room1' except the sender socket.to("room1").emit("roomMessage", { message: "A new user joined room1" });
Enter fullscreen mode Exit fullscreen mode

6. Namespaces

Namespaces are a way to split the logic of your application over a single shared connection.

Server-Side Namespace 

// Server-side: Create a namespace const adminNamespace = io.of("/admin"); adminNamespace.on("connection", (socket) => { console.log(`Admin connected: ${socket.id}`); // Middleware for this namespace adminNamespace.use((socket, next) => { // Authentication logic here next(); }); socket.on("adminCommand", (command) => { console.log("Admin command received:", command); }); // Emit to all clients in the admin namespace adminNamespace.emit("adminUpdate", { data: "System is updating..." }); });
Enter fullscreen mode Exit fullscreen mode

Client-Side Namespace 

// Client-side: Connect to a namespace const adminSocket = io("http://localhost:3000/admin"); adminSocket.on("connect", () => { console.log("Connected to admin namespace"); }); adminSocket.emit("adminCommand", { command: "restart-server" }); adminSocket.on("adminUpdate", (data) => { console.log("Admin update:", data); });
Enter fullscreen mode Exit fullscreen mode

7. Middleware (Authentication Example)

Middleware can be used to intercept incoming packets. It's commonly used for authentication.

// Server-side: Global middleware io.use((socket, next) => { const token = socket.handshake.auth.token; if (isValid(token)) { return next(); } return next(new Error("authentication error")); }); // Client-side: Sending auth data const socket = io("http://localhost:3000", { auth: { token: "your-jwt-token" } });
Enter fullscreen mode Exit fullscreen mode

8. API Reference

Server-Side (io or socket)

Method/Property Description
io.on('connection', fn) Listens for new client connections.
socket.on(event, fn) Listens for a specific event from a client.
socket.emit(event, data) Emits an event to the specific client associated with the socket.
io.emit(event, data) Emits an event to all connected clients.
socket.broadcast.emit(event, data) Emits to all clients except the sender.
socket.join(room) Joins the socket to a specific room.
socket.leave(room) Leaves the socket from a room.
io.to(room).emit(event, data) Emits an event to all clients in a specific room.
io.of(namespace) Creates or retrieves a namespace.
socket.id A unique identifier for the socket session.
socket.rooms A Set of rooms the socket is currently in.
io.use(fn) Registers a middleware function.

Client-Side (socket)

Method/Property Description
io(url, opts) Creates a new socket connection to the specified URL.
socket.on(event, fn) Listens for an event from the server.
socket.emit(event, data, ack) Emits an event to the server, with an optional acknowledgement callback.
socket.id The unique ID for the client's socket. Changes on each connection.
socket.connect() Manually connects the socket.
socket.disconnect() Manually disconnects the socket.

Top comments (0)