Integrate Socket.IO with NextJS 13+ App Router `app/api/chat/route.ts`

[bahmanworld]

How to integrate Socket.IO into NextJS route.ts?

import { Server } from 'socket.io'

export const GET = (request: Request) => {
   // todo
}

export const POST = (request: Request) => {
   // todo
}

...

[Lazhor]

There are several tutorials on google and YouTube with NextJS, ex:

https://www.showwcase.com/show/18995/real-time-chat-application-under-5-minutes-using-nextjs-and-socketio

[bahmanworld]

thanx @Lazhor But that's not working with the Nextjs app routing system. Can you help me a little more?

[esponges]

I'm also wondering if this is possible. Did you make any attempts to implement it? @bahmanworld

[bahmanworld]

I'm also wondering if this is possible. Did you make any attempts to implement it? @bahmanworld

I was trying to integrate socketIO once per day last month, nothing happened, i have no idea right now ...

[mochamadsatria]

@bahmanworld , @Lazhor solution works quite well. I mention this because you can actually have an app and page router in a single Next.js project. Vercel sets it up for you, allowing you to adopt it incrementally. Maybe you should try it too. Just make sure the name of the last accessible route is not duplicated between them.

[bahmanworld]

Thank you @mochamadsatria for your great advice , but i've already tried both solutions.. could you explain more what i miss?

However i never try to integrating socketIO with nextjs 14 lately.

[mochamadsatria]

@bahmanworld, there is some scenario where your configuration might gone wrong:

1. You put your code inside app router instead of pages router.
2. You use app router but not considering if all component inside it is treated as server component.
3. Your client component configuration inside app router might not correct.

here is the working minimal example, I hope you'll get the point: https://github.com/mochamadsatria/next14io-example

to enhance it there some trick you can use:

1. Use server action and take advantage of how the server component lifecycle work.
2. Use pages router instead.
3. I know there is a way to make the render-lazy in server component, I have using this method in the past but forgot where the documentation is located XD.

There is a known issue with my example at this moment: The code work perfectly except it will render the message twice in route inside app router, it will not happen if you use pages router. I have couple solution in mind but I do not have time to try it.

If you can improve the example pls make a pull request into my repository so anyone can see how it works.

[MiroslavPetrik]

The /app directory uses Route Handlers which use a common NextRequest and NextResponse interface for both edge and nodejs runtimes.

If you inspect the NextResponse you will see that even in nodejs environment, the res.socket.server property is not there.

So you must install the socket.io via the API Routes, which are supported in the /pages directory. There you have NextApiResponse (notice the Api) which has the socket property.

See tutorial for more.

[darrachequesne]

Hi all!

I've added a guide in the documentation: https://socket.io/how-to/use-with-nextjs

Please ping me if something is not clear enough.

[bahmanworld]

⚡️ Now we are talking Thanks @darrachequesne , It works perfectly 🌺

[headironc]

Excuse, how to get the socket instance in server actions

[SurajKharkwal]

@darrachequesne Unfortunately, this solution isn't compatible with Vercel. As mentioned in the Next.js documentation, custom servers cannot be deployed to Vercel. You can find more details here: Next.js Custom Server Documentation.

[darrachequesne]

@SurajKharkwal yes, you are absolutely right, that's because Vercel does not support WebSocket connections.

Reference: https://vercel.com/guides/do-vercel-serverless-functions-support-websocket-connections

I've added a note at the top of the guide.

@headironc that's a good question! Were you able to find a solution? I guess you should be able to add some kind of cookie, to create a link between the request handlers and Socket.IO.

See also: https://socket.io/how-to/use-with-express-session#using-the-session-id