A next/websocket package addition

[AdamTuraj]

Describe the feature you'd like to request

I would like a new package that will allow you to easily make websockets in the backend. I want it to easier implement the WebSocket communication between the client and the server.

Describe the solution you'd like

A new package that allows you to easily setup websockets in API Routes.

Describe alternatives you've considered

I am currently using socket IO in an API route like this:

const handler = async (req, res) => {
  if (!res.socket.server.io) {
    const ws = new Server(res.socket.server);

    ws.on("connection", () => {
      console.log("Connected");
    });

    res.socket.server.io = ws;
  }

  res.end();
};

But it is having some issues when connecting from a different process.

[yanickrochon]

I would recommend this in API routes:

// ./app/api/foo.ts

export function socket(socket:Socket) {
  socket.on("message", msg => {
    socket.emit("response", msg);
  });
};

export default function handler(req: NextApiRequest, res: NextApiResponse) {
  // normal HTTP request to /api/foo
  res.end();
};

Enabling Web sockets could be done through Next's configuration. For example:

const config = {
  // ...
  webSocket: {
    port: 3100,    // optional, defaults to same server port
  }
};

export default config;

When API endpoints are setup, Next should also create websocket endpoints if the socket function is exported.

[brhx]

I've just created a package, next-plugin-websocket, that adds support for WebSocket handlers in Next.js API routes with no extra configuration:

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(426).end();
};

export default handler;

It's still very much in beta, and I've only managed to test it on Next.js 13 (with and without appDir) and standalone output mode, but if there are any extra features or anything that isn't working please let me know and I'll take a look!

I've been using it in production without issue for a little while now without any issues 😊