WebSocket Protocol と Plack::Middleware::WebSocket

WebSocket Protocol と Plack::Middleware::WebSocket

• 1.
  WebSocket Protocol と PlackMiddleware 実装 id:nobuoka (@nobuoka)
• 2.
  WebSocket って何?
• 3.
  ● 双方向の通信プロトコル ● HTTP と同じく Application layer に属する ● 下の layer は TCP ● Web アプリケーション用 ● HTTP を基にした既存の双方向 通信プロトコルの置き換えるため に設計された ● Ajax や Long polling を使わないように ● Comet などを置き換え
• 4.
  ● プロトコル : RFC 6455 (IETF) ● 2011/12 ● クライアント側 API : 標準化作業中 (WHATWG, W3C)
• 5.
  既存の技術と比べて何が良いの? ↓ オーバーヘッドが小さい!!
• 6.
  Client Server HTTP request HTTP response レスポンスを 遅らせる t Comet : HTTP 通信を何度も行う (HTTP ヘッダはでかい)
• 7.
  Client Handshake Server t WebSocket : 最初に接続を確立した 後はヘッダの小さいフレームをやりとり
• 8.
  WebSocket プロトコル概要
• 9.
  大きく分けて 2 つのフェーズ ● Handshake ● 接続の確立 ● HTTP プロトコルの GET メソッド ● プロトコルを UPGRADE する ● Frame のやりとり ● Control frame ● Data frame ● 最後に close
• 10.
  Opening Handshake GET /chatHTTP/1.1 Host: server.example.com Upgrade: websocket Connection: Upgrade ... (略) ... HTTP/1.1 101 Switching Protocols Upgrade: websocket Connection: Upgrade ... (略) ... ● HTTP request と response で接続確立 (上記例) ● HTTP 接続に使用した TCP ソケットをそのまま WebSocket のために使用
• 11.
  Data framing ● 各種データはframe 単位で送受信 ● Data Frames – Binary, Text ● Control Frames – Close, Ping, Pong ● ヘッダは最小 2 バイト (クライアント側からは 6 バイト) ● A single-frame unmasked text message – 81 05 48 65 6C 6C 6F (contains “Hello”)
• 12.
  詳しくは RFC で!! → RFC 6455
• 13.
  困ったところ ↓ どの web サーバーでも 使えるわけではない ブラウザはわりと対応してる Firefox, Chrome, Opera 12.50, IE 10, Safari 6
• 14.
  WebSocket のサーバー側実装 Plack Middleware として書いた (不完全) Plack::Middleware::WebSocket https://github.com/nobuoka/Plack-Middleware-WebSocket Twiggy で動作することを確認
• 15.
  デモ ページ上をクリックするとクリック位置が WebSocketで やりとりされるというようなデモを行いました。 デモに使用したプログラムは URL にありますので 興味のある方はお試しください。 https://github.com/nobuoka/presentation/tree/20120819-Kyoto.pm-2/master