Open bahmanworld opened 1 year ago
There are several tutorials on google and YouTube with NextJS, ex:
thanx @Lazhor But that's not working with the Nextjs app routing system. Can you help me a little more?
I'm also wondering if this is possible. Did you make any attempts to implement it? @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 ...
@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.
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.
@bahmanworld, there is some scenario where your configuration might gone wrong:
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:
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.
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.
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.
⚡️ Now we are talking Thanks @darrachequesne , It works perfectly 🌺
Excuse, how to get the socket instance in server actions
@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.
@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
How to integrate Socket.IO into NextJS route.ts?