NextJS websocket API route

ws.ts

import { Server } from "http";
import { Socket } from "net";
import { NextApiRequest, NextApiResponse } from "next";
import { Server as SocketServer } from "socket.io";

interface NextSocket extends Socket {
  server?: Server & { io?: SocketServer };
}

/**
 * Only API routes with NodeJS runtime support socket.io,
 * also deploying to Vercel does will not work.
 *
 * @link https://vercel.com/guides/do-vercel-serverless-functions-support-websocket-connections
 * @link https://nextjs.org/docs/api-reference/edge-runtime
 */
const SocketHandler = (req: NextApiRequest, res: NextApiResponse) => {
  if (!res.socket) {
    throw new Error("No socket found: " + req.url);
  }

  const socket = res.socket as NextSocket;

  if (!socket.server) {
    throw new Error("No NextJS server found: " + req.url);
  }

  if (!req.url) {
    throw new Error("No URL specified for route: " + req.url);
  }

  if (!socket.server.io) {
    console.info("Starting socket.io server", req.url);
    const io = new SocketServer(socket.server, { path: req.url });
    socket.server.io = io;
    io.on("connection", (socket) => {
      const interval = setInterval(() => {
        socket.emit("message", "Hello World!" + Date.now());
      }, 1000);
      socket.on("disconnect", () => {
        clearInterval(interval);
      });
    });
  }
  res.end();
};

export default SocketHandler;

Unfortunately, using Socket IO only possible when you deploy app to your own infrastructure such as VM, docker, etc.