How do I setup subscriptions with websockets in Next.js 14 app router?
All I've found were some older examples for the pages router which for me were not very understandable or I'm just stupid. For the most part I'm having trouble understanding how exactly the websocket server is started. Does it start with Next.js or is it something that you have to seperatly?
Would be glad if someone can give me some insight.
Solution:Jump to solution
btw i did it: You can check out the project. it uses app directory. I am using t3 stack here https://github.com/Roopaish/evento
main files to look at are: tsconfig.server.json, src/server/ws-dev-server.ts (need to update prod one, will do later), trpc/react.tsx, src/server/routers/post.ts, app/(all)/post/page.tsx
And also don't export thing from wss-dev-server.ts. Cause if you use those exports, next js server will try to use that port to create new WebSocketServer....
3 Replies
The web socket needs to be started separately. I am also confused on how they communicate. I am trying out different solutions to set this up in my app. I did implemented it and was working but authentication with next-auth (getServerSession) did not work, so i am trying different things from here and there to make it work.
Solution
btw i did it: You can check out the project. it uses app directory. I am using t3 stack here https://github.com/Roopaish/evento
main files to look at are: tsconfig.server.json, src/server/ws-dev-server.ts (need to update prod one, will do later), trpc/react.tsx, src/server/routers/post.ts, app/(all)/post/page.tsx
And also don't export thing from wss-dev-server.ts. Cause if you use those exports, next js server will try to use that port to create new WebSocketServer.
Cheers mate, thanks for sharing.