Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Appearance settings
Open more actions menu

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

12 Commits
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

Stars

Watchers

Forks

Releases

Packages

Used by

Contributors

Languages

Morty Proxy This is a proxified and sanitized view of the page, visit original site.