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
WebSocketの調査
Search
株式会社イノベーション(エンジニア)
March 03, 2025
1
15
WebSocketの調査
株式会社イノベーション(エンジニア)
March 03, 2025
Tweet
Share
More Decks by 株式会社イノベーション(エンジニア)
See All by 株式会社イノベーション(エンジニア)
Windsurf使ってみて
innovationjp
0
4
Goの日時書式の話
innovationjp
0
160
スプリントで回すデータ基盤運用
innovationjp
0
8
Google Professional Data Engineer をとったよ
innovationjp
0
12
社内工数入力を促すための挑戦
innovationjp
1
250
Featured
See All Featured
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
950
The Art of Programming - Codeland 2020
erikaheidi
54
13k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.9k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
5
290
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
Become a Pro
speakerdeck
PRO
29
5.4k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Fireside Chat
paigeccino
37
3.5k
KATA
mclloyd
30
14k
BBQ
matthewcrist
89
9.7k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.9k
Transcript
websocketについて 土方宏太郎
websocketとは? HTTP:クライアント(ブラウザ)がリクエストを送 り、サーバーがレスポンスを返す WS(WebSocket):WebSocket は、クライアントとサーバ ー間で双方向通信を可能にするプロトコル。一度接続が確立さ れると、その後はクライアントとサーバーが自由に情報を送受 信できます。 例:チャットアプリ、ゲームやトラッキングシステム、株価やリアルタイムデー タの更新。
リクエスト ブラウザ サーバー サーバー ブラウザ websocketリクエスト レスポンス 双方向通信 websocketコネクション HTTP
websoket wss://ws-ap3.pusher.com/app/
山田のブラウザ webサーバー 送信 pusherサーバー 実践:Pusherを使って、チャット機能を実装 田中のブラウザ 鈴木のブラウザ webSocket メッセージを 任意のチャンネルにブロードキャスト(送信)
http/https webSocket webSocket
クライアント webサーバー connection subscription 接続 購読 リッスン 接続リクエスト 購読リクエスト(channel:chat) 接続成功(socket_id)
購読成功 pusherサーバー イベントをブロードキャスト (MessageSent) 実装:イベントを受け取るまでの流れ ① ②
None
Pusherにログイン セットアップ
諸々セッティング。 (環境変数、ルーティング) コード解説①
サイト読み込み時にクライアントからpushserサーバー へ接続確立’connection) コード解説②
None
チャット画面 コード解説③ 送信処理&リスナー
None
webサーバからpusherサーバーのチャンネルにイベントをブロード キャスト(送信)する コード解説④
None
None
None
特徴 パブリックチャネル プライベートチャネル アクセス制限 誰でもアクセス可能 認証されたユーザーのみアクセ ス可能 認証が必要か 不要 必要
データの保護 保護されない(全ての購読者に 通知される) 認証されたユーザーのみ通知を 受け取る 使用例 公開チャット、通知システム 個人チャット、ユーザー専用ダ ッシュボード ソケットIDの利用 使用しない 認証プロセスで利用(リクエス トに含められる) パブリックチャンネルだと誰でもチャッ トを受信できてしまう・・・ 🥺
クライアント webサーバー connection subscription 購読 リッスン 接続リクエスト 購読リクエスト broadcat/authへPOST 接続成功(socket_id)
購読成功 Jsonレスポンス {auth: key generate} {auth: key generate, channel:chat} 接続 (channnel_name,socket_id) pusherサーバー イベントをブロードキャスト (MessageSent) イベントを受け取るまでの流れ -プライベートチャンネル 認証ロジック
発展編
〇〇さんが入力しています・・・と表示する PusherのWisperを使って 山田のブラウザ ブロードキャストより 高速 🥺 pusherサーバー 田中のブラウザ webサーバー メッセージ入力すると
{typer: ‘田中一郎’ typingイベント {typer: ‘田中一郎’
UI Whisperの実装
認証ロジック追加
プライベートチャンネルに送信
None
None
ご清聴ありがとうございました!
メッセージ数:月間200,000メッセージまで。 Pusherの無料プラン 同時接続数:最大100接続まで。