WebSockets

Real-time features, Socket.io integration, server-sent events, and pub/sub.

Overview

Next.js supports real-time features through WebSockets and SSE.

Key Concepts

• WebSocket API — Native browser WebSocket
• Socket.io — Real-time library with fallbacks
• Server-Sent Events — One-way server push
• Pub/Sub Pattern — Message broadcasting
• Custom Server — WebSocket support with custom server

Code Examples

// Custom server with WebSocket
// server.js
const { createServer } = require('http');
const { parse } = require('url');
const next = require('next');
const { Server } = require('socket.io');

const dev = process.env.NODE_ENV !== 'production';
const app = next({ dev });
const handle = app.getRequestHandler();

app.prepare().then(() => {
  const server = createServer((req, res) => {
    handle(req, res, parse(req.url, true));
  });

  const io = new Server(server);

  io.on('connection', (socket) => {
    console.log('Client connected');

    socket.on('message', (msg) => {
      io.emit('message', msg);
    });

    socket.on('disconnect', () => {
      console.log('Client disconnected');
    });
  });

  server.listen(3000);
});

// Client component
'use client';
import { useEffect, useState } from 'react';
import { io } from 'socket.io-client';

function Chat() {
  const [messages, setMessages] = useState([]);
  const [input, setInput] = useState('');
  const [socket, setSocket] = useState(null);

  useEffect(() => {
    const newSocket = io();
    setSocket(newSocket);

    newSocket.on('message', (msg) => {
      setMessages(prev => [...prev, msg]);
    });

    return () => newSocket.close();
  }, []);

  const sendMessage = () => {
    socket?.emit('message', input);
    setInput('');
  };

  return (
    <div>
      <div className="messages">
        {messages.map((msg, i) => <div key={i}>{msg}</div>)}
      </div>
      <input value={input} onChange={(e) => setInput(e.target.value)} />
      <button onClick={sendMessage}>Send</button>
    </div>
  );
}

Practice

Build a real-time chat application with Socket.io and Next.js.