ReactでWebsocket通信してみた.pdf

Transcript

1. ReactでWebSocket通信してみた
2. まずは簡単な挨拶 下島　陸 静岡県のweb系企業（2021年10月〜3月） 株式会社HRBrain (2022年4月〜現在) フロントエンド（React,TS） バックエンド(Go)
3. 犬が大好き
4. アジェンダ 1. webSocketを触ろうと思った理由 2. webSocketとは？ 3. 実際に作ってみた！ 4. 使用したライブラリ 5. Reactでどのように実装したか 6. 学び・得たもの
5. webSocketに興味を持ったきっかけ
6. webSocketに興味を持ったきっかけ
7. webSocketに興味を持ったきっかけ
8. webSocketに興味を持ったきっかけ
9. webSocketとは？ • サーバーと双方向通信が可能なプロトコル • URIが ws://〜 またはwss://〜 ◦ 例：ws://localhost:3000 • HTTPと比べて一回の通信量が比較的少ない WebSocket / WebRTCの技術紹介 https://www.slideshare.net/mawarimichi/websocketwebrtc
10. 実際に作ってみた！
11. 使用したライブラリ Socket.io 選んだ理由 • Microsoftなどの様々な大企業で使用されている • ドキュメントがわかりやすかった • starが多かった • TSサポート
12. socketインスタンスが作られる webSocketが確立するまでロングポーリングしてくれる Reactでどのように実装したか 準備
13. State管理 Reactでどのように実装したか 描画部分
14. マウント時に`socket.on`というメソッドを実行することでハンドラーを登録 上の例ではサーバーから `new message` というEventNameを受け取り、 渡したコールバック関数が実行される Reactでどのように実装したか メッセージを受信
15. メッセージを送信 サーバーに`new message` というEventNameとともにメッセージを送信している Reactでどのように実装したか
16. 学び・得たこと • socket.ioのおかげで簡単に実装できた　神！ • webSocketについて知ることができた ◦ 自分の中でできることが広がった
17. フロントエンドエンジニアを積極採用募集中です
18. ありがとうございました！！ @Riku_0202_