Unable to set up a client side subscription to a trpc route that supports websockets
I wrote the code on the client side here to query the subscription: https://github.com/sumanthneerumalla/ttt/blob/bb0474b64cd463a3aaa6a2230598a683ee5b4687/tic-tac-toe/src/pages/index.tsx#L47-L51
and this is the matching backend code that should give the right data back: https://github.com/sumanthneerumalla/ttt/blob/bb0474b64cd463a3aaa6a2230598a683ee5b4687/tic-tac-toe/src/server/api/routers/post.ts#L70-L83
I tried following the directions on this blog post here:
https://medium.com/@lada496/trpc-102-subscription-web-socket-d81b8962a010
And i got the code snippets for setting up the server and client side code from this example project here:
client: https://github.com/trpc/examples-next-prisma-websockets-starter/blob/077367508a7dcda504170b48bc7b6c65457f90c6/src/pages/index.tsx#L175-L180
server: https://github.com/trpc/examples-next-prisma-websockets-starter/blob/077367508a7dcda504170b48bc7b6c65457f90c6/src/server/routers/post.ts#L122-L132
As you can see, its a pretty simple proof of concept just to ensure that data is being passed from the server to the client
In order to set up the socket server, which runs on port 3001 alongside the main server port 3000 for the npm runtime i followed this guide:
https://medium.com/@lada496/trpc-102-subscription-web-socket-d81b8962a010
It involves setting up the client and server side subscriptions which i linked above, and then also creating the websocket server:
https://github.com/sumanthneerumalla/ttt/blob/bb0474b64cd463a3aaa6a2230598a683ee5b4687/tic-tac-toe/src/server/wss.ts
and setting up the trpc client to use the websocket :
- https://github.com/sumanthneerumalla/ttt/blob/bb0474b64cd463a3aaa6a2230598a683ee5b4687/tic-tac-toe/src/utils/api.ts#L19-L25
-https://github.com/sumanthneerumalla/ttt/blob/bb0474b64cd463a3aaa6a2230598a683ee5b4687/tic-tac-toe/src/utils/api.ts#L58
websocket connects, but gets no response..
related threads:
im having trouble setting up trpc w/ websockets on latest t3...
and this is the matching backend code that should give the right data back: https://github.com/sumanthneerumalla/ttt/blob/bb0474b64cd463a3aaa6a2230598a683ee5b4687/tic-tac-toe/src/server/api/routers/post.ts#L70-L83
I tried following the directions on this blog post here:
https://medium.com/@lada496/trpc-102-subscription-web-socket-d81b8962a010
And i got the code snippets for setting up the server and client side code from this example project here:
client: https://github.com/trpc/examples-next-prisma-websockets-starter/blob/077367508a7dcda504170b48bc7b6c65457f90c6/src/pages/index.tsx#L175-L180
server: https://github.com/trpc/examples-next-prisma-websockets-starter/blob/077367508a7dcda504170b48bc7b6c65457f90c6/src/server/routers/post.ts#L122-L132
As you can see, its a pretty simple proof of concept just to ensure that data is being passed from the server to the client
In order to set up the socket server, which runs on port 3001 alongside the main server port 3000 for the npm runtime i followed this guide:
https://medium.com/@lada496/trpc-102-subscription-web-socket-d81b8962a010
It involves setting up the client and server side subscriptions which i linked above, and then also creating the websocket server:
https://github.com/sumanthneerumalla/ttt/blob/bb0474b64cd463a3aaa6a2230598a683ee5b4687/tic-tac-toe/src/server/wss.ts
and setting up the trpc client to use the websocket :
- https://github.com/sumanthneerumalla/ttt/blob/bb0474b64cd463a3aaa6a2230598a683ee5b4687/tic-tac-toe/src/utils/api.ts#L19-L25
-https://github.com/sumanthneerumalla/ttt/blob/bb0474b64cd463a3aaa6a2230598a683ee5b4687/tic-tac-toe/src/utils/api.ts#L58
websocket connects, but gets no response..
related threads:
im having trouble setting up trpc w/ websockets on latest t3...
Medium
This is my memo when I implemented a subscription with tRPC along with the official documents. I also referred to the code example provided…
GitHub
tRPC Next.js WebSocket Starter. Contribute to trpc/examples-next-prisma-websockets-starter development by creating an account on GitHub.
tRPC Next.js WebSocket Starter. Contribute to trpc/examples-next-prisma-websockets-starter development by creating an account on GitHub.GitHub
Contribute to sumanthneerumalla/ttt development by creating an account on GitHub.
GitHub
Contribute to sumanthneerumalla/ttt development by creating an account on GitHub.
GitHub tRPC Next.js WebSocket Starter. Contribute to trpc/examples-next-prisma-websockets-starter development by creating an account on GitHub.
tRPC Next.js WebSocket Starter. Contribute to trpc/examples-next-prisma-websockets-starter development by creating an account on GitHub.Solution
I have been able to fix this issue by using a function to return the correct link in the links array.
It seems that the links are something that are mainly evaluated on the client side, and wsLink as well as httpBatchLink are "terminating links" which means that we cannot consecutively put a wslink after a httpBatchLink or vice versa.
I borrowed a code snippet from this example project which returns the right link based on the browser having a window.
https://github.com/trpc/examples-next-prisma-websockets-starter/blob/c666de6367d7449d4108e5e384da043c4f93a5d5/src/utils/trpc.ts#L21-L43
Its also possible to return the right link based on the operation type as is done here:
https://github.com/apollographql/subscriptions-transport-ws/issues/333
It seems that the links are something that are mainly evaluated on the client side, and wsLink as well as httpBatchLink are "terminating links" which means that we cannot consecutively put a wslink after a httpBatchLink or vice versa.
I borrowed a code snippet from this example project which returns the right link based on the browser having a window.
https://github.com/trpc/examples-next-prisma-websockets-starter/blob/c666de6367d7449d4108e5e384da043c4f93a5d5/src/utils/trpc.ts#L21-L43
Its also possible to return the right link based on the operation type as is done here:
https://github.com/apollographql/subscriptions-transport-ws/issues/333
GitHub
Hi, I am trying to implement subscriptions from a GraphiQL server. Schemas, resolvers, and the server is done and appears to be working. (I got no issues with the subscriptions from the graphiql su...
GitHub tRPC Next.js WebSocket Starter. Contribute to trpc/examples-next-prisma-websockets-starter development by creating an account on GitHub.
tRPC Next.js WebSocket Starter. Contribute to trpc/examples-next-prisma-websockets-starter development by creating an account on GitHub.
Was this page helpful?
