Your SlideShare is downloading. ×
0
WebSocketプロトコル
WebSocketプロトコル
WebSocketプロトコル
WebSocketプロトコル
WebSocketプロトコル
WebSocketプロトコル
WebSocketプロトコル
WebSocketプロトコル
WebSocketプロトコル
WebSocketプロトコル
WebSocketプロトコル
WebSocketプロトコル
WebSocketプロトコル
WebSocketプロトコル
WebSocketプロトコル
WebSocketプロトコル
WebSocketプロトコル
WebSocketプロトコル
WebSocketプロトコル
WebSocketプロトコル
WebSocketプロトコル
WebSocketプロトコル
WebSocketプロトコル
WebSocketプロトコル
WebSocketプロトコル
WebSocketプロトコル
WebSocketプロトコル
WebSocketプロトコル
WebSocketプロトコル
WebSocketプロトコル
WebSocketプロトコル
WebSocketプロトコル
WebSocketプロトコル
WebSocketプロトコル
WebSocketプロトコル
WebSocketプロトコル
WebSocketプロトコル
WebSocketプロトコル
WebSocketプロトコル
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

WebSocketプロトコル

1,270

Published on

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

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

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

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

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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. プロトコルの仕様 メッセージの分割 メッセージの分割 目的 最初から長さの分からないメッセージの送信 送信開始時に読み込める分だけ送ることができる 分割なしでは, バッファリングする必要が生じる マルチプレキシング 1つのチャネルで複数の通信を行う 重いフレームで時間を掛けたくない Daniel Perez ウェブソケットの仕組み 2013年12月12日 9 / 16
  • 29. プロトコルの仕様 メッセージの分割 メッセージの分割 仕様 分割されていないメッセージ { opcode ̸= 0x00 FIN =1 Daniel Perez ウェブソケットの仕組み 2013年12月12日 10 / 16
  • 30. プロトコルの仕様 メッセージの分割 メッセージの分割 仕様 分割されていないメッセージ { opcode ̸= 0x00 FIN =1 分割されたメッセージ 1つ目のメッセージ { opcode ̸= 0x00 FIN =0 Daniel Perez ウェブソケットの仕組み 2013年12月12日 10 / 16
  • 31. プロトコルの仕様 メッセージの分割 メッセージの分割 仕様 分割されていないメッセージ { opcode ̸= 0x00 FIN =1 分割されたメッセージ 途中のメッセージ { opcode = 0x00 FIN =0 分割されたメッセージ 1つ目のメッセージ { opcode ̸= 0x00 FIN =0 Daniel Perez ウェブソケットの仕組み 2013年12月12日 10 / 16
  • 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. プロトコルの仕様 フレームの種類 フレームの種類 フレームの種類は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などと同じく 1つ目の通過点でなくなる 対応していないプロクシは通れない Daniel Perez ウェブソケットの仕組み 2013年12月12日 12 / 16
  • 39. まとめ まとめ 独自のプロトコル Full Duplex通信 HTTPワークフローに入り込みやすい設計 メッセージ単位で通信 メッセージはフレームで分割 プロクシーが対応している必要がある Daniel Perez ウェブソケットの仕組み 2013年12月12日 13 / 16

×