• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
WebSocketプロトコル
 

WebSocketプロトコル

on

  • 503 views

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

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

Statistics

Views

Total Views
503
Views on SlideShare
501
Embed Views
2

Actions

Likes
1
Downloads
7
Comments
0

1 Embed 2

https://twitter.com 2

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    WebSocketプロトコル WebSocketプロトコル Presentation Transcript

    • ウェブソケットの仕組み . 1 概要 . 2 プロトコルの仕様 接続の流れ データ通信 メッセージの分割 フレームの種類 . 3 問題点 . 4 まとめ Daniel Perez ウェブソケットの仕組み 2013年12月12日 1 / 16
    • 概要 中学生が見たウェブソケット ウェブソケットちょー簡単じゃん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
    • 概要 中学生が見たウェブソケット ウェブソケットちょー簡単じゃん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
    • 概要 kwsk The WebSocket Protocol RFC6455 Daniel Perez ウェブソケットの仕組み 2013年12月12日 3 / 16
    • 概要 背景 . 問題点 . HTTPはリクエスト・レスポンスベース 更新などをリアルタイムで行いたい . Daniel Perez ウェブソケットの仕組み 2013年12月12日 4 / 16
    • 概要 背景 . 問題点 . HTTPはリクエスト・レスポンスベース 更新などをリアルタイムで行いたい . . 解決法 . 頻繁にリクエストする 無駄が多すぎる . Daniel Perez ウェブソケットの仕組み 2013年12月12日 4 / 16
    • 概要 背景 . 問題点 . HTTPはリクエスト・レスポンスベース 更新などをリアルタイムで行いたい . . 解決法 . 頻繁にリクエストする 無駄が多すぎる Long polling . TCP接続が無駄に増える 無駄なオーバヘッド(ヘッダーなど) 実装が複雑 Daniel Perez ウェブソケットの仕組み 2013年12月12日 4 / 16
    • 概要 ウェブソケットプロトコル Daniel Perez ウェブソケットの仕組み 2013年12月12日 5 / 16
    • 概要 ウェブソケットプロトコル プロトコル Daniel Perez ウェブソケットの仕組み 2013年12月12日 5 / 16
    • 概要 ウェブソケットプロトコル プロトコル TCP上で稼働する ただのTCPソケットではない Daniel Perez ウェブソケットの仕組み 2013年12月12日 5 / 16
    • 概要 ウェブソケットプロトコル プロトコル TCP上で稼働する ただのTCPソケットではない Full Duplex(全二重)通信 クライアントからサーバーに一方的に通信可能 サーバーからクライアントに一方的に通信可能 Daniel Perez ウェブソケットの仕組み 2013年12月12日 5 / 16
    • 概要 ウェブソケットプロトコル プロトコル TCP上で稼働する ただのTCPソケットではない Full Duplex(全二重)通信 クライアントからサーバーに一方的に通信可能 サーバーからクライアントに一方的に通信可能 HTTPとまったく別のプロトコル Daniel Perez ウェブソケットの仕組み 2013年12月12日 5 / 16
    • 概要 ウェブソケットプロトコル プロトコル TCP上で稼働する ただのTCPソケットではない Full Duplex(全二重)通信 クライアントからサーバーに一方的に通信可能 サーバーからクライアントに一方的に通信可能 HTTPとまったく別のプロトコル デフォルトでポート80と443を使う Daniel Perez ウェブソケットの仕組み 2013年12月12日 5 / 16
    • 概要 ウェブソケットプロトコル プロトコル TCP上で稼働する ただのTCPソケットではない Full Duplex(全二重)通信 クライアントからサーバーに一方的に通信可能 サーバーからクライアントに一方的に通信可能 HTTPとまったく別のプロトコル デフォルトでポート80と443を使う 既存のHTTPサーバーが対応しやすいプロトコル Daniel Perez ウェブソケットの仕組み 2013年12月12日 5 / 16
    • プロトコルの仕様 接続の流れ 接続の流れ WebSocket Server . Browser Daniel Perez ウェブソケットの仕組み 2013年12月12日 6 / 16
    • プロトコルの仕様 接続の流れ 接続の流れ WebSocket Server HTTP request . Browser Daniel Perez ウェブソケットの仕組み 2013年12月12日 6 / 16
    • プロトコルの仕様 接続の流れ 接続の流れ 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
    • プロトコルの仕様 接続の流れ 接続の流れ 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
    • プロトコルの仕様 接続の流れ 接続の流れ WebSocket Server HTTP response . Browser Daniel Perez ウェブソケットの仕組み 2013年12月12日 6 / 16
    • プロトコルの仕様 接続の流れ 接続の流れ 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
    • プロトコルの仕様 接続の流れ 接続の流れ 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
    • プロトコルの仕様 接続の流れ 接続の流れ WebSocket Server Full Duplex . Browser Daniel Perez ウェブソケットの仕組み 2013年12月12日 6 / 16
    • プロトコルの仕様 データ通信 データ形式 概要 Daniel Perez ウェブソケットの仕組み 2013年12月12日 7 / 16
    • プロトコルの仕様 データ通信 データ形式 概要 基本単位は「メッセージ」 TCPソケットと違ってバイトではない 使う時は必要な処理が大きく減る Daniel Perez ウェブソケットの仕組み 2013年12月12日 7 / 16
    • プロトコルの仕様 データ通信 データ形式 概要 基本単位は「メッセージ」 TCPソケットと違ってバイトではない 使う時は必要な処理が大きく減る メッセージが「フレーム」に分割される Daniel Perez ウェブソケットの仕組み 2013年12月12日 7 / 16
    • プロトコルの仕様 データ通信 データ形式 概要 基本単位は「メッセージ」 TCPソケットと違ってバイトではない 使う時は必要な処理が大きく減る メッセージが「フレーム」に分割される クライアントがフレームにマスクを掛ける クライアント側からの不正なメッセージを避ける Daniel Perez ウェブソケットの仕組み 2013年12月12日 7 / 16
    • プロトコルの仕様 データ通信 データ形式(続き) フレームの構成 § ¦ ¤ 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
    • プロトコルの仕様 メッセージの分割 メッセージの分割 目的 最初から長さの分からないメッセージの送信 送信開始時に読み込める分だけ送ることができる 分割なしでは, バッファリングする必要が生じる マルチプレキシング 1つのチャネルで複数の通信を行う 重いフレームで時間を掛けたくない Daniel Perez ウェブソケットの仕組み 2013年12月12日 9 / 16
    • プロトコルの仕様 メッセージの分割 メッセージの分割 仕様 分割されていないメッセージ { opcode ̸= 0x00 FIN =1 Daniel Perez ウェブソケットの仕組み 2013年12月12日 10 / 16
    • プロトコルの仕様 メッセージの分割 メッセージの分割 仕様 分割されていないメッセージ { opcode ̸= 0x00 FIN =1 分割されたメッセージ 1つ目のメッセージ { opcode ̸= 0x00 FIN =0 Daniel Perez ウェブソケットの仕組み 2013年12月12日 10 / 16
    • プロトコルの仕様 メッセージの分割 メッセージの分割 仕様 分割されていないメッセージ { opcode ̸= 0x00 FIN =1 分割されたメッセージ 途中のメッセージ { opcode = 0x00 FIN =0 分割されたメッセージ 1つ目のメッセージ { opcode ̸= 0x00 FIN =0 Daniel Perez ウェブソケットの仕組み 2013年12月12日 10 / 16
    • プロトコルの仕様 メッセージの分割 メッセージの分割 仕様 分割されていないメッセージ { opcode ̸= 0x00 FIN =1 分割されたメッセージ 途中のメッセージ { opcode = 0x00 FIN =0 分割されたメッセージ 1つ目のメッセージ { opcode ̸= 0x00 FIN =0 Daniel Perez ウェブソケットの仕組み 最後のメッセージ { opcode = 0x00 FIN =1 2013年12月12日 10 / 16
    • プロトコルの仕様 フレームの種類 フレームの種類 フレームの種類はopcodeで決まる. Daniel Perez ウェブソケットの仕組み 2013年12月12日 11 / 16
    • プロトコルの仕様 フレームの種類 フレームの種類 フレームの種類はopcodeで決まる. . データフレーム . テキストフレーム バイナリフレーム . Daniel Perez ウェブソケットの仕組み 2013年12月12日 11 / 16
    • プロトコルの仕様 フレームの種類 フレームの種類 フレームの種類はopcodeで決まる. . データフレーム . テキストフレーム バイナリフレーム . . 制御フレーム . Close 接続を閉じる Ping 接続の確認 Pong Pingに対する返信 . Daniel Perez ウェブソケットの仕組み 2013年12月12日 11 / 16
    • 問題点 現状での問題点 WebSocketはまだなかなか使われない . 問題 . . Daniel Perez ウェブソケットの仕組み 2013年12月12日 12 / 16
    • 問題点 現状での問題点 WebSocketはまだなかなか使われない . 問題 . IEとかいうやつは・・おいておくとして . Daniel Perez ウェブソケットの仕組み 2013年12月12日 12 / 16
    • 問題点 現状での問題点 WebSocketはまだなかなか使われない . 問題 . IEとかいうやつは・・おいておくとして UpgradeはHop-by-Hopヘッダ . Keep-Aliveなどと同じく 1つ目の通過点でなくなる 対応していないプロクシは通れない Daniel Perez ウェブソケットの仕組み 2013年12月12日 12 / 16
    • まとめ まとめ 独自のプロトコル Full Duplex通信 HTTPワークフローに入り込みやすい設計 メッセージ単位で通信 メッセージはフレームで分割 プロクシーが対応している必要がある Daniel Perez ウェブソケットの仕組み 2013年12月12日 13 / 16