WebSocketの調査

Transcript

1. websocketについて 土方宏太郎
2. websocketとは？ HTTP：クライアント（ブラウザ）がリクエストを送 り、サーバーがレスポンスを返す WS（WebSocket）：WebSocket は、クライアントとサーバ ー間で双方向通信を可能にするプロトコル。一度接続が確立さ れると、その後はクライアントとサーバーが自由に情報を送受 信できます。 例：チャットアプリ、ゲームやトラッキングシステム、株価やリアルタイムデー タの更新。
3. リクエスト ブラウザ サーバー サーバー ブラウザ websocketリクエスト レスポンス 双方向通信 websocketコネクション HTTP websoket wss://ws-ap3.pusher.com/app/
4. 山田のブラウザ webサーバー 送信 pusherサーバー 実践：Pusherを使って、チャット機能を実装 田中のブラウザ 鈴木のブラウザ webSocket メッセージを 任意のチャンネルにブロードキャスト(送信) http/https webSocket webSocket
5. クライアント webサーバー connection subscription 接続 購読 リッスン 接続リクエスト 購読リクエスト(channel:chat) 接続成功(socket_id) 購読成功 pusherサーバー イベントをブロードキャスト (MessageSent) 実装：イベントを受け取るまでの流れ ① ②
7. Pusherにログイン セットアップ
8. 諸々セッティング。 (環境変数、ルーティング) コード解説①
9. サイト読み込み時にクライアントからpushserサーバー へ接続確立’connection) コード解説②
11. チャット画面 コード解説③ 送信処理&リスナー
13. webサーバからpusherサーバーのチャンネルにイベントをブロード キャスト(送信)する コード解説④
17. 特徴 パブリックチャネル プライベートチャネル アクセス制限 誰でもアクセス可能 認証されたユーザーのみアクセ ス可能 認証が必要か 不要 必要 データの保護 保護されない（全ての購読者に 通知される） 認証されたユーザーのみ通知を 受け取る 使用例 公開チャット、通知システム 個人チャット、ユーザー専用ダ ッシュボード ソケットIDの利用 使用しない 認証プロセスで利用（リクエス トに含められる） パブリックチャンネルだと誰でもチャッ トを受信できてしまう・・・ 🥺
18. クライアント webサーバー connection subscription 購読 リッスン 接続リクエスト 購読リクエスト broadcat/authへPOST 接続成功(socket_id) 購読成功 Jsonレスポンス {auth: key generate} {auth: key generate, channel:chat} 接続 (channnel_name,socket_id) pusherサーバー イベントをブロードキャスト (MessageSent) イベントを受け取るまでの流れ　 -プライベートチャンネル 認証ロジック
19. 発展編
20. 〇〇さんが入力しています・・・と表示する PusherのWisperを使って 山田のブラウザ ブロードキャストより 高速 🥺 pusherサーバー 田中のブラウザ webサーバー メッセージ入力すると {typer: ‘田中一郎’ typingイベント {typer: ‘田中一郎’
21. UI Whisperの実装
22. 認証ロジック追加
23. プライベートチャンネルに送信
26. ご清聴ありがとうございました！
27. メッセージ数：月間200,000メッセージまで。 Pusherの無料プラン 同時接続数：最大100接続まで。