https://github.com/acao/trpc-example-sse-craft
simple example of a realtime chat and simple drag and drop page builder
https://github.com/acao/trpc-example-sse-craft
Last synced: 3 months ago
JSON representation
simple example of a realtime chat and simple drag and drop page builder
- Host: GitHub
- URL: https://github.com/acao/trpc-example-sse-craft
- Owner: acao
- License: apache-2.0
- Created: 2024-07-28T01:05:59.000Z (10 months ago)
- Default Branch: main
- Last Pushed: 2024-07-28T17:20:05.000Z (10 months ago)
- Last Synced: 2025-01-16T21:35:53.154Z (5 months ago)
- Language: TypeScript
- Homepage: https://next-rr75.onrender.com
- Size: 133 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Realtime Chat & Web page builder????
Forked from https://github.com/trpc/examples-next-sse-chat who did most of the work, this just adds support for editing webpages in realtime as well, using craft.js, as an experiment.
It's deployed on render.com
## tRPC + Server-sent Events (SSE)
This example showcases the use of `httpSubscriptionLink` to facilitate `.useSubscription` via [Server-sent Events](https://developer.mozilla.org/en-US/docs/Web/API/Server-sent_events/Using_server-sent_events).
Try demo http://sse.trpc.io/
## 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`](examples/next-sse-chat/src/app/channels/[channelId]/hooks.ts)
- The `EventEmitter` & `whoIsTyping` subscription route can be found in [`/src/server/routers/channel.ts`](examples/next-sse-chat/src/server/routers/channel.ts)
- The more complex `post` subscription route can be found in [`/src/server/routers/post.ts:79`](examples/next-sse-chat/src/server/routers/post.ts)
## Features
- 🧙♂️ E2E type safety with [tRPC](https://trpc.io)
- ⚡ Full-stack React with Next.js
- ⚡ Server-Sent-Events / Subscription support
- ⚡ Database with [Drizzle](https://orm.drizzle.team/)
- 🔐 Authorization using [next-auth](https://next-auth.js.org/)