Chat with trpc / nextjs / vercel

Hello,

I would like to make a messaging system with trpc and nextjs. I host everything on Vercel so I need it to work in serverless.

https://trpc.io/docs/subscriptions

Is it possible to use this with upstash for example?

Thanks

Subscriptions / WebSockets | tRPC

Using Subscriptions

Neto•5/18/23, 6:56 PM

https://www.youtube.com/watch?v=dXRRY37MPuk

YouTubeTomDoesTech

Build a Live Chat Application with the T3 Stack - TypeScript, Tailw...

Repository: https://github.com/TomDoesTech/t3-chat

In this view, we build a live chat application with the T3 stack, tRPC, Tailwind & TypeScript.

Follow me here:
Discord: https://discord.gg/4ae2Esm6P7
Twitter: https://twitter.com/tomdoes_tech
Facebook: https://www.facebook.com/tomdoestech
Instagram: https://www.instagram.com/tomdoestech
Ti...

Neto•5/18/23, 6:56 PM

with vercel you won't be able to create a chat-like feature

nexxel•5/18/23, 6:57 PM

you can use a websockets provider like pusher

MeyerOP•5/18/23, 6:57 PM

This is what I understood with all my research ( even using services like Pusher, Ably etc it is still not adapted with TRPC )

Nnexxel you can use a websockets provider like pusher

MeyerOP•5/18/23, 6:57 PM

Ah, but Pusher and TRPC don't work, do they?

Neto•5/18/23, 6:58 PM

you can send messages to trpc, and from there you send to pusher

Neto•5/18/23, 6:58 PM

and listen to the messages on the client (react)

MeyerOP•5/18/23, 6:58 PM

thanks

NNeto you can send messages to trpc, and from there you send to pusher

ManuRodgers•5/19/23, 12:52 AM

Hey mate, can you give me some code example in terms of how to use Pusher or Ably with trpc?

Neto•5/19/23, 12:54 AM

const appRouter = router({
  someMutation: publicProcedure
    .mutation(async ({ ctx }) => {
      ctx.pusher.trigger('some-channel', 'some-event', {
        message: "hello world",
      })
    }),
});

const appRouter = router({
  someMutation: publicProcedure
    .mutation(async ({ ctx }) => {
      ctx.pusher.trigger('some-channel', 'some-event', {
        message: "hello world",
      })
    }),
});

Neto•5/19/23, 12:55 AM

pass the pusher instance in a higher middleware

MeyerOP•5/19/23, 8:46 AM

and in the client use pusher js to subscribe

MadaShindeInai•5/19/23, 9:47 AM

questionsT3 for a chat app

A bit more info about that

const appRouter = router({ someMutation: publicProcedure .mutation(async ({ ctx }) => { ctx.pusher.trigger('some-channel', 'some-event', { message: "hello world", }) }), });

Chat with trpc / nextjs / vercel

Similar Threads

Similar Threads

Similar Threads