websocket

[Cyrila54]

Summary

hello, I have a problem, I deployed my backend (nodejs) and my frontend (next/react) on vercel, no worries, the problem is that the websocket part (socket.io) does not work and I do not understand why because it works very well in localhost.

Thank you very much for your help. attached my console error.

cyril

Additional information

521-b75fc05d5054e918.js:1     GET https://skyjo-backend.vercel.app/socket.io/?EIO=4&transport=polling&t=Obb24tX 404
create @ 521-b75fc05d5054e918.js:1
V @ 521-b75fc05d5054e918.js:1
request @ 521-b75fc05d5054e918.js:1
doPoll @ 521-b75fc05d5054e918.js:1
poll @ 521-b75fc05d5054e918.js:1
doOpen @ 521-b75fc05d5054e918.js:1
open @ 521-b75fc05d5054e918.js:1
open @ 521-b75fc05d5054e918.js:1
G @ 521-b75fc05d5054e918.js:1
open @ 521-b75fc05d5054e918.js:1
(anonyme) @ 521-b75fc05d5054e918.js:1
setTimeout (asynchrone)
reconnect @ 521-b75fc05d5054e918.js:1
(anonyme) @ 521-b75fc05d5054e918.js:1
i @ 521-b75fc05d5054e918.js:1
k.emit @ 521-b75fc05d5054e918.js:1
onError @ 521-b75fc05d5054e918.js:1
k.emit @ 521-b75fc05d5054e918.js:1
onError @ 521-b75fc05d5054e918.js:1
(anonyme) @ 521-b75fc05d5054e918.js:1
k.emit @ 521-b75fc05d5054e918.js:1
onError @ 521-b75fc05d5054e918.js:1
(anonyme) @ 521-b75fc05d5054e918.js:1
setTimeout (asynchrone)
r.onreadystatechange @ 521-b75fc05d5054e918.js:1
XMLHttpRequest.send (asynchrone)
create @ 521-b75fc05d5054e918.js:1
V @ 521-b75fc05d5054e918.js:1
request @ 521-b75fc05d5054e918.js:1
doPoll @ 521-b75fc05d5054e918.js:1
poll @ 521-b75fc05d5054e918.js:1
doOpen @ 521-b75fc05d5054e918.js:1
open @ 521-b75fc05d5054e918.js:1
open @ 521-b75fc05d5054e918.js:1
G @ 521-b75fc05d5054e918.js:1
open @ 521-b75fc05d5054e918.js:1
(anonyme) @ 521-b75fc05d5054e918.js:1

Example

No response

[icyJoseph]

How's the backend deployed? It might just be that it is deployed as a serverless backend, and the socket dies out after a timeout time.

[Cyrila54]

thank you for your answer @icyJoseph
I deployed it on vercel in a "traditional" way. I'm a young developer so I'm not sure I fully understand the question but if you help me understand the question better, I can tell you.

I simply deployed via vercel by making new project. my backend is in a separate repository. Is there something to check on the backend specifically?

[Cyrila54]

node -v
v18.15.0

[icyJoseph]

So your frontend sees a 404?

Sorry I just can't stop thinking that this is a problem with the serverless deployment. Heroku and Netlify might also use serverless deployments...

Is this an express app?

[Cyrila54]

yes I had written to you a little higher.

[icyJoseph]

Alright, yeah sorry GitHub collapsed the replies.

So express app, that's totally reachable at https://skyjo-backend.vercel.app but not at the path of the socket... Well I don't know, I really think the function spins up and shutdown

Are you doing something like this? https://vercel.com/guides/using-express-with-vercel#standalone-express

[Cyrila54]

Hello,
yes there are some similar points indeed. Thanks for trying to help me though @icyJoseph

[AlessandroFare]

Vercel serverless functions are not meant to hold long-lived WebSockets. Each invocation spins up, handles a request, and exits, so a Socket.IO server on the same deployment will drop or behave oddly under load.

Common fixes:

1. Split deploy: Next on Vercel, socket server on Fly/Railway (you lose "all on Vercel").
2. Edge realtime: Next on Vercel; chat on Cloudflare Worker + one Durable Object per room (FluxyChat pattern).
3. Managed vendor: Pusher/Ably (second bill, less ops).

If you need rooms + history + reconnect without a socket VM, (2) is what I'd pick. What are you building, chat threads or fire-and-forget alerts?