next-plugin-websocket

next-plugin-websocket

Add WebSocket support to Next.js API routes

Features

• Zero configuration - Just install the package and you're good to go
• Hot reloading - Whenever an API route is modified, any sockets open for that page will be automatically disconnected
• URL routing - The connection URL will get correctly mapped to the corresponding Next.js /api page

Compatibility

• ✅ Next.js 13
• ✅ The new app directory
• ✅ Standalone output mode

Installation

yarn add next-plugin-websocket

Usage

Export a socket handler function from a Next.js API route. The first argument will be the WebSocket client and the second argument will be the original request object.

Basic example

import { appRouter } from "@/server/routers/_app";
import { NextApiHandler } from "next";
import { NextWebSocketHandler } from "next-plugin-websocket";

export const socket: NextWebSocketHandler = (client, req) => {
  client.on("message", (msg) => {
    client.send(msg);
  });
};

const handler: NextApiHandler = (req, res) => {
  res.status(405).end();
};

export default handler;

tRPC example

import { appRouter } from "@/server/routers/_app";
import { createNextApiHandler } from "@trpc/server/adapters/next";
import { applyWSSHandler } from "@trpc/server/adapters/ws";
import { NextWebSocketHandler } from "next-plugin-websocket";
import { WebSocketServer } from "ws";

export const socket: NextWebSocketHandler = (client, req) => {
  const wss = new WebSocketServer({ noServer: true });
  applyWSSHandler({ wss, router: appRouter });
  wss.emit("connection", client, req);
};

export default createNextApiHandler({
  router: appRouter,
});

Caveats

TODO