Socket.IO

Server Setup

import { Server } from 'socket.io'; import { createServer } from 'http';

const httpServer = createServer(app);

interface ServerToClientEvents { message: (data: { user: string; text: string; timestamp: number }) => void; userJoined: (user: string) => void; }

interface ClientToServerEvents { sendMessage: (text: string, callback: (status: 'ok' | 'error') => void) => void; joinRoom: (room: string) => void; }

const io = new Server<ClientToServerEvents, ServerToClientEvents>(httpServer, { cors: { origin: process.env.CLIENT_URL }, });

// Authentication middleware io.use((socket, next) => { const token = socket.handshake.auth.token; try { socket.data.user = verifyToken(token); next(); } catch { next(new Error('Authentication failed')); } });

io.on('connection', (socket) => { console.log(${socket.data.user.name} connected);

socket.on('joinRoom', (room) => { socket.join(room); socket.to(room).emit('userJoined', socket.data.user.name); });

socket.on('sendMessage', (text, callback) => { const message = { user: socket.data.user.name, text, timestamp: Date.now() }; io.to('general').emit('message', message); callback('ok'); });

socket.on('disconnect', () => { console.log(${socket.data.user.name} disconnected); }); });

Client Setup

import { io, Socket } from 'socket.io-client';

const socket: Socket<ServerToClientEvents, ClientToServerEvents> = io(API_URL, { auth: { token: getAuthToken() }, reconnection: true, reconnectionDelay: 1000, });

socket.on('connect', () => console.log('Connected')); socket.on('message', (data) => addMessage(data)); socket.on('connect_error', (err) => console.error(err.message));

// With acknowledgment socket.emit('sendMessage', 'Hello!', (status) => { if (status === 'error') showError('Failed to send'); });

Scaling with Redis Adapter

import { createAdapter } from '@socket.io/redis-adapter'; import { createClient } from 'redis';

const pubClient = createClient({ url: process.env.REDIS_URL }); const subClient = pubClient.duplicate(); await Promise.all([pubClient.connect(), subClient.connect()]);

io.adapter(createAdapter(pubClient, subClient));

React Hook

function useSocket(room: string) { const [messages, setMessages] = useState<Message[]>([]);

useEffect(() => { socket.emit('joinRoom', room); socket.on('message', (msg) => setMessages((prev) => [...prev, msg])); return () => { socket.off('message'); }; }, [room]);

const send = (text: string) => socket.emit('sendMessage', text, () => {}); return { messages, send }; }

Anti-Patterns

Anti-Pattern Fix

No authentication Use io.use() middleware with JWT

Broadcasting to all instead of rooms Use socket.to(room).emit()

No reconnection handling Enable reconnection, show UI indicator

Single server without adapter Use Redis adapter for horizontal scaling

No acknowledgments for critical events Use callback parameter for delivery confirmation

Production Checklist

• Authentication middleware on connection

• Redis adapter for multi-server deployment

• Reconnection with exponential backoff

• Room-based message scoping

• Connection state UI indicator

• Rate limiting on message events