seven•5mo 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•5mo 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.

sevenOP•5mo 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•5mo ago

You can only listen to subscriptions, but the wsLink does allow for you to call mutations over WebSocket

sevenOP•5mo 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!