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) 実装：イベントを受け取るまでの流れ ① ② 

No content

Pusherにログイン セットアップ 

諸々セッティング。 (環境変数、ルーティング) コード解説① 

サイト読み込み時にクライアントからpushserサーバー へ接続確立’connection) コード解説② 

No content

チャット画面 コード解説③ 送信処理&リスナー 

No content

webサーバからpusherサーバーのチャンネルにイベントをブロード キャスト(送信)する コード解説④ 

No content

No content

No content

特徴 パブリックチャネル プライベートチャネル アクセス制限 誰でもアクセス可能 認証されたユーザーのみアクセ ス可能 認証が必要か 不要 必要 データの保護 保護されない（全ての購読者に 通知される） 認証されたユーザーのみ通知を 受け取る 使用例 公開チャット、通知システム 個人チャット、ユーザー専用ダ ッシュボード ソケット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の実装 

認証ロジック追加 

プライベートチャンネルに送信 

No content

No content

ご清聴ありがとうございました！ 

メッセージ数：月間200,000メッセージまで。 Pusherの無料プラン 同時接続数：最大100接続まで。