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