ReactとSocket.ioでリアルタイムチャットアプリを構築しよう
ReactとSocket.ioでリアルタイムチャットアプリを構築する講座です。 ルーム番号を共有している人同士だけがソケット通信が可能になり、応用すればLINEやZoomのようなアプリが作れるようになります。講座内ではCORSエラー対処についても言及しています。
クライアントとサーバーの用意をはじめよう
Expressフレームワークでローカルサーバーを構築しよう
Socket.ioでソケット通信の準備をしよう
Reactでクライアント側を実装しよう
お名前とルーム番号を入力するフォームを準備しよう
クライアントとサーバーでソケット通信を始めよう
お名前とルーム番号を取得してみよう
共通の部屋に入るソケット通信を構築してみよう
ライブチャット用のコンポーネントを作成しよう
サーバー側にチャット内容を送信しよう
無料プレビューチャット内容をルーム共有ユーザーに送信しよう
ライブチャットの表示・非表示の
チャット画面にメッセージを表示させよう
自分のチャット画面にも送信したメッセージを表示させよう
自分と相手の送信したメッセージ表示位置を修正しよう
自動でメッセージをスクロールさせよう