最近思うところについて書いてみた。間違えてることも多いかも...??

1. 2016.10.06 社内勉強会 LT
再入門、サーバープッシュ技術
世嘉良 紳

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

3. WebSocket の接続手順
HTML5 WebSocket Server and Client with GlassFish ~ Yasassri's Blog
http://yasassriratnayake.blogspot.jp/2014/06/html5-websocket-server-and-client-with.html

4. WebSocket の接続手順 (1)GET /chat HTTP/1.1
Host: server.example.com
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ==
Origin: http://example.com
Sec-WebSocket-Protocol: chat, superchat
Sec-WebSocket-Version: 13
HTML5 WebSocket Server and Client with GlassFish ~ Yasassri's Blog
http://yasassriratnayake.blogspot.jp/2014/06/html5-websocket-server-and-client-with.html

5. WebSocket の接続手順 (2)
HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Protocol: chat
Sec-WebSocket-Accept: s3pPLMBiTxaQ9kYGzzhZRbK+xOo=
HTML5 WebSocket Server and Client with GlassFish ~ Yasassri's Blog
http://yasassriratnayake.blogspot.jp/2014/06/html5-websocket-server-and-client-with.html

6. WebSocket の接続手順 (3)
HTML5 WebSocket Server and Client with GlassFish ~ Yasassri's Blog
http://yasassriratnayake.blogspot.jp/2014/06/html5-websocket-server-and-client-with.html

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

8. ハンドシェイクに着目する
• HTTP に基づくサーバ側ソフトウェアや中継点との互換性
が保たれることが意図されている。
• その目的のため WebSocket クライアントのハンドシェイク
は HTTP Upgrade リクエストになる
RFC 6455 - The WebSocket Protocol （日本語訳）: https://triple-underscore.github.io/RFC6455-ja.html#section-1.3

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

10. インターネット層
IP アドレス
アプリケーション層
HTTP スキームの URL
トランスポート層
TCP
WebSocket
メッセージを利用したなにか
アプリケーション層
HTTP
TCP/IP の階層モデル WebSocket の階層モデル ?
TCP/IP の再実装では…？
高
低
レイヤー

11. • 「Socket.IO は必要か?」または「WebSocket は通るのか?」
問題について 2016 年版
https://blog.jxck.io/entries/2016-08-22/websocket-connectivity.html
• WebSocketには注意が必要 | プログラミング | POST
http://postd.cc/websockets-caution-required/
• 2016年現在、WebSocketはおすすめできない
http://qiita.com/yuba/items/00fc1892b296fb7b8de9
WebSocket を取り巻く環境

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

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

14. • W3C によって策定が進められている (2015.2.3 に W3C
Recommendation)
• サーバーからのプッシュ通知を取得する EventSource イン
ターフェースと通信に利用する EventStream データフォー
マットを提供
• メッセージの配信は HTTP 接続上で行われる
Server-Sent Events (SSE)

15. Server-Sent Events の接続手順
EentStream/OPEN
EventSource
EentStream/CLOSE
Push Message

16. EentStream/OPEN
EventSource
EentStream/CLOSE
Push Message
Server-Sent Events の接続手順 (1)
GET /stream HTTP/1.1
Host: server.example.com
Accept: text.event-stream

17. EentStream/OPEN
EventSource
EentStream/CLOSE
Push Message
Server-Sent Events の接続手順 (2)
HTTP/1.1 200 OK
Connection: keep-alive
Content-Type: text:event-stream
Transfer-Encoding: chunked

18. Server-Sent Events の接続手順 (3)
EentStream/OPEN
EventSource
EentStream/CLOSE
Push Message
event: event_type
data: { “message”: “JSON payload” }

19. Server-Sent Events の接続手順
EentStream/OPEN
EventSource
EentStream/CLOSE
Push Message

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

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

22. • 2015.5.15 に RFC7540 として proposed standard
• バイナリベースのプロトコル
• HTTP/1.1 の課題を解決するための新機能
- ストリームの多重化
- ストリームの優先度
- ヘッダー圧縮
- フロー制御
HTTP/2

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

24. へっだー圧縮の図？

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

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

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

28. •書籍: ハイパフォーマンス ブラウザネットワーキング ネットワークアプリケーションのためのパフォーマンス最適化
•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には注意が必要 | プログラミング | POST
http://postd.cc/websockets-caution-required/
•2016年現在、WebSocketはおすすめできない
http://qiita.com/yuba/items/00fc1892b296fb7b8de9
•あなたにWebSocketは必要ないかも | 未分類 | POSTD
http://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’ Codes
http://jxck.hatenablog.com/entry/20120703/1341334244
参考