tRPC WebSocket 实时聊天示例｜AI 生成提示词与代码
代码预览
エディタを読み込み中…
P
提示词
Create a minimal real-time chat app using tRPC with WebSocket subscriptions. Use Next.js App Router, tRPC v10, zod for validation, and a simple in-memory message store. Include a message list and input form. The UI should be clean (Tailwind CSS). Only one chat room is needed.
このデモは、tRPCとWebSocketサブスクリプションを組み合わせてリアルタイムチャットアプリを構築する方法を示しています。フロントエンドはNext.js App RouterとReact、バックエンド（非表示）はsendMessageミューテーションとonMessageサブスクリプションを公開しています。メッセージはZodで検証され、メモリに保存されます。
ポイント：splitLinkによるHTTP/WSの振り分け、useSubscriptionフック、シンプルなmutations。tRPCのリアルタイム機能を学ぶのに最適です。
提示词解读
此演示展示了如何结合 tRPC 与 WebSocket 订阅来构建实时聊天应用。前端使用 Next.js App Router 和 React，后端（隐藏）公开了 sendMessage 变更（mutation）和 onMessage 订阅。消息通过 Zod 进行验证，并存储在内存中。
要点：通过 splitLink 实现 HTTP/WS 分流、useSubscription 钩子、简单的 mutations。非常适合学习 tRPC 的实时功能。
这个提示对您有帮助吗？
评论
评论将在审核后显示
この記事が役に立ったら投げ銭で応援
Apple Pay / Google Pay / カード (Visa/Mastercard/JCB/Amex) / Link / Alipay / WeChat Pay 対応 · Stripeで安全に決済
開発者が選ぶ最強ツール集
運営者が毎日使っているツール・ガジェット 6選