seven
seven2w ago

client server counication with webSockets

Hi, I would like to be able to send data via ws api from my frontend. Still, I don't seem to be able to send any data from the frontend to the trpc backend, I tried to do it in a way that I make mutation and I open ws connection in this procedure. Still, it reconnects me on every request and I need this connection to stay open and just send the data, is there a way to send data from trpc client - frontend to the subscription precedure? On the client, apart from onData there are only onComplete, onError, onSarted, and onStopped. ws API offers ws.send() and it seems that I can only receive data from the server, is trpc client lacking this functionality or am i missing something? Many Thanks
4 Replies
BeBoRE
BeBoRE2w ago
The wsLink supports mutations, it should stay open. There is an option for the ws client to be lazy, but I believe that's not enabled by default.
seven
seven2w ago
Hi @BeBoRE what do you mean by that wsLink supports mutations? and what does it mean that is is lazy? you can evable it in config but the doc says that
Lazy mode will close the WebSocket automatically after a period of inactivity (no messages sent or received and no pending requests)
Lazy mode will close the WebSocket automatically after a period of inactivity (no messages sent or received and no pending requests)
how does it realte to sending messages via ws to my subscription procedure?
BeBoRE
BeBoRE2w ago
You can only listen to subscriptions, but the wsLink does allow for you to call mutations over WebSocket
seven
seven2w ago
could you please give me some code example how thiscould look like? i don't understand how it should be done 🙂 and many thanks for replying this i important to me if i understand correectly you say that i could configure in my trpc client that if i use certain procedure (i want this ws link to work only on placeOrder mutation procedure) than instead od http link ws link would be used and the connection to my procedure would stau open and the data would be transmitted super fast?
links: [
splitLink({
condition: (op) => op.type === 'subscription || procedure name is placeOrder',
true: wsLink({
client: createWSClient({
url: `ws://localhost:7000`,
lazy: {
enabled: true,
closeMs: 10000000000000000000000,
},
}),
transformer: superjson,
}),
false: httpLink({
url: `http://localhost:7000`,
fetch(url, options) {
return fetch(url, {
...options,
credentials: 'include',
cache: 'no-store',
});
},
transformer: superjson,
}),
}),
],
links: [
splitLink({
condition: (op) => op.type === 'subscription || procedure name is placeOrder',
true: wsLink({
client: createWSClient({
url: `ws://localhost:7000`,
lazy: {
enabled: true,
closeMs: 10000000000000000000000,
},
}),
transformer: superjson,
}),
false: httpLink({
url: `http://localhost:7000`,
fetch(url, options) {
return fetch(url, {
...options,
credentials: 'include',
cache: 'no-store',
});
},
transformer: superjson,
}),
}),
],
this does not work
op.type === 'subscription' || op.path === 'binance.ordersStream'
op.type === 'subscription' || op.path === 'binance.ordersStream'
i get waring in the console saying that
wsLink.mjs:120 WebSocket connection to 'ws://localhost:7000/' failed: WebSocket is closed before the connection is established.
wsLink.mjs:120 WebSocket connection to 'ws://localhost:7000/' failed: WebSocket is closed before the connection is established.
hmmm no it was because od lazy flag was on now its working and im gettingconsole logs 😄 thank you!
More Posts
How do you call a router procedure from another router procedure?```javascript .query(async ({ ctx, input }) => { const wikiQuery = await routerFromAnotherFileCannot figure out the correct typeI am trying to use tRPC outside of React. I use it in React, but I need a separate way to use it. I Trying to get the return type of a procedure.Using TRPC v11. I am failing to return the type. I get the error Type alias 'ProtectedProcedureType'Having great difficulty using StreamingI wanted to use the stream api with tRPC to handle a response with alot of return values and I lookeUnable to abort Suspense queriesI am using trpc@11 with react-query@5. I was under the impression that as long as abortOnUnmount is Authorization and Authentication while using unstable_httpSubscriptionLinkI'm wondering what best practices are for specifying headers like bearer tokens when using httpSubscCustom data transformer and input/output schemaHello 👋 I would like to code a data transformer, but I would this data transformer to be aware ofProperty 'error' does not exist on type 'MiddlewareOKResult<any>'.Hello, I am building an trpc adapter for nestjs, and I am trying to extend some of trpc's functionalI'm unable to make a GET request in postman. But able to make post requestsI get: `expected object received undefined` what could i be doing wrong? these are my routes, the pThe inferred type of 'trpc' cannot be named without a reference to '...'I have a monorepo setup like this: root -tsconfig.json -frontend --tsconfig.json -backend --tsconfi