How to emit an event in Next.js 14 app router api

[yanghoxom]

How can I emit an event in app/router?
right now, I need to use a custom server to init socket server based on the document https://socket.io/how-to/use-with-nextjs

then, when I create a message on app/api/comments/route.ts
I want to emit this event to all clients
but when I try to call socket.emit('comment', newComment); in app/api/comments/route.ts
nothing happens, no error, no event emit

it work well if I leave socket.emit in frontend logic, but it doesn't match my expectation, i am looking for method that can emit event from nextjs backend

socket variable is the instance I initialized in app/socket.ts

import { io } from 'socket.io-client';

export const socket = io({
  path: '/api/ws',
  reconnection: true,
  reconnectionAttempts: 5,
  reconnectionDelay: 5000,
  timeout: 35000,
});

//server.ts
import { socketHandler } from '@/libs/WSS';



await socketHandler.createSocketServer(server);


// WSS.ts
class SocketHandler {
  private io: Server | null = null;

  async createSocketServer(httpServer: HTTPServer) {
    if (!this.io) {
      this.io = new Server(httpServer, {
        path: '/api/ws',
        cors: {
          origin: '*',
          methods: ['GET', 'POST'],
        },
        perMessageDeflate: false,
        pingTimeout: 35000, 
        pingInterval: 30000,
        connectTimeout: 30000,
      });

      this.setupIO();
    }
    return this.io;
  }
}
  getIO() {
    return this.io;
  }

i also tried using socketHandler.getIO() but it always returns null, there is no IO on next's server to use directly

[darrachequesne]

Hi! You need to handle it from your server:

import { createServer } from "node:http";
import next from "next";
import { Server } from "socket.io";

const dev = process.env.NODE_ENV !== "production";
const hostname = "localhost";
const port = 3000;
// when using middleware `hostname` and `port` must be provided below
const app = next({ dev, hostname, port });
const handler = app.getRequestHandler();

app.prepare().then(() => {
  const httpServer = createServer(handler);

  const io = new Server(httpServer);

  io.on("connection", (socket) => {
    socket.on("comment", (comment) => {
      socket.broadcast.emit("new-comment", comment); // to all connected clients except the sender
    });
  });

  httpServer
    .once("error", (err) => {
      console.error(err);
      process.exit(1);
    })
    .listen(port, () => {
      console.log(`> Ready on http://${hostname}:${port}`);
    });
});

[yanghoxom]

Hi! You need to handle it from your server:

@darrachequesne thanks for replying, but i don't really understand what you mean.

as i stated above, i am expecting to be able to emit event from app/api/comments/route.ts

since your example is just showing me how to add listener in custom server, i have done that already, it only serves the purpose of listening and broadcasting to clients.

what i want to know is how do i emit an event from app router app/api/comments/routes.ts

[yanghoxom]

@darrachequesne Hello

[yanghoxom]

@darrachequesne Hello, can you check?

[darrachequesne]

Sorry for the delay! In that case, I think you need to store the io instance in the global scope:

// server.js
import { createServer } from "node:http";
import next from "next";
import { Server } from "socket.io";

const dev = process.env.NODE_ENV !== "production";
const hostname = "localhost";
const port = 3000;
// when using middleware `hostname` and `port` must be provided below
const app = next({ dev, hostname, port });
const handler = app.getRequestHandler();

app.prepare().then(() => {
  const httpServer = createServer(handler);

  const io = new Server(httpServer);

  globalThis.io = io;

  io.on("connection", (socket) => {
    // ...
  });

  httpServer
    .once("error", (err) => {
      console.error(err);
      process.exit(1);
    })
    .listen(port, () => {
      console.log(`> Ready on http://${hostname}:${port}`);
    });
});

And then:

// src/app/api/messages/route.js
export async function POST(req) {
  const { message } = await req.json(); // TODO validate user payload

  globalThis.io.emit("message", message);

  return new Response({
    statusCode: 204,
  });
}