Next.js Discord

Discord Forum

Very confused about how to implement Websockets in an efficient way

Unanswered
firminou posted this in #help-forum
Open in Discord
Hi everyone, so this is my first time ever making a "big" app in Next.js and I feel like I am currently heading straight into a pit.

What my website is: it is basically an online bingo, you have a code, you join, you play with your friends.
I am now implementing the connection between my frontend and database and so I needed websockets, never used them before so I asked a friend who recommended socket.io but socket.io does warn that overriding next.js's router is not the best but eh as long as it works I was fine with it.

The websocket is used to transmit the info of someone validating one of their bingo card and also sending to the other users that one has been updated.

I now feel like I am doing everything "wrong" because I do have what I wanted, I got my socket from my frontend to backend but because this new custom router is in .JS I can't use .TSX to write my functions which annoys me greatly. I really prefer something static typed. I can't start my server from a .TSX or .TS.

Should I keep using this socket.io or should I look into something else ? This app is for my computer science end of the year project so the person requesting it does not want something like firebase or anything requiring an account to use the backend.

Thank you in advance :)

PS: I am using the app router with react,
Tutorial on how to use socket.io with next.js: https://socket.io/how-to/use-with-nextjs

1 Reply

@firminou Hi everyone, so this is my first time ever making a "big" app in Next.js and I feel like I am currently heading straight into a pit. What my website is: it is basically an online bingo, you have a code, you join, you play with your friends. I am now implementing the connection between my frontend and database and so I needed websockets, never used them before so I asked a friend who recommended socket.io but socket.io does warn that overriding next.js's router is not the best but eh as long as it works I was fine with it. The websocket is used to transmit the info of someone validating one of their bingo card and also sending to the other users that one has been updated. I now feel like I am doing everything "wrong" because I do have what I wanted, I got my socket from my frontend to backend but because this new custom router is in .JS I can't use .TSX to write my functions which annoys me greatly. I really prefer something static typed. I can't start my server from a .TSX or .TS. Should I keep using this socket.io or should I look into something else ? This app is for my computer science end of the year project so the person requesting it does not want something like firebase or anything requiring an account to use the backend. Thank you in advance :) PS: I am using the app router with react, Tutorial on how to use socket.io with next.js: https://socket.io/how-to/use-with-nextjs
Black imported fire ant
How about WebSocket instead of Socket.io?