概要
このプロジェクトでは、Gather や Ovice などのバーチャルオフィスアプリのような、リアルタイムチャットアプリを構築します。
現在参加しているメンバーのみが、リアルタイムにチャットを送信・閲覧できるように実装します！
学習目標
Socket.IO を使用したリアルタイム通信の実装について、学習します。 React コンポーネントとサーバー間の双方向通信、イベント駆動型アーキテクチャの設計について確認してください。
推奨技術
このプロジェクトの難易度と趣旨を踏まえて、以下の使用をお勧めします。
- Next.js を用いたフロントエンド＆バックエンド統合環境
- Socket.IO を使用したリアルタイム通信の実装
- TypeScript による型チェック
- Tailwind CSS を用いたスタイリング
- shadcn/ui を用いたコンポーネントの使用
🎯 お題
- 「ユーザーストーリー」を全て満たすアプリを構築してください。
- 必要に応じて、スクリーンショットやデモサイトの URL を参照してください。
- スタイルは、あなた自身で独自にカスタマイズすることが可能です。
必須機能
- ユーザー登録：
- チャットに参加するユーザー名を入力し、登録する。
- メッセージ送信：
- テキストメッセージを入力し、リアルタイムで全参加者に送信する。
- メッセージ表示：
- 送信されたメッセージを時系列順に表示し、送信者の名前を表示する。
- 接続状態管理：
- ユーザーの接続/切断をリアルタイムで検知し、表示する。
ユーザーストーリー
- ユーザーがサイトにアクセスすると、ユーザー名を入力できるフォームが表示されている。
- ユーザー名を入力して「参加する」ボタンをクリックすると、チャットルームに入室できる。
- チャットルームでは、メッセージ入力欄とメッセージ履歴を表示する。
- メッセージを入力して送信すると、自分を含む全参加者のメッセージ履歴に即座に表示される。
- 各メッセージには、送信者の名前と送信時刻が表示される。
- 新しいユーザーが参加したとき、チャットルーム内に通知が表示される。
- ユーザーが退出したとき、チャットルーム内に通知が表示される。
- タブ切り替えで、チャットと現在接続中のユーザー一覧が表示できる。
- メッセージ入力中は、他のユーザーに「○○ さんが入力中...」と表示される。
- チャットページ左側には、ビジュアルマップを表示する。
- ビジュアルマップには、現在接続中のユーザーが表示される。
- ビジュアルマップの、自分のユーザーアイコンはドラッグ&ドロップで移動できる。