Kyoto.pm Tech Talks 02 での LT の発表資料です。 WebSocket プロトコルのことを軽く話しました。

1. WebSocket Protocol と
Plack Middleware 実装
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 /chat HTTP/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