Hey Next.js devs 👋,
I'm building a real-time chat system using WebSockets, and I’d love to get your thoughts on my implementation. My main concerns are performance and scalability as the project grows.

Here’s how I structured the setup:

websocket-server.js (Using Bun)
This file sets up a WebSocket server with Bun:

Bun.serve({
  port: 3001,
  fetch(req, server) {
    const url = new URL(req.url);
    if (url.pathname === "/ws") {
      const username = url.searchParams.get("username") || "Anonymous";
      const upgraded = server.upgrade(req, { data: { username } });
      return upgraded ? undefined : new Response("Upgrade failed", { status: 400 });
    }
    return new Response("Not Found", { status: 404 });
  },
  websocket: {
    open(ws) {
      ws.subscribe("chat");
      ws.publish("chat", `${ws.data.username} joined the chat`);
    },
    message(ws, message) {
      ws.publish("chat", `${ws.data.username}: ${message}`);
    },
    close(ws) {
      ws.unsubscribe("chat");
      ws.publish("chat", `${ws.data.username} left the chat`);
    },
  },
});

socket-server.js (Using Socket.IO)
This alternative uses Socket.IO instead of WebSockets:

import { createServer } from "bun";
import { Server } from "socket.io";

const port = 4000;
const httpServer = createServer();

const io = new Server(httpServer, {
  cors: {
    origin: "http://localhost:3000",
    methods: ["GET", "POST"],
  },
});

io.on("connection", (socket) => {
  socket.on("message", (data) => {
    io.emit("message", data);
  });

  socket.on("disconnect", () => {});
});

httpServer.listen(port);

src/websocket.js (Client WebSocket Connection)

export const ws = new WebSocket("ws://localhost:3001/ws?username=NextUser");

ws.addEventListener("open", () => {});
ws.addEventListener("message", (event) => {});
ws.addEventListener("close", () => {});
ws.addEventListener("error", () => {});