WebSocketプロトコル

8,050 views

Published on

簡単なウェブソケットプロトコルの紹介

Published in: Technology
0 Comments
18 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
8,050
On SlideShare
0
From Embeds
0
Number of Embeds
434
Actions
Shares
0
Downloads
34
Comments
0
Likes
18
Embeds 0
No embeds

No notes for slide

WebSocketプロトコル

  1. 1. ウェブソケットの仕組み . 1 概要 . 2 プロトコルの仕様 接続の流れ データ通信 メッセージの分割 フレームの種類 . 3 問題点 . 4 まとめ Daniel Perez ウェブソケットの仕組み 2013年12月12日 1 / 16
  2. 2. 概要 中学生が見たウェブソケット ウェブソケットちょー簡単じゃんw § ¦ § ¤ var ws = new WebSocket ( "ws://localhost:8080/echo" ) ; ws . onmessage = f u n c t i o n ( e ) { console . log ( e . data ) ; }; ¥ ¤ var WebSocketServer = r e q u i r e ( 'ws' ) . Server , wss = new WebSocketServer ( { port : 8080}) ; wss . on ( 'connection' , f u n c t i o n ( ws ) { ws . on ( 'message' , f u n c t i o n ( message ) { console . log ( 'received: %s' , message ) ; }) ; ws . send ( 'something' ) ; }) ; ¦ ¥ Daniel Perez ウェブソケットの仕組み 2013年12月12日 2 / 16
  3. 3. 概要 中学生が見たウェブソケット ウェブソケットちょー簡単じゃんw § ¦ § ¤ var ws = new WebSocket ( "ws://localhost:8080/echo" ) ; ws . onmessage = f u n c t i o n ( e ) { console . log ( e . data ) ; }; ¥ ¤ var WebSocketServer = r e q u i r e ( 'ws' ) . Server , wss = new WebSocketServer ( { port : 8080}) ; wss . on ( 'connection' , f u n c t i o n ( ws ) { ws . on ( 'message' , f u n c t i o n ( message ) { console . log ( 'received: %s' , message ) ; }) ; ws . send ( 'something' ) ; }) ; ¦ ¥ できた!!(^o^) Daniel Perez ウェブソケットの仕組み 2013年12月12日 2 / 16
  4. 4. 概要 kwsk The WebSocket Protocol RFC6455 Daniel Perez ウェブソケットの仕組み 2013年12月12日 3 / 16
  5. 5. 概要 背景 . 問題点 . HTTPはリクエスト・レスポンスベース 更新などをリアルタイムで行いたい . Daniel Perez ウェブソケットの仕組み 2013年12月12日 4 / 16
  6. 6. 概要 背景 . 問題点 . HTTPはリクエスト・レスポンスベース 更新などをリアルタイムで行いたい . . 解決法 . 頻繁にリクエストする 無駄が多すぎる . Daniel Perez ウェブソケットの仕組み 2013年12月12日 4 / 16
  7. 7. 概要 背景 . 問題点 . HTTPはリクエスト・レスポンスベース 更新などをリアルタイムで行いたい . . 解決法 . 頻繁にリクエストする 無駄が多すぎる Long polling . TCP接続が無駄に増える 無駄なオーバヘッド(ヘッダーなど) 実装が複雑 Daniel Perez ウェブソケットの仕組み 2013年12月12日 4 / 16
  8. 8. 概要 ウェブソケットプロトコル Daniel Perez ウェブソケットの仕組み 2013年12月12日 5 / 16
  9. 9. 概要 ウェブソケットプロトコル プロトコル Daniel Perez ウェブソケットの仕組み 2013年12月12日 5 / 16
  10. 10. 概要 ウェブソケットプロトコル プロトコル TCP上で稼働する ただのTCPソケットではない Daniel Perez ウェブソケットの仕組み 2013年12月12日 5 / 16
  11. 11. 概要 ウェブソケットプロトコル プロトコル TCP上で稼働する ただのTCPソケットではない Full Duplex(全二重)通信 クライアントからサーバーに一方的に通信可能 サーバーからクライアントに一方的に通信可能 Daniel Perez ウェブソケットの仕組み 2013年12月12日 5 / 16
  12. 12. 概要 ウェブソケットプロトコル プロトコル TCP上で稼働する ただのTCPソケットではない Full Duplex(全二重)通信 クライアントからサーバーに一方的に通信可能 サーバーからクライアントに一方的に通信可能 HTTPとまったく別のプロトコル Daniel Perez ウェブソケットの仕組み 2013年12月12日 5 / 16
  13. 13. 概要 ウェブソケットプロトコル プロトコル TCP上で稼働する ただのTCPソケットではない Full Duplex(全二重)通信 クライアントからサーバーに一方的に通信可能 サーバーからクライアントに一方的に通信可能 HTTPとまったく別のプロトコル デフォルトでポート80と443を使う Daniel Perez ウェブソケットの仕組み 2013年12月12日 5 / 16
  14. 14. 概要 ウェブソケットプロトコル プロトコル TCP上で稼働する ただのTCPソケットではない Full Duplex(全二重)通信 クライアントからサーバーに一方的に通信可能 サーバーからクライアントに一方的に通信可能 HTTPとまったく別のプロトコル デフォルトでポート80と443を使う 既存のHTTPサーバーが対応しやすいプロトコル Daniel Perez ウェブソケットの仕組み 2013年12月12日 5 / 16
  15. 15. プロトコルの仕様 接続の流れ 接続の流れ WebSocket Server . Browser Daniel Perez ウェブソケットの仕組み 2013年12月12日 6 / 16
  16. 16. プロトコルの仕様 接続の流れ 接続の流れ WebSocket Server HTTP request . Browser Daniel Perez ウェブソケットの仕組み 2013年12月12日 6 / 16
  17. 17. プロトコルの仕様 接続の流れ 接続の流れ WebSocket Server GET /chat HTTP/1.1 Host: server.example.com Origin: http://example.com Upgrade: websocket Connection: Upgrade HTTP request . Browser Daniel Perez Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ== Sec-WebSocket-Protocol: chat, superchat Sec-WebSocket-Version: 13 ウェブソケットの仕組み 2013年12月12日 6 / 16
  18. 18. プロトコルの仕様 接続の流れ 接続の流れ Check request WebSocket Server GET /chat HTTP/1.1 Host: server.example.com Origin: http://example.com Upgrade: websocket Connection: Upgrade HTTP request . Browser Daniel Perez Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ== Sec-WebSocket-Protocol: chat, superchat Sec-WebSocket-Version: 13 ウェブソケットの仕組み 2013年12月12日 6 / 16
  19. 19. プロトコルの仕様 接続の流れ 接続の流れ WebSocket Server HTTP response . Browser Daniel Perez ウェブソケットの仕組み 2013年12月12日 6 / 16
  20. 20. プロトコルの仕様 接続の流れ 接続の流れ WebSocket Server HTTP response HTTP/1.1 101 Switching Protocols Upgrade: websocket Connection: Upgrade Sec-WebSocket-Accept: s3pPLMBiTxaQ9kYGzzhZRbK +xOo= . Browser Daniel Perez ウェブソケットの仕組み 2013年12月12日 6 / 16
  21. 21. プロトコルの仕様 接続の流れ 接続の流れ WebSocket Server HTTP/1.1 101 Switching Protocols Upgrade: websocket Connection: Upgrade Finalize upgrade Daniel Perez Sec-WebSocket-Accept: s3pPLMBiTxaQ9kYGzzhZRbK +xOo= . Browser ウェブソケットの仕組み 2013年12月12日 6 / 16
  22. 22. プロトコルの仕様 接続の流れ 接続の流れ WebSocket Server Full Duplex . Browser Daniel Perez ウェブソケットの仕組み 2013年12月12日 6 / 16
  23. 23. プロトコルの仕様 データ通信 データ形式 概要 Daniel Perez ウェブソケットの仕組み 2013年12月12日 7 / 16
  24. 24. プロトコルの仕様 データ通信 データ形式 概要 基本単位は「メッセージ」 TCPソケットと違ってバイトではない 使う時は必要な処理が大きく減る Daniel Perez ウェブソケットの仕組み 2013年12月12日 7 / 16
  25. 25. プロトコルの仕様 データ通信 データ形式 概要 基本単位は「メッセージ」 TCPソケットと違ってバイトではない 使う時は必要な処理が大きく減る メッセージが「フレーム」に分割される Daniel Perez ウェブソケットの仕組み 2013年12月12日 7 / 16
  26. 26. プロトコルの仕様 データ通信 データ形式 概要 基本単位は「メッセージ」 TCPソケットと違ってバイトではない 使う時は必要な処理が大きく減る メッセージが「フレーム」に分割される クライアントがフレームにマスクを掛ける クライアント側からの不正なメッセージを避ける Daniel Perez ウェブソケットの仕組み 2013年12月12日 7 / 16
  27. 27. プロトコルの仕様 データ通信 データ形式(続き) フレームの構成 § ¦ ¤ 0 1 2 3 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 + −+ −+ − − − −+ − − − − − − − − − − − − − − − − − − − − − −+ −+ −+ − − − −+ − − − − − − −+ − − − − − − − − − − − − − − − | F | R | R | R | opcode |M| Payload len | Extended payload length | | I |S|S|S| (4) |A| (7) | (16/64) | |N| V | V | V | |S| | ( i f payload len ==126/127) | | |1|2|3| |K| | | +−+ −+−+−+ − − −− −− −+−+ −− −− −−−−−−−−−+ − − − − − − − − − − − − − − − + | Extended payload length continued , i f payload len == 127 | + −−−−−−−−−−−−−−− +−−−−−−−−−−−−−−− − − − − − − − − − − − − − − − −+ | | Masking−key , i f MASK s e t to 1 | + − − − − − − − − − − − − − − − − − − − − − − − − − − − − − − −+ − − − − − − − − − − − − − − − −+ − − − − − − − − − − − − − − − | Masking−key ( continued ) | Payload Data | +−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−− + −−−−−−−−−−−−−−−− : Payload Data continued . . . : + −−−−−−−−−−−−−−−−−−−−−−−−−−−−−−− + | Payload Data continued . . . | +−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−− − − − − − − − − − − − − − − − − − − − − − − − − − − − − − − − −+ Daniel Perez ウェブソケットの仕組み 2013年12月12日 ¥ 8 / 16
  28. 28. プロトコルの仕様 メッセージの分割 メッセージの分割 目的 最初から長さの分からないメッセージの送信 送信開始時に読み込める分だけ送ることができる 分割なしでは, バッファリングする必要が生じる マルチプレキシング 1つのチャネルで複数の通信を行う 重いフレームで時間を掛けたくない Daniel Perez ウェブソケットの仕組み 2013年12月12日 9 / 16
  29. 29. プロトコルの仕様 メッセージの分割 メッセージの分割 仕様 分割されていないメッセージ { opcode ̸= 0x00 FIN =1 Daniel Perez ウェブソケットの仕組み 2013年12月12日 10 / 16
  30. 30. プロトコルの仕様 メッセージの分割 メッセージの分割 仕様 分割されていないメッセージ { opcode ̸= 0x00 FIN =1 分割されたメッセージ 1つ目のメッセージ { opcode ̸= 0x00 FIN =0 Daniel Perez ウェブソケットの仕組み 2013年12月12日 10 / 16
  31. 31. プロトコルの仕様 メッセージの分割 メッセージの分割 仕様 分割されていないメッセージ { opcode ̸= 0x00 FIN =1 分割されたメッセージ 途中のメッセージ { opcode = 0x00 FIN =0 分割されたメッセージ 1つ目のメッセージ { opcode ̸= 0x00 FIN =0 Daniel Perez ウェブソケットの仕組み 2013年12月12日 10 / 16
  32. 32. プロトコルの仕様 メッセージの分割 メッセージの分割 仕様 分割されていないメッセージ { opcode ̸= 0x00 FIN =1 分割されたメッセージ 途中のメッセージ { opcode = 0x00 FIN =0 分割されたメッセージ 1つ目のメッセージ { opcode ̸= 0x00 FIN =0 Daniel Perez ウェブソケットの仕組み 最後のメッセージ { opcode = 0x00 FIN =1 2013年12月12日 10 / 16
  33. 33. プロトコルの仕様 フレームの種類 フレームの種類 フレームの種類はopcodeで決まる. Daniel Perez ウェブソケットの仕組み 2013年12月12日 11 / 16
  34. 34. プロトコルの仕様 フレームの種類 フレームの種類 フレームの種類はopcodeで決まる. . データフレーム . テキストフレーム バイナリフレーム . Daniel Perez ウェブソケットの仕組み 2013年12月12日 11 / 16
  35. 35. プロトコルの仕様 フレームの種類 フレームの種類 フレームの種類はopcodeで決まる. . データフレーム . テキストフレーム バイナリフレーム . . 制御フレーム . Close 接続を閉じる Ping 接続の確認 Pong Pingに対する返信 . Daniel Perez ウェブソケットの仕組み 2013年12月12日 11 / 16
  36. 36. 問題点 現状での問題点 WebSocketはまだなかなか使われない . 問題 . . Daniel Perez ウェブソケットの仕組み 2013年12月12日 12 / 16
  37. 37. 問題点 現状での問題点 WebSocketはまだなかなか使われない . 問題 . IEとかいうやつは・・おいておくとして . Daniel Perez ウェブソケットの仕組み 2013年12月12日 12 / 16
  38. 38. 問題点 現状での問題点 WebSocketはまだなかなか使われない . 問題 . IEとかいうやつは・・おいておくとして UpgradeはHop-by-Hopヘッダ . Keep-Aliveなどと同じく 1つ目の通過点でなくなる 対応していないプロクシは通れない Daniel Perez ウェブソケットの仕組み 2013年12月12日 12 / 16
  39. 39. まとめ まとめ 独自のプロトコル Full Duplex通信 HTTPワークフローに入り込みやすい設計 メッセージ単位で通信 メッセージはフレームで分割 プロクシーが対応している必要がある Daniel Perez ウェブソケットの仕組み 2013年12月12日 13 / 16

×