Building Real-Time Web Applications with WebSockets & Next.js

Real-time capabilities—such as instant chat messaging, live collaborative document editing, and financial ticker updates—require bi-directional, low-latency communication protocols between client and server.

**TL;DR:** Scalable real-time architectures pair WebSockets with a distributed Redis Pub/Sub backplane to broadcast events across multiple load-balanced application servers.

---

1. High-Concurrency Real-Time Topology

[ Client Browsers ] ── (WebSocket Connection) ──> [ Load Balancer / NGINX ]
                                                          │
                                     ┌────────────────────┴────────────────────┐
                                     ▼                                         ▼
                            [ WS Node Server 1 ]                      [ WS Node Server 2 ]
                                     │                                         │
                                     └────────────────────┬────────────────────┘
                                                          ▼
                                              [ Redis Pub/Sub Cluster ]

---

2. Socket.io Client Custom Hook Blueprint

import { useEffect, useState } from "react";
import { io, Socket } from "socket.io-client";

export function useRealtimeMessages(roomId: string) {
  const [messages, setMessages] = useState<Array<{ id: string; text: string }>>([]);

  useEffect(() => {
    const socket: Socket = io(process.env.NEXT_PUBLIC_WS_URL || "wss://ws.incosstech.com", {
      query: { roomId },
      transports: ["websocket"],
    });

    socket.on("chat:message", (newMessage) => {
      setMessages((prev) => [...prev, newMessage]);
    });

    return () => {
      socket.disconnect();
    };
  }, [roomId]);

  return messages;
}

---

3. Real-Time Protocol Matrix