Theo's Typesafe Cult•12mo ago

Pusher with Vercel or Netlify?

I have a T3 stack application working locally that sends and receives real-time notifications perfectly well on localhost:3000. When deploying to Netlify or Vercel, the pusher messages don't seem to send, or when they do, it takes 10-30 seconds to send/receive the messages. Just some context. I make API calls with trpc and the api sends a pusher trigger like this:

const pusher = new Pusher({
  appId: env.PUSHER_APP_ID,
  key: env.PUSHER_KEY,
  secret: env.PUSHER_SECRET,
  cluster: env.PUSHER_CLUSTER,
  useTLS: true
});

export const pusherRouter = createTRPCRouter({
    connect: publicProcedure
      .input(z.object({ name: z.string(), role: z.number() }))
      .query(({ input }) => {
        pusher.trigger(env.PUSHER_CHANNEL, env.PUSHER_EVENT, {
          event: "connect",
          name: input.name,
          role: input.role,
          role_name: indexToRoleName[input.role],
          role_key: indexToRoleKey[input.role]
        });
      
        return "success";
      }),
...

const pusher = new Pusher({
  appId: env.PUSHER_APP_ID,
  key: env.PUSHER_KEY,
  secret: env.PUSHER_SECRET,
  cluster: env.PUSHER_CLUSTER,
  useTLS: true
});

export const pusherRouter = createTRPCRouter({
    connect: publicProcedure
      .input(z.object({ name: z.string(), role: z.number() }))
      .query(({ input }) => {
        pusher.trigger(env.PUSHER_CHANNEL, env.PUSHER_EVENT, {
          event: "connect",
          name: input.name,
          role: input.role,
          role_name: indexToRoleName[input.role],
          role_key: indexToRoleKey[input.role]
        });
      
        return "success";
      }),
...

Any idea how to address this or debug this?

1 Reply

jeff.kershner•12mo ago

OK.. I figured it out and it was silly. Apparently Vercel is closing the servless connection before the pusher is fully sent. I needed to await the pusher like this:

export const pusherRouter = createTRPCRouter({
    connect: publicProcedure
      .input(z.object({ name: z.string(), role: z.number() }))
      .query(async({ input }) => {
        await pusher.trigger(env.PUSHER_CHANNEL, env.PUSHER_EVENT, {
          event: "connect",
          name: input.name,
          role: input.role,
          role_name: indexToRoleName[input.role],
          role_key: indexToRoleKey[input.role]
        });
      
        return "success";
      }),

export const pusherRouter = createTRPCRouter({
    connect: publicProcedure
      .input(z.object({ name: z.string(), role: z.number() }))
      .query(async({ input }) => {
        await pusher.trigger(env.PUSHER_CHANNEL, env.PUSHER_EVENT, {
          event: "connect",
          name: input.name,
          role: input.role,
          role_name: indexToRoleName[input.role],
          role_key: indexToRoleKey[input.role]
        });
      
        return "success";
      }),

Gaming

Programming

Pusher with Vercel or Netlify?