Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
ReactでWebsocket通信してみた.pdf
Search
riku0202
October 31, 2022
Programming
0
110
ReactでWebsocket通信してみた.pdf
riku0202
October 31, 2022
Tweet
Share
More Decks by riku0202
See All by riku0202
jestのspyOnでmockする際に詰まった話
riku0202
0
1.8k
Other Decks in Programming
See All in Programming
ProxyによるWindow間RPC機構の構築
syumai
3
1.2k
Zendeskのチケットを Amazon Bedrockで 解析した
ryokosuge
3
320
そのAPI、誰のため? Androidライブラリ設計における利用者目線の実践テクニック
mkeeda
2
2.8k
今だからこそ入門する Server-Sent Events (SSE)
nearme_tech
PRO
3
260
AI Coding Agentのセキュリティリスク:PRの自己承認とメルカリの対策
s3h
0
240
HTMLの品質ってなんだっけ? “HTMLクライテリア”の設計と実践
unachang113
4
2.9k
ユーザーも開発者も悩ませない TV アプリ開発 ~Compose の内部実装から学ぶフォーカス制御~
taked137
0
190
基礎から学ぶ大画面対応(Learning Large-Screen Support from the Ground Up)
tomoya0x00
0
4.3k
Ruby Parser progress report 2025
yui_knk
1
460
アセットのコンパイルについて
ojun9
0
130
print("Hello, World")
eddie
2
530
The Past, Present, and Future of Enterprise Java with ASF in the Middle
ivargrimstad
0
180
Featured
See All Featured
The Invisible Side of Design
smashingmag
301
51k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6k
Building Adaptive Systems
keathley
43
2.7k
Into the Great Unknown - MozCon
thekraken
40
2k
Optimizing for Happiness
mojombo
379
70k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
9
810
Embracing the Ebb and Flow
colly
87
4.8k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
14k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
36
2.5k
Typedesign – Prime Four
hannesfritz
42
2.8k
Transcript
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_