Access to server instance

[zaneadix]

Goals

1. Have some way of accessing the server based on the new app directory

Non-Goals

No response

Background

It seems like pretty common practice for those using socket.io with next.js to do create a dummy route for initializing socket.io by accessing the server instance on the response object.

const SocketHandler = (req, res) => {
  if (!res.socket.server.io) {
    const io = new Server(res.socket.server);
    const matchupStream = Matchup.watch();

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

    matchupStream.on('change', change => {
      console.log(change);
    });

    res.socket.server.io = io;
  }
  res.end();
};

Given the new route handlers, theres currently no way to access the server instance.

Proposal

Enable some way of access the server instance

[rajiv-eulogik]

Facing the same problem with socket.io, what was your solution?

[lucaspiresfernandes]

There is no solution. While Next.js doesn't provide a way to access the server instance, there will be no way to attach the socket.io server to the next.js server. All we can do is wait and in the meantime use the /pages router.

[NJ9802]

Pages router can be used together with the app router, API endpoint can be created in pages/api/socket.io and the rest of application in the app directory

[NSV1991]

does it work?

[NJ9802]

It should work. Personally, I haven't tried it yet, but based on the documentation and the discussion about incremental adoption, I believe it should work.

"Next.js 13 introduced the new App Router with new features and conventions. The new Router is available in the app directory and co-exists with the pages directory."

[Dinesh-Kuniyal]

Yes, it is working with pages router.

[sahariar-safin]

Here is a proposal for enabling access to the server instance in Next.js:

• Add a new property to the next.config.js file called serverInstance. This property should be an object that contains the following properties:
  • port: The port that the server is listening on.
  • host: The host that the server is listening on.
  • io: An instance of the Socket.io server.
• In your code, you can access the server instance by using the next.serverInstance property. For example, you could use the following code to initialize Socket.io:

const io = require('socket.io');
const serverInstance = next.serverInstance;
const port = serverInstance.port;
const host = serverInstance.host;

io.listen(port, host);

This proposal would allow developers to access the server instance in a way that is consistent with the new route handlers. It would also make it easier for developers to use Socket.io with Next.js.

Here are some pros and cons of this proposal:

Pros:

• It would make it easier for developers to access the server instance.
• It would make it easier for developers to use Socket.io with Next.js.

Cons:

• It would add a new dependency to Next.js.
• It would add a new configuration option to Next.js.

Overall, I believe that the pros of this proposal outweigh the cons. I believe that this proposal would make it easier for developers to use Next.js and Socket.io.

[shubhankartrivedi]

Can you give an example of next.config.js with serverInstance property?
Would be great.

[NSV1991]

I am trying to initialize socket.io, but getting
GET http://localhost:3000/socket.io?EIO=4&transport=polling&t=OcDdIzq 404 (Not Found)
trying as below
`const SocketHandler = (req, res) => {
if (!res.socket.server.io) {
const io = new Server(res.socket.server);
const matchupStream = Matchup.watch();

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

matchupStream.on('change', change => {
  console.log(change);
});

res.socket.server.io = io;

}
res.end();
};`

if there is any way please mention

[kleenkanteen]

No idea, but this video uses the pages router instead alongside the app router: https://youtu.be/ZbX4Ok9YX94?t=29330

[masadamsahid]

Please check the example provided by SocketIO here: https://socket.io/how-to/use-with-nextjs

It seems we have to create a custom server for our Next.js project that combining the Next.js app handler and other node.js server (like using something like http or express server). Read more about custom server:

• Official Next.js docs, using http module
• Example of combining Next.js handlers to Express

[chandreshpatidar]

@masadamsahid Using the example provide by SocketIO will work fine on localhost, but on production this throw 404

[yanghoxom]

@masadamsahid but bad thing is custom server can not use the same instance IO for app/router, so you can not use IO instance which alreadyy initialized in custom server in app/router

[melodyxpot]

I successfully configured with custom server. But I already deployed the project into Vercel and Vercel doesn't provide Next.js custom server.
So, I just removed it and deployed the socket.io server with express.js in another instance, out of next.js project.
So I have 2 project now. next.js full web app, and expressjs + socket.io for socket server purpose.
Is there a way to combine them and deploy in vercel?
And also if I use the custom server, the app is compiling every time after I update the code. So it's very difficult to see the updated result fastly.
How can I solve this problem?
If I use the default next.js project, it compiles the page just once when I run the project with dev mode. But if I create my custom server and integrate some special features like MongoDB connection and Socket.io, then it compiles everytime after I update the code.
Does anyone have the solution for this?
Thank you.