2016.10.06 社内勉強会 LT

再入門、サーバープッシュ技術

世嘉良 紳

• WebSocket は、クライアントとサーバー間の双方向通信を目的として策定された通信規格• HTTP とは別の TCP に基づく独立したプロトコル• 2011.12.11 に RFC6455 で Proposed Standard ( 標準化提案 ) され Socket.IO, WS など多数の実装がある

WebSocket について再入門

WebSocket の接続手順

HTML5 WebSocket Server and Client with GlassFish ~ Yasassri's Bloghttp://yasassriratnayake.blogspot.jp/2014/06/html5-websocket-server-and-client-with.html

WebSocket の接続手順 (1)GET /chat HTTP/1.1Host: server.example.comUpgrade: websocketConnection: UpgradeSec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ==Origin: http://example.comSec-WebSocket-Protocol: chat, superchatSec-WebSocket-Version: 13

HTML5 WebSocket Server and Client with GlassFish ~ Yasassri's Bloghttp://yasassriratnayake.blogspot.jp/2014/06/html5-websocket-server-and-client-with.html

WebSocket の接続手順 (2)HTTP/1.1 101 Switching ProtocolsUpgrade: websocketConnection: UpgradeSec-WebSocket-Protocol: chatSec-WebSocket-Accept: s3pPLMBiTxaQ9kYGzzhZRbK+xOo=

HTML5 WebSocket Server and Client with GlassFish ~ Yasassri's Bloghttp://yasassriratnayake.blogspot.jp/2014/06/html5-websocket-server-and-client-with.html

WebSocket の接続手順 (3)

HTML5 WebSocket Server and Client with GlassFish ~ Yasassri's Bloghttp://yasassriratnayake.blogspot.jp/2014/06/html5-websocket-server-and-client-with.html

WebSocket の接続が確立するとUTF-8 形式のテキスト , バイナリのメッセージを自由に送受信できるようになる

ハンドシェイクに着目する

• HTTP に基づくサーバ側ソフトウェアや中継点との互換性が保たれることが意図されている。• その目的のため WebSocket クライアントのハンドシェイクは HTTP Upgrade リクエストになる

RFC 6455 - The WebSocket Protocol （日本語訳） : https://triple-underscore.github.io/RFC6455-ja.html#section-1.3

本来 HTTP はステートレスなプロトコルでクライアントの接続情報などは持たないはず…

インターネット層IP アドレス アプリケーション層

HTTP スキームの URL

トランスポート層TCP WebSocket

メッセージを利用したなにかアプリケーション層HTTP

TCP/IP の階層モデル WebSocket の階層モデル ?

TCP/IP の再実装では…？高

低レイヤー

• 「 Socket.IO は必要か ? 」または「 WebSocket は通るのか ? 」

　問題について 2016 年版https://blog.jxck.io/entries/2016-08-22/websocket-connectivity.html

• WebSocket には注意が必要 | プログラミング | POSThttp://postd.cc/websockets-caution-required/

• 2016 年現在、 WebSocket はおすすめできないhttp://qiita.com/yuba/items/00fc1892b296fb7b8de9

WebSocket を取り巻く環境

インフラ方面の方々が苦しんでいる様子…

あなたに WebSocket は必要ないかも | 未分類 | POSTDhttp://postd.cc/you-might-not-need-a-websocket/

• W3C によって策定が進められている (2015.2.3 に W3C Recommendation)

• サーバーからのプッシュ通知を取得する EventSource インターフェースと通信に利用する EventStream データフォーマットを提供• メッセージの配信は HTTP 接続上で行われる

Server-Sent Events (SSE)

Server-Sent Events の接続手順

EentStream/OPEN

Even

tSou

rce

EentStream/CLOSE

Push Message

EentStream/OPEN

Even

tSou

rce

EentStream/CLOSE

Push Message

Server-Sent Events の接続手順 (1)

GET /stream HTTP/1.1Host: server.example.comAccept: text.event-stream

EentStream/OPEN

Even

tSou

rce

EentStream/CLOSE

Push Message

Server-Sent Events の接続手順 (2)

HTTP/1.1 200 OKConnection: keep-aliveContent-Type: text:event-streamTransfer-Encoding: chunked

Server-Sent Events の接続手順 (3)

EentStream/OPEN

Even

tSou

rce

EentStream/CLOSE

Push Message

event: event_type

data: { “message”: “JSON payload” }

Server-Sent Events の接続手順

EentStream/OPEN

Even

tSou

rce

EentStream/CLOSE

Push Message

メッセージの配信は単一の HTTP 接続上で行いコネクションの管理やメッセージの解析はブラウザに任せることができる

• WebSocket とは違い HTTP ベースのため、メタデータのサイズがどうしても大きくなってしまう　例 ) User-Agent, cookie など• SSE がサポートするのは UTF-8 形式のテキストのみ• ロングポーリング ( クライアントがサーバーに対して繰り返しリクエストを送信する ) が技術のベースとなっている

なぜ流行らなかったか ?

• 2015.5.15 に RFC7540 として proposed standard

• バイナリベースのプロトコル• HTTP/1.1 の課題を解決するための新機能

- ストリームの多重化- ストリームの優先度- ヘッダー圧縮- フロー制御

HTTP/2

• HTTP/2 ではリクエスト / レスポンスで共通のデータは送信せずに、差分のみをやりとりする。• ヘッダーに変更がない場合はオーバーヘッドは 0 バイト• 詳細はこちら https://summerwind.jp/docs/rfc7540/#section4-3

ヘッダー圧縮

へっだー圧縮の図？

HTTP/2 の登場によってこれまで廃れていた (?) 技術に光が当たるかも… ?

• WebSocket は本当にチャットのような高速なリクエスト / レスポンスが発生する場所に利用する• クライアント間での座標やイベントの同期などには 　 Server-Sent Event を利用する

こうなったらいいなあ的な

• WebSocket に興味を持ちそれを取り巻く環境を調べた• サーバー / クライアント間でのメッセージの通知に　 Server-Sent Event という技術があることを学んだ• HTTP/2 の登場によって Web の通信に変化が起きようとしている

まとめ

•書籍 : ハイパフォーマンス ブラウザネットワーキング ネットワークアプリケーションのためのパフォーマンス最適化•RFC7540 日本語訳http://summerwind.jp/docs/rfc7540/

•RFC 6455 - The WebSocket Protocol ( 日本語訳 )https://triple-underscore.github.io/RFC6455-ja.html

•「 Socket.IO は必要か ? 」または「 WebSocket は通るのか ? 」問題について 2016 年版https://blog.jxck.io/entries/2016-08-22/websocket-connectivity.html

•WebSocket には注意が必要 | プログラミング | POSThttp://postd.cc/websockets-caution-required/

•2016 年現在、 WebSocket はおすすめできないhttp://qiita.com/yuba/items/00fc1892b296fb7b8de9

•あなたに WebSocket は必要ないかも | 未分類 | POSTDhttp://postd.cc/you-might-not-need-a-websocket/

•SPDY 対 WebSockets?https://www.infoq.com/jp/news/2012/06/spdy-websockets

• SPDY と WebSocket の基礎と SPDY の Push - Block Rockin’ Codeshttp://jxck.hatenablog.com/entry/20120703/1341334244

参考