TCGのマッチングサイトを作りたいよ〜！#7 チャットとか

note書くのめんどくさいしその時間あったら開発するか！という本末転倒な思考になっちゃいました。やっと完成が見えてきました。

チャット

UIのデザインはどこにでもあるLINEっぽいやつです。フレンド間と募集グルプ間のチャットと二種類。ちなみにグループは終了した後も参加はできないですが削除されずにチャットは続けられるようにしています。

フロント側とfirestoreルールで

無限スクロール実装＋更新をonSnapshotでuseStateのチャットデータに追加してます。

db.collection('groups')
     .doc(groupId)
     .collection('chat')
     .orderBy('createdAt', 'desc')
     .endBefore(new Date())
     .onSnapshot~~~

snapshotで全部取得してると更新のたびに全部読み込まれるらしいのでendBefore(new Date())でページ読み込み後に投稿されたデータだけ取得しています。

読みこみ回数を考慮しないといけないのでループしたり無駄に多くしちゃうのすごい怖いんですよね。リリース後にとんでもない料金請求されたくないんで慎重に。

募集のキャンセル

開始した募集をキャンセルしたいとき、削除するとよくわからなくなるのでキャンセル機能を追加しておきました。

参加メンバーにキャンセル通知が届きます

フレンド一覧と参加募集一覧

こんな感じ。

次回

あとはfiresotreルールを整えて細かい見た目の調整の後最終の動作確認して何もなければ完成の報告は近いうちにできると思います。

とりあえずこれからは進捗の報告はもっとこまめにしていつ頃完成しそうかはもっと濁すようにします。