ReactでWebSocket通信してみた

まずは簡単な挨拶 下島　陸 静岡県のweb系企業（2021年10月〜3月） 株式会社HRBrain (2022年4月〜現在) フロントエンド（React,TS） バックエンド(Go)

犬が大好き

アジェンダ 1. webSocketを触ろうと思った理由 2. webSocketとは？ 3. 実際に作ってみた！ 4. 使用したライブラリ 5. Reactでどのように実装したか 6. 学び・得たもの

webSocketに興味を持ったきっかけ

webSocketに興味を持ったきっかけ

webSocketに興味を持ったきっかけ

webSocketに興味を持ったきっかけ

webSocketとは？ ● サーバーと双方向通信が可能なプロトコル ● URIが ws://〜 またはwss://〜 ○ 例：ws://localhost:3000 ● HTTPと比べて一回の通信量が比較的少ない WebSocket / WebRTCの技術紹介 https://www.slideshare.net/mawarimichi/websocketwebrtc

実際に作ってみた！

使用したライブラリ Socket.io 選んだ理由 ● Microsoftなどの様々な大企業で使用されている ● ドキュメントがわかりやすかった ● starが多かった ● TSサポート

socketインスタンスが作られる webSocketが確立するまでロングポーリングしてくれる Reactでどのように実装したか 準備

State管理 Reactでどのように実装したか 描画部分

マウント時に`socket.on`というメソッドを実行することでハンドラーを登録 上の例ではサーバーから `new message` というEventNameを受け取り、 渡したコールバック関数が実行される Reactでどのように実装したか メッセージを受信

メッセージを送信 サーバーに`new message` というEventNameとともにメッセージを送信している Reactでどのように実装したか

学び・得たこと ● socket.ioのおかげで簡単に実装できた　神！ ● webSocketについて知ることができた ○ 自分の中でできることが広がった

フロントエンドエンジニアを積極採用募集中です

ありがとうございました！！ @Riku_0202_