tRPC x Server-sent-events (SSE)

Supports sending tRPC's subscriptions over SSE.

Note: This is a proof-of-concept and not intended to be used directly.

Components

• httpSseLink: Client-side tRPC link bridging SSE HTTP connections to the tRPC API
• Server hack shim: Server-side logic converting subscription procedures to events in a SSE HTTP connection
• tRPC link split: Client-side configuration sending subscription procedures through httpSseLink

These then underly usage:

• Server subscription producer

  export const numbers = t.procedure
    .input(
      zod.object({
        count: zod.number(),
      })
    )
    .subscription(async ({ input }) => {
      return observable<{ id: string; idk: number }>((sub) => {
        let i = 0;
        setInterval(() => {
          if (i++ === input.count) {
            sub.complete();
          } else {
            sub.next({
              id: randomUUID(),
              idk: Math.round(Math.random() * 5000),
            });
          }
        }, 1000);
      });
    });

• Client subscription consumer

  const [messages, setMessages] = useState<Array<{ id: string; idk: number }>>(
    []
  );
  
  trpcClient.numbers.useSubscription(
    {
      max: 25,
    },
    {
      enabled: true,
      onData(data) {
        setMessages((prev) => [...prev, data]);
      },
    }
  );
  
  return (
    <div>
      {messages.map((m) => (
        <span key={m.id}>{m.idk}</span>
      ))}
    </div>
  );

Issues

• Subscription continues if client closes the connection early
  • I thought this was covered by the server-side request/response event handlers but that seems to be a misunderstanding. See #2.

For the visual people

recording.mp4