WebSocket Protocol とPlack Middleware 実装       id:nobuoka      (@nobuoka)
WebSocket って何?
●   双方向の通信プロトコル    ●   HTTP と同じく Application layer に属する    ●   下の layer は TCP●   Web アプリケーション用●   HTTP を基にした既存の双方向    通信プロ...
●   プロトコル : RFC 6455 (IETF)    ●   2011/12●   クライアント側 API : 標準化作業中    (WHATWG, W3C)
既存の技術と比べて何が良いの?      ↓ オーバーヘッドが小さい!!
Client                   Server              HTTP request              HTTP response                              レスポンスを  ...
Client   Handshake                           Server  tWebSocket : 最初に接続を確立した後はヘッダの小さいフレームをやりとり
WebSocket プロトコル概要
大きく分けて 2 つのフェーズ●    Handshake    ● 接続の確立    ● HTTP プロトコルの GET メソッド    ● プロトコルを UPGRADE する● Frame のやりとり ● Control frame ● D...
Opening HandshakeGET /chat HTTP/1.1Host: server.example.comUpgrade: websocketConnection: Upgrade... (略) ...HTTP/1.1 101 Sw...
Data framing● 各種データは frame 単位で送受信● Data Frames – Binary, Text● Control Frames – Close, Ping, Pong● ヘッダは最小 2 バイト  (クライアント側か...
詳しくは RFC で!! → RFC 6455
困ったところ                    ↓   どの web サーバーでも    使えるわけではない          ブラウザはわりと対応してるFirefox, Chrome, Opera 12.50, IE 10, Safari 6
WebSocket のサーバー側実装  Plack Middleware として書いた            (不完全) Plack::Middleware::WebSockethttps://github.com/nobuoka/Plack-...
デモ ページ上をクリックするとクリック位置が WebSocket で   やりとりされるというようなデモを行いました。  デモに使用したプログラムは URL にありますので      興味のある方はお試しください。https://github....
Upcoming SlideShare
Loading in...5
×

WebSocket Protocol と Plack::Middleware::WebSocket

1,591

Published on

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

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,591
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
3
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

WebSocket Protocol と Plack::Middleware::WebSocket

  1. 1. WebSocket Protocol とPlack Middleware 実装 id:nobuoka (@nobuoka)
  2. 2. WebSocket って何?
  3. 3. ● 双方向の通信プロトコル ● HTTP と同じく Application layer に属する ● 下の layer は TCP● Web アプリケーション用● HTTP を基にした既存の双方向 通信プロトコルの置き換えるため に設計された ● Ajax や Long polling を使わないように ● Comet などを置き換え
  4. 4. ● プロトコル : RFC 6455 (IETF) ● 2011/12● クライアント側 API : 標準化作業中 (WHATWG, W3C)
  5. 5. 既存の技術と比べて何が良いの? ↓ オーバーヘッドが小さい!!
  6. 6. Client Server HTTP request HTTP response レスポンスを 遅らせる tComet : HTTP 通信を何度も行う (HTTP ヘッダはでかい)
  7. 7. Client Handshake Server tWebSocket : 最初に接続を確立した後はヘッダの小さいフレームをやりとり
  8. 8. WebSocket プロトコル概要
  9. 9. 大きく分けて 2 つのフェーズ● Handshake ● 接続の確立 ● HTTP プロトコルの GET メソッド ● プロトコルを UPGRADE する● Frame のやりとり ● Control frame ● Data frame● 最後に close
  10. 10. Opening HandshakeGET /chat HTTP/1.1Host: server.example.comUpgrade: websocketConnection: Upgrade... (略) ...HTTP/1.1 101 Switching ProtocolsUpgrade: websocketConnection: Upgrade... (略) ... ● HTTP request と response で接続確立 (上記例) ● HTTP 接続に使用した TCP ソケットをそのまま WebSocket のために使用
  11. 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. 12. 詳しくは RFC で!! → RFC 6455
  13. 13. 困ったところ ↓ どの web サーバーでも 使えるわけではない ブラウザはわりと対応してるFirefox, Chrome, Opera 12.50, IE 10, Safari 6
  14. 14. WebSocket のサーバー側実装 Plack Middleware として書いた (不完全) Plack::Middleware::WebSockethttps://github.com/nobuoka/Plack-Middleware-WebSocket Twiggy で動作することを確認
  15. 15. デモ ページ上をクリックするとクリック位置が WebSocket で やりとりされるというようなデモを行いました。 デモに使用したプログラムは URL にありますので 興味のある方はお試しください。https://github.com/nobuoka/presentation/tree/20120819-Kyoto.pm-2/master
  1. ¿Le ha llamado la atención una diapositiva en particular?

    Recortar diapositivas es una manera útil de recopilar información importante para consultarla más tarde.

×