HTTP/2.0 Guide 2013/08/14#http2study

Jack

● id: Jxck● github: Jxck● twitter: jxck_● about: http://jxck.io● blog: http://d.hatena.ne.jp/jxck● Love: music

history and status

HTTP/2.0?

History of HTTP... HTTP/0.91996/ 5 HTTP/1.0 (RFC 1945)1997/ 1 HTTP/1.1 (RFC 2068)2009/11 SPDY/1...2011/ 9 WebSocket(RFC 6455)2012/ 8 HTTP/2.0 start2012/11 HTTP/2.0 (draft-00)2013/ 7 HTTP/2.0 (draft-04)2013/ 8 interop testing2013/ 8 HTTP/2.0 (draft-05)

about SPDY

● Mike Belshe starts develop at 2009● motivation

○ multiplexing○ header compression○ reduce RTT○ etc

● version○ spdy/1○ spdy/2 (nginx)○ spdy/3 (mod_spdy, jetty, node-spdy)○ spdy/3.1 (twitter)○ spdy/4a3 (google)○ spdy/4

about HTTP2

● httpbis wg at IETF from 2012● motivation

○ update HTTP/1.1● version

○ draft-00 (copy of spdy/3)○ draft-01○ draft-02○ draft-03○ draft-04 (interop test)○ draft-05 (2013/8/14 current)○ ...○ RFC XXXX (2014 spring? bit.ly/130oZrZ)

SPDY or HTTP2.0 ?

SPDY/3

SPDY/4http2.0-00

http2.0-01

http2.0-05

http2.0SPDY/n ??

motivation and spec

SPEC?

specs

● working on github !○ https://github.com/http2/http2-spec

● draft○ http://tools.ietf.org/wg/httpbis/draft-ietf-httpbis-http2/

● current○ http://tools.ietf.org/html/draft-ietf-httpbis-http2-05

draft-05

● Multiplexing● Binary Frames● ALPN / Upgrade● Header Compression● Server Push

Starting HTTP2.0

● for “http” uri○ using upgrade header○ like websocket○ (followed connection header)

● for “https” uri○ ALPN (application layer protocol negotiation)○ not NPN (next protocol negotiation) like spdy○ (followed connection header)

● with Prior Knowledge○ may immediately send http2.0 frame

Frames

● DATA● HEADERS● PRIORITY● RST_STREAM● SETTINGS● PUSH_PROMISE● PING● GOAWAY● WINDOW_UPDATE● CONTINUATION

Stream

● sequence of HEADER & DATA○ like req/res on http1.*

● multiplex○ one connection has multiple concurrent streams

● priority○ 0(high) to 2^31-1(low)

● flow control○ WINDOW_UPDATE○ HOP-by-HOP

HTTP/1.1

HEADERS & DATA frame

CLIENT SERVERHTTP/1.1 200 OKContent-Type: image/pngContent-Length: 123

{binary data}

GET /a.png HTTP/1.1Host: example.orgAccept: image/png

HTTP/2.0

HEADERS & DATA frame

CLIENT SERVER

HEADERS(stream_id=1) + END_STREAM + END_HEADERS :method = GET :scheme = https :host = example.org :path = /a.png accept = image/png

HEADERS(stream_id=1) - END_STREAM + END_HEADERS :status = 200 content-type = image/png content-length = 123

DATA(stream_id=1) + END_STREAM {binary data}

GET /a.png HTTP/1.1Host: example.orgAccept: image/png

HEADERS + END_STREAM + END_HEADERS :method = GET :scheme = https :host = example.org :path = /a.png accept = image/png

HTTP/1.1 200 OKContent-Type: image/pngContent-Length: 123

{binary data}

HEADERS - END_STREAM + END_HEADERS :status = 200 content-type = image/png content-length = 123

DATA + END_STREAM {binary data}

HTTP/1.1 HTTP/2.0

Req

Res

HEADERS & DATA frame

$ nghttp http://http2.iijplus.jp:8080/ -v --no-tls[ 0.051] send SETTINGS frame <length=16, flags=0x00, stream_id=0> (niv=2) [4:100] [7:65535][ 0.051] send HEADERS frame <length=65, flags=0x05, stream_id=1> ; END_STREAM | END_HEADERS ; Open new stream :host: http2.iijplus.jp:8080 :method: GET :path: / :scheme: http accept: */* accept-encoding: gzip, deflate user-agent: nghttp2/0.1.0-DEV[ 0.095] recv SETTINGS frame <length=16, flags=0x00, stream_id=0> (niv=2) [4:100] [7:65536][ 0.125] recv HEADERS frame <length=48, flags=0x04, stream_id=1> ; END_HEADERS ; First response header :status: 200 content-length: 12 content-type: text/plain date: Wed, 14 Aug 2013 06:13:27 GMTHello World!

[ 0.126] recv DATA frame (length=12, flags=1, stream_id=1) ; END_STREAM[ 0.126] send GOAWAY frame <length=8, flags=0x00, stream_id=0> (last_stream_id=0, error_code=NO_ERROR(0), opaque_data=)

stre

Server Push

● response before request● only safe :method (GET, HEAD)● start with PUSH_PROMISE frame

○ notify to client which resources will push○ if client accepts, client should not request them

● after PUSH_PROMISE○ send a response with promised stream○ resources are on browser cache

● after push○ client request will hit on cache

Server Push(1)

CLIENT SERVER

HTTP/1.1 200 OKContent-Type: text/htmlContent-Length: 123

{binary data}

PUSH_PROMISE (stream_id=1) + END_PUSH_PROMISE Promised-Stream-ID=2 :method = GET :scheme = https :host = example.org :path = /index.html accept = text/html

HEADERS (stream_id=1) + END_STREAM + END_HEADERS :method = GET :scheme = https :host = example.org :path = /index.html accept = text/html

PUSHRequest

Server Push(2)

CLIENT SERVER

Browser Cache

DATA (stream_id=2) + END_STREAM {binary data}

HEADERS (stream_id=2) - END_STREAM + END_HEADERS :status = 200 :path = /a.png content-type = image/png content-length = 123

PUSHRespons

Server Push(2)

CLIENT SERVER

HEADERS　(stream_id=1) - END_STREAM + END_HEADERS :status = 200 content-type = text/html content-length = 33

DATA (stream_id=1) + END_STREAM <html> <img src=”a.png”> </html>

cache hit !!

Response

implementations● nghttp2 C● http2-katana C#● node-http2 NodeJS● Mozilla C++● http2-perl Perl● iij-http2 NodeJS● Akamai Ghost C++● Chromium C++● Hasan's GFE C++● Twitter Javasee: https://github.com/http2/http2-spec/wiki/Implementations

Tools for dev

Tools?

spdy-indicator

● chrome, firefox, opera● supports

○ spdy/2○ spdy/3○ quic

chrome://net-internals

nghttp2 & spdylay

● C implementation library● spdycat, nghttp

○ client cli tool● spdyd, nghttpd

○ file server● shrpx, nghttpdx

○ proxy

web frontend of nghttp2 & spdycat => http2cat

HTTP2Cat (https://jxck.io/labs/http2cat)

books● High Performance Browser Networking

○ by Ilya Grigorik(Google)● http://chimera.labs.oreilly.com/books/1230000000545

thanks :)

END