강의

멘토링

로드맵

BEST
Programming

/

Front-end

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

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

難易度 中級以上

受講期間 無制限

  • zerocho
Clone Coding
Clone Coding
React
React
TypeScript
TypeScript
Webpack
Webpack
Babel
Babel
Clone Coding
Clone Coding
React
React
TypeScript
TypeScript
Webpack
Webpack
Babel
Babel

画像ドラッグアップロード映像制作完了

画像ドラッグ アップロードする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が主な違いです。

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

コメント