Chatterboxは、Next 13とPusherで構築されたリアルタイムメッセージングアプリケーションです。
グループチャットを作成したり、DMを起動したりできます。ユーザーはテキストメッセージを送信したり、複数のビデオや画像をアップロードしたりできます。
UIはリアルタイムで更新されます。チャネルが別のユーザーによって作成されたとき、またはメッセージが送信されたときに、即座に更新が表示されます。
vercelに展開:https://chatterboxes.vercel.app/
このプロジェクトでは、新しいnext.js 13アプリルーター、Reactサーバーコンポーネント、サーバーアクション、サスペンス、React 18のcache()
使用しています
また、新しいユーザーを登録したり、メッセージを作成したりするなどのアクションのために、APIルート(Vercelにサーバーレス関数として展開されています)を使用します。
ユーザーがメッセージを送信したり、チャットを作成したり、オンラインになっている場合はいつでも、他のすべてのユーザーに通知され、UIはリアルタイムで更新されます。
これはプッシャーで行われます。メッセージのようなイベントmessage:new
またはchat:update
を聴きます。ユーザーがアクションを実行すると、サーバー上のイベントをトリガーし、他のユーザーのリスニングが更新を受け取ります。
イベントのリスニングとトリガーに加えて、Pusherのプレゼンスチャネルは、現在すべてのユーザーをオンラインで取得するために使用されます。
ユーザーがログインすると、すべてのアクティブユーザーをプッシャーから取得し、地元のJotaiストアに保存します。ユーザーがログインまたはログオフすると、Pusherが更新を送信し、Jotaiストアをローカルで更新します。
このプロジェクトはTypeScriptで記述されており、 Prisma生成されたタイプとZODスキーマおよびタイプを使用して、コードベース全体でタイプフェティを確保します。 Prismaは自動生成タイプであるため、あらゆるタイプを宣言または維持する必要はほとんどありません。
zod
、API呼び出しまたは変異を実行する前に、すべてのフォームクライアント側を検証するために使用されます。
サーバーでは、すべてのAPIルートにもZOD検証があり、入力が有効であり、進行前にZODスキーマに対応していることを確認します。
ESLINTは、コードの品質を確保し、バグを最小限に抑えるために、厳格なルールで構成されています。
nodemailer
でパスワードフローを忘れました