Skip to content

Send tRPC `subscription`s over Server-sent-events

License

Notifications You must be signed in to change notification settings

OutdatedVersion/trpc-sse-link

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

12 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

About

Send tRPC `subscription`s over Server-sent-events

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published