WebSocketプロトコル

1. ウェブソケットの仕組み . 1 概要 . 2 プロトコルの仕様接続の流れデータ通信メッセージの分割フレームの種類 . 3 問題点 . 4 まとめ Daniel Perez ウェブソケットの仕組み 2013年12月12日 1 / 16

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. 概要中学生が見たウェブソケットウェブソケットちょー簡単じゃん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. 概要 kwsk The WebSocket Protocol RFC6455 Daniel Perez ウェブソケットの仕組み 2013年12月12日 3 / 16

5. 概要背景 . 問題点 . HTTPはリクエスト・レスポンスベース更新などをリアルタイムで行いたい . Daniel Perez ウェブソケットの仕組み 2013年12月12日 4 / 16

6. 概要背景 . 問題点 . HTTPはリクエスト・レスポンスベース更新などをリアルタイムで行いたい . . 解決法 . 頻繁にリクエストする無駄が多すぎる . Daniel Perez ウェブソケットの仕組み 2013年12月12日 4 / 16

7. 概要背景 . 問題点 . HTTPはリクエスト・レスポンスベース更新などをリアルタイムで行いたい . . 解決法 . 頻繁にリクエストする無駄が多すぎる Long polling . TCP接続が無駄に増える無駄なオーバヘッド（ヘッダーなど）実装が複雑 Daniel Perez ウェブソケットの仕組み 2013年12月12日 4 / 16

8. 概要ウェブソケットプロトコル Daniel Perez ウェブソケットの仕組み 2013年12月12日 5 / 16

9. 概要ウェブソケットプロトコルプロトコル Daniel Perez ウェブソケットの仕組み 2013年12月12日 5 / 16

10. 概要ウェブソケットプロトコルプロトコル TCP上で稼働するただのTCPソケットではない Daniel Perez ウェブソケットの仕組み 2013年12月12日 5 / 16

11. 概要ウェブソケットプロトコルプロトコル TCP上で稼働するただのTCPソケットではない Full Duplex(全二重)通信クライアントからサーバーに一方的に通信可能サーバーからクライアントに一方的に通信可能 Daniel Perez ウェブソケットの仕組み 2013年12月12日 5 / 16

12. 概要ウェブソケットプロトコルプロトコル TCP上で稼働するただのTCPソケットではない Full Duplex(全二重)通信クライアントからサーバーに一方的に通信可能サーバーからクライアントに一方的に通信可能 HTTPとまったく別のプロトコル Daniel Perez ウェブソケットの仕組み 2013年12月12日 5 / 16

13. 概要ウェブソケットプロトコルプロトコル TCP上で稼働するただのTCPソケットではない Full Duplex(全二重)通信クライアントからサーバーに一方的に通信可能サーバーからクライアントに一方的に通信可能 HTTPとまったく別のプロトコルデフォルトでポート80と443を使う Daniel Perez ウェブソケットの仕組み 2013年12月12日 5 / 16

14. 概要ウェブソケットプロトコルプロトコル TCP上で稼働するただのTCPソケットではない Full Duplex(全二重)通信クライアントからサーバーに一方的に通信可能サーバーからクライアントに一方的に通信可能 HTTPとまったく別のプロトコルデフォルトでポート80と443を使う既存のHTTPサーバーが対応しやすいプロトコル Daniel Perez ウェブソケットの仕組み 2013年12月12日 5 / 16

15. プロトコルの仕様接続の流れ接続の流れ WebSocket Server . Browser Daniel Perez ウェブソケットの仕組み 2013年12月12日 6 / 16

16. プロトコルの仕様接続の流れ接続の流れ WebSocket Server HTTP request . Browser Daniel Perez ウェブソケットの仕組み 2013年12月12日 6 / 16

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. プロトコルの仕様接続の流れ接続の流れ 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. プロトコルの仕様接続の流れ接続の流れ WebSocket Server HTTP response . Browser Daniel Perez ウェブソケットの仕組み 2013年12月12日 6 / 16

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. プロトコルの仕様接続の流れ接続の流れ 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. プロトコルの仕様接続の流れ接続の流れ WebSocket Server Full Duplex . Browser Daniel Perez ウェブソケットの仕組み 2013年12月12日 6 / 16

23. プロトコルの仕様データ通信データ形式概要 Daniel Perez ウェブソケットの仕組み 2013年12月12日 7 / 16

24. プロトコルの仕様データ通信データ形式概要基本単位は「メッセージ」 TCPソケットと違ってバイトではない使う時は必要な処理が大きく減る Daniel Perez ウェブソケットの仕組み 2013年12月12日 7 / 16

