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
GitHubとGitLabとAWS CodePipelineでCI/CDを組み比べてみた
satoshi256kbyte
4
250
AI Coding Agentのセキュリティリスク:PRの自己承認とメルカリの対策
s3h
0
240
print("Hello, World")
eddie
2
530
今だからこそ入門する Server-Sent Events (SSE)
nearme_tech
PRO
3
250
Laravel Boost 超入門
fire_arlo
3
220
CloudflareのChat Agent Starter Kitで簡単!AIチャットボット構築
syumai
2
510
ProxyによるWindow間RPC機構の構築
syumai
3
1.2k
機能追加とリーダー業務の類似性
rinchoku
2
1.3k
基礎から学ぶ大画面対応(Learning Large-Screen Support from the Ground Up)
tomoya0x00
0
4.3k
Compose Multiplatform × AI で作る、次世代アプリ開発支援ツールの設計と実装
thagikura
0
170
Processing Gem ベースの、2D レトロゲームエンジンの開発
tokujiros
2
130
Reading Rails 1.0 Source Code
okuramasafumi
0
250
Featured
See All Featured
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3k
The Cost Of JavaScript in 2023
addyosmani
53
8.9k
GraphQLの誤解/rethinking-graphql
sonatard
72
11k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
30
9.7k
The Pragmatic Product Professional
lauravandoore
36
6.9k
Making the Leap to Tech Lead
cromwellryan
135
9.5k
Facilitating Awesome Meetings
lara
55
6.5k
A designer walks into a library…
pauljervisheath
207
24k
A Modern Web Designer's Workflow
chriscoyier
696
190k
The Straight Up "How To Draw Better" Workshop
denniskardys
236
140k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
A Tale of Four Properties
chriscoyier
160
23k
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_