WebSockets in Next.js & React: Build Real-Time Features Without a Library

HTTP is great for requesting data, but for chat apps, live notifications, or collaborative editing, you need a bi-directional persistent connection: WebSockets.

The WebSocket Lifecycle

Managing a WebSocket connection requires careful handling of the handshake, message parsing, and the inevitable reconnection logic when the client moves between networks.

const socket = new WebSocket('ws://localhost:8080');

socket.onopen = () => console.log('Connected');
socket.onmessage = (event) => {
  const data = JSON.parse(event.data);
  updateUI(data);
};

Scaling Real-time

When scaling to multiple servers, you need a pub/sub mechanism like Redis to synchronize state across all WebSocket nodes. This ensures that a user on Server A can communicate with a user on Server B.