25. プロトコルの仕様データ通信データ形式概要基本単位は「メッセージ」 TCPソケットと違ってバイトではない使う時は必要な処理が大きく減るメッセージが「フレーム」に分割される Daniel Perez ウェブソケットの仕組み 2013年12月12日 7 / 16

26. プロトコルの仕様データ通信データ形式概要基本単位は「メッセージ」 TCPソケットと違ってバイトではない使う時は必要な処理が大きく減るメッセージが「フレーム」に分割されるクライアントがフレームにマスクを掛けるクライアント側からの不正なメッセージを避ける Daniel Perez ウェブソケットの仕組み 2013年12月12日 7 / 16

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. プロトコルの仕様メッセージの分割メッセージの分割目的最初から長さの分からないメッセージの送信送信開始時に読み込める分だけ送ることができる分割なしでは, バッファリングする必要が生じるマルチプレキシング１つのチャネルで複数の通信を行う重いフレームで時間を掛けたくない Daniel Perez ウェブソケットの仕組み 2013年12月12日 9 / 16

29. プロトコルの仕様メッセージの分割メッセージの分割仕様分割されていないメッセージ { opcode ̸= 0x00 FIN =1 Daniel Perez ウェブソケットの仕組み 2013年12月12日 10 / 16

30. プロトコルの仕様メッセージの分割メッセージの分割仕様分割されていないメッセージ { opcode ̸= 0x00 FIN =1 分割されたメッセージ１つ目のメッセージ { opcode ̸= 0x00 FIN =0 Daniel Perez ウェブソケットの仕組み 2013年12月12日 10 / 16

31. プロトコルの仕様メッセージの分割メッセージの分割仕様分割されていないメッセージ { opcode ̸= 0x00 FIN =1 分割されたメッセージ途中のメッセージ { opcode = 0x00 FIN =0 分割されたメッセージ１つ目のメッセージ { opcode ̸= 0x00 FIN =0 Daniel Perez ウェブソケットの仕組み 2013年12月12日 10 / 16

32. プロトコルの仕様メッセージの分割メッセージの分割仕様分割されていないメッセージ { opcode ̸= 0x00 FIN =1 分割されたメッセージ途中のメッセージ { opcode = 0x00 FIN =0 分割されたメッセージ１つ目のメッセージ { opcode ̸= 0x00 FIN =0 Daniel Perez ウェブソケットの仕組み最後のメッセージ { opcode = 0x00 FIN =1 2013年12月12日 10 / 16

33. プロトコルの仕様フレームの種類フレームの種類フレームの種類はopcodeで決まる. Daniel Perez ウェブソケットの仕組み 2013年12月12日 11 / 16

34. プロトコルの仕様フレームの種類フレームの種類フレームの種類はopcodeで決まる. . データフレーム . テキストフレームバイナリフレーム . Daniel Perez ウェブソケットの仕組み 2013年12月12日 11 / 16

35. プロトコルの仕様フレームの種類フレームの種類フレームの種類はopcodeで決まる. . データフレーム . テキストフレームバイナリフレーム . . 制御フレーム . Close 接続を閉じる Ping 接続の確認 Pong Pingに対する返信 . Daniel Perez ウェブソケットの仕組み 2013年12月12日 11 / 16

36. 問題点現状での問題点 WebSocketはまだなかなか使われない . 問題 . . Daniel Perez ウェブソケットの仕組み 2013年12月12日 12 / 16

37. 問題点現状での問題点 WebSocketはまだなかなか使われない . 問題 . IEとかいうやつは・・おいておくとして . Daniel Perez ウェブソケットの仕組み 2013年12月12日 12 / 16

38. 問題点現状での問題点 WebSocketはまだなかなか使われない . 問題 . IEとかいうやつは・・おいておくとして UpgradeはHop-by-Hopヘッダ . Keep-Aliveなどと同じく１つ目の通過点でなくなる対応していないプロクシは通れない Daniel Perez ウェブソケットの仕組み 2013年12月12日 12 / 16

39. まとめまとめ独自のプロトコル Full Duplex通信 HTTPワークフローに入り込みやすい設計メッセージ単位で通信メッセージはフレームで分割プロクシーが対応している必要がある Daniel Perez ウェブソケットの仕組み 2013年12月12日 13 / 16

WebSocketプロトコル

Daniel Perez

WebSocketプロトコル

A particular slide catching your eye?