Real-time features với WebSocket trong Next.js: chat, notifications và live updates

Real-time features như live notifications, collaborative editing và live dashboards đòi hỏi persistent connection — HTTP request/response cycle không đủ. WebSocket là protocol phổ biến nhất, cho phép bidirectional communication sau handshake ban đầu.

WebSocket với Next.js: custom server

Next.js không có built-in WebSocket server — cần custom server hoặc tách WebSocket service riêng. Custom server: dùng ws library với Node.js HTTP server, upgrade HTTP connections sang WebSocket. Nhược điểm: không tận dụng được Vercel deployment.

Alternative approach: dedicated WebSocket service (Node.js + ws hoặc Socket.io) trên separate port/domain, Next.js app kết nối tới đó. Microservice pattern này dễ scale hơn.

Reconnection và Resilience

Network interruptions là inevitable — client phải handle reconnection. Implement exponential backoff reconnection: sau disconnect, retry sau 1s, 2s, 4s, 8s... tới max 30s. Gửi message queue tích lũy trong offline period sau khi reconnect.

Server phải handle graceful disconnect — cleanup subscriptions, update user presence, notify other users. Use heartbeat/ping-pong để detect zombie connections (connected nhưng thực chất đã dead).

Authentication cho WebSocket

HTTP-only cookies không truyền qua WebSocket headers trong browser. Options: (1) Token trong WebSocket URL query param (chỉ OK với wss://, short-lived token). (2) Auth trong first message sau connect. (3) Cookie với SameSite=Strict để bảo vệ CSRF.

Scale với Redis Pub/Sub

Khi có multiple WebSocket server instances, message gửi từ client A đến server 1 cần reach client B trên server 2. Redis Pub/Sub làm message broker: server publish event vào Redis channel, tất cả servers subscribe và forward đến connected clients.

Server-Sent Events: alternative đơn giản hơn

Nếu chỉ cần server-to-client push (notifications, live updates, không cần bidirectional), Server-Sent Events (SSE) đơn giản hơn WebSocket. Dùng HTTP/2, tự động reconnection, hỗ trợ ngay trong Next.js Route Handlers với streaming response.