T
tRPC

tRPC subscription : Access to socket ID from subscription

tRPC subscription : Access to socket ID from subscription

Cchronicstone
View on Discord
8/28/2023
I'm trying to implement user online status in a reliable way on my app, on the "live" part of my app. It's done & working well, but on some cases where the connexion is cut & not restored, I can't trigger the mutation marking the user offline. Right now I'm handling this through the client only right now but in some instances, it's not reliable. What I'd like to do would be something like this : (For subscription I need to pass my authToken as an input since wsLink does not support dynamic header resolver yet to my knowledge). 
userOnlineStatusChanged: publicProcedure
.input(z.object({ authToken: z.string() }))
.subscription(async ({ input, ctx, socket }) => {
  const user = await getUserFromJwt()
  if(!user) throw new TRPCError({ code: 'UNAUTHORIZED', message: '...' })

  // SOMEHOW GET SOCKET ID & ASSOCIATE IT TO USER :
  const storage = useStorage('db')
  storage.set(socket.id, user._id)
  

  return observable<{ userId: string; online: boolean }>((emit) => {
    mapEvents.on(
      'userOnlineStatusChanged',
      (params) => params.organizationId === user.organizationId && emit.next(params),
    );

    return () => {
      mapEvents.off(
        'userOnlineStatusChanged',
        (params) => params.organizationId === user.organizationId && emit.next(params),
      );
    };
  });
})
userOnlineStatusChanged: publicProcedure
.input(z.object({ authToken: z.string() }))
.subscription(async ({ input, ctx, socket }) => {
  const user = await getUserFromJwt()
  if(!user) throw new TRPCError({ code: 'UNAUTHORIZED', message: '...' })

  // SOMEHOW GET SOCKET ID & ASSOCIATE IT TO USER :
  const storage = useStorage('db')
  storage.set(socket.id, user._id)
  

  return observable<{ userId: string; online: boolean }>((emit) => {
    mapEvents.on(
      'userOnlineStatusChanged',
      (params) => params.organizationId === user.organizationId && emit.next(params),
    );

    return () => {
      mapEvents.off(
        'userOnlineStatusChanged',
        (params) => params.organizationId === user.organizationId && emit.next(params),
      );
    };
  });
})
The goal being that on disconnexion of the socket, I mark the user as disconnected from the server to make the whole thing more reliable : 
// wsServer.ts
const WebSocketServer = WebSocket.Server || WSWebSocketServer;
  const wss = new WebSocketServer({
    port: 3002,
  });

const handler = applyWSSHandler({ wss, router: appRouter, createContext: () => ({}) as Context });

wss.on('connection', (ws) => {
  consola.log(`➕➕ Connection (${wss.clients.size})`);
  ws.once('close', () => {
    consola.log(`➖➖ Connection (${wss.clients.size})`);
    const storage = useStorage('db')
    // HERE, SOMEHOW GET UNIQUE SOCKET ID
    const socketId = ...
    const linkedUserId = storage.get(socketId)

    // If present linked user ID, mark user offline
    if(linkedUserId) db.update(userOrganizationsTable)....

  });
});

consola.log('✅ WebSocket Server listening on ws://localhost:3002');
// wsServer.ts
const WebSocketServer = WebSocket.Server || WSWebSocketServer;
  const wss = new WebSocketServer({
    port: 3002,
  });

const handler = applyWSSHandler({ wss, router: appRouter, createContext: () => ({}) as Context });

wss.on('connection', (ws) => {
  consola.log(`➕➕ Connection (${wss.clients.size})`);
  ws.once('close', () => {
    consola.log(`➖➖ Connection (${wss.clients.size})`);
    const storage = useStorage('db')
    // HERE, SOMEHOW GET UNIQUE SOCKET ID
    const socketId = ...
    const linkedUserId = storage.get(socketId)

    // If present linked user ID, mark user offline
    if(linkedUserId) db.update(userOrganizationsTable)....

  });
});

consola.log('✅ WebSocket Server listening on ws://localhost:3002');
That's the idea of what I'm trying to do... I managed to get this working I strongly inspired from the ideas presented in this article : https://preciselab.io/trpc/

Looking for more? Join the community!

T
tRPC

tRPC subscription : Access to socket ID from subscription

Join Server
Recommended Posts
Having Issue With Context in App Directory Next.jsI am having an issue with creatin the trpc context with both the session and prisma. I am trying to tRPC querying data via function not workingIn the below code, `fetchSocialMediaData` is logging `themeId` but, not `response`, getting error asNext.js app router + TRPC...how to set it up?> **Note** > You can already use tRPC with app directory, by: > > - using `@trpc/client` directly inHow do I setup App router + TRPC + Lucia Auth? (protected routes)I'm trying to setup tRPC with Lucia in app router but I struggle to make protected routes work. I mNEXT.JS / Serverless AWSConfigured trpc locally. Everything works great. When deploying via serverless on aws - mutations doHow do I set a context dynamically?I don't fully understand middleware in trpc and especially using it for adminProcedures. So my trpcHow to make LoaderAndError component which is type safe?I i have a query like this `const { data, isLoading, isError } = trpc.settings.get.useQuery();` NowTRPC vanilla client load failed when called on mobile browserHi, I have created a vanilla client to use TRPC without hooks in a NextJS project: ``` import { cre`createCaller` and RSC - with next-authI've been upgrading my trpc routers and handlers to support edge+app router with drizzle and next-auuseQuery always fetching when active on pageHi, I was call my procedure like this, using NextJs (page directory) const { isLoading, isError, isS