Socket.IO
A developer-ready Socket.IO integration enabling real-time, bidirectional communication, room messaging, presence tracking, and scalable broadcasting.
Overview
A production-ready Socket.IO system enabling full-duplex, real-time communication between backend and frontend. Supports two-way events, rooms, presence, and auto-reconnect, ideal for chat apps, live dashboards, multiplayer tools, or collaborative editors.
Includes built-in broadcasting, room messaging and optional Redis scaling adapter.
Installation
What This Does
Installs a complete Socket.IO backend with room support, broadcasting, presence hooks, and scalable architecture.
Files & Folders Created
| File / Path | Description |
|---|---|
| /src/services/socketService.js | Core Socket.IO connection/room/broadcast logic. |
| /src/routes/socket.js | REST endpoints for global and room event broadcasting. |
| /src/example-client.html | Basic browser Socket.IO client for debugging. |
Files to be modified
| File / Path | Description |
|---|---|
| server.js | Wraps Express with HTTP server and initializes Socket.IO. |
| .env | Adds CORS origin and ping timeout configuration. |
Configuration
# Socket.IO Configuration PORT=3001 SOCKET_CORS_ORIGIN=http://localhost:3000 PING_INTERVAL=25000 PING_TIMEOUT=5000
Frontend Integration
Use this backend with any React/Next.js/HTML Socket.IO client. The connection automatically reconnects and supports custom events, rooms, and presence tracking.
Broadcasts a global event to all connected Socket.IO clients.
Broadcasts an event to a specific Socket.IO room.
Example
1// Example: React / Next.js frontend integration
2import { useEffect, useState } from 'react';
3import { io } from 'socket.io-client';
4
5export default function RealtimeSocket() {
6 const [messages, setMessages] = useState([]);
7 const [connected, setConnected] = useState(false);
8
9 useEffect(() => {
10 const socket = io('http://localhost:3001');
11
12 socket.on('connected', (info) => {
13 setConnected(true);
14 console.log('Connected:', info);
15 });
16
17 socket.on('notification', (data) => {
18 setMessages((prev) => [...prev, data]);
19 });
20
21 socket.emit('join_room', 'dashboard');
22 return () => socket.disconnect();
23 }, []);
24
25 return (
26 <div className="max-w-md mx-auto p-4">
27 <h2 className="text-lg font-semibold mb-3">Live Socket.IO Updates</h2>
28 <p>Status: {connected ? 'Connected' : 'Connecting...'}</p>
29 <ul className="space-y-2 mt-3">
30 {messages.map((msg, i) => (
31 <li key={i} className="border rounded-md p-2 bg-secondary/40">
32 {msg.message || JSON.stringify(msg)}
33 </li>
34 ))}
35 </ul>
36 </div>
37 );
38}Usage
1// Send global event programmatically
2await fetch('http://localhost:3001/api/socket/send', {
3 method: 'POST',
4 headers: { 'Content-Type': 'application/json' },
5 body: JSON.stringify({ event: 'notification', data: { message: 'Order shipped' } })
6});
7
8// Send event to a specific room
9await fetch('http://localhost:3001/api/socket/send-room', {
10 method: 'POST',
11 headers: { 'Content-Type': 'application/json' },
12 body: JSON.stringify({ room: 'admins', event: 'alert', data: { message: 'CPU over 90%' } })
13});