Integrating Socket.IO with the App Router

[lucaspiresfernandes]

Hello! Has anyone been successful at integrating the Socket.IO server with the app router?

Using the pages folder, it is quite easy to bind the Websocket server to res.socket.server.io, but I don't see a way to do this now that Route Handlers don't provide the res object.

Can anyone help me to figure this out?

[laureanray]

I don't get why is this closed? Can't even find the related discussion/issue.

[lucaspiresfernandes]

This is a duplicate post, so I figured I should just close it. This one exposes the problem much better than me: #47782

[masadamsahid]

Please check out 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

[Kamleshpaul]

For anyone looking for a detailed guide on using WebSocket in Next.js with the app router and Socket.IO, I’ve written an article that might help: How to Use WebSocket in Next.js App Router with Socket.IO.

The article covers:

• Setting up WebSocket with Next.js App Router.
• Integrating Socket.IO for real-time communication.
• Handling server-side and client-side connections effectively.

I hope this can save you some time and effort. Feedback and suggestions are always welcome!