Next.js / tRPC with WebSockets

Question

I am building an app with Next.JS and tRPC. As I need real-time communication inside my app, I want to use Websockets, which are nicely integrated into rRPC as subscriptions. (See https://trpc.io/docs/subscriptions)

In the documentation of tRPC they are creating a ws Server, however it is not documented for Next.

My questions is: How can I integrate Websocktes in this use case into Next, as I cannot find a way to run the ws Server with Next. I tried to import the file wsServer.ts in _app.tsx or in api/trpc/[trpc].ts without getting it to work. When doing so I always get errors of some node libraries like fs are not found even when ensuring that the code is run on the server side.

score 2 · Accepted Answer · answered Aug 24 '22 at 07:46

2

You have to create a custom server to wrap your Next.js app in order to use it.

We have a full example that is ready to deploy here: https://github.com/trpc/examples-next-prisma-starter-websockets

Beware that you can't host WebSocket servers on Vercel.

answered Aug 24 '22 at 07:46

Alex

1,689
18
27

1

Thank you! I used this example and stripped it down to the things I need and it is working now. – Lukas Thiersch Aug 27 '22 at 11:42
Is the custom server still necessary in March 2023? There doesn't seem to be anyting mentioning custom server in the v10 doc! – Chen W Mar 19 '23 at 07:29
Yes, you need a server to use WSS, it doesn't work on serverless – Alex Mar 29 '23 at 11:37
And what about server-side events? Looks like they can be used to provide ws compatible behaviour? – MadaShindeInai May 15 '23 at 11:56

Next.js / tRPC with WebSockets

1 Answers1