Slackクローンコーディング[Reactによるリアルタイムチャット] 講座

Slackクローンコーディング[Reactによるリアルタイムチャット]

Slackサービスを模倣しながら、本格的なReactウェブ開発を始めてみましょう！会員登録、ログイン、ルーム作成、そしてリアルタイムチャットまで！

画像ドラッグアップロードするAPIソースコードを羽毛に載せました。

Webソケット構造の違いにより、ChannelとDMのリアルタイム表示メカニズムが少し異なります。

https://github.com/ZeroCho/sleact/blob/master/alecture/components/Chat/index.tsx

チャットコンポーネントでアドレスを認識する部分と

https://github.com/ZeroCho/sleact/blob/master/alecture/pages/Channel/index.tsx

https://github.com/ZeroCho/sleact/blob/master/alecture/pages/DirectMessage/index.tsx

チャンネルページDMページでは、onDrop、onDragOverが主な違いです。

読んでいないメッセージの数を表示することもあります。