trpc / examples-next-sse-chat

⚡️ tRPC with Server-Sent Events

tRPC + Server-sent Events (SSE)

This example showcases the use of httpSubscriptionLink to facilitate .useSubscription via Server-sent Events.

Try demo http://sse.trpc.io/

Features

• 🧙‍♂️ E2E type safety with tRPC
• ⚡ Full-stack React with Next.js
• ⚡ Server-Sent-Events / Subscription support
• ⚡ Database with Drizzle
• 🔐 Authorization using next-auth

Code

This project includes 2 examples of the subscription pattern:

1. Simple example of whoIsTyping
2. A slightly more involved example of livePosts

• Hooks for both cases (using trpc.{x}.useSubscription) can be found in /src/app/channels/[channelId]/hooks.ts
• The EventEmitter & whoIsTyping subscription route can be found in /src/server/routers/channel.ts
• The more complex post subscription route can be found in /src/server/routers/post.ts

Setup

git clone [e-mail]:trpc/examples-next-sse-chat.git
pnpm i
cp .env.example .env
pnpm dev