1. HTTP/2.0 Guide
2013/08/14
#http2study

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

4. history and status
HTTP/2.0?

5. History of HTTP
... HTTP/0.9
1996/ 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 start
2012/11 HTTP/2.0 (draft-00)
2013/ 7 HTTP/2.0 (draft-04)
2013/ 8 interop testing
2013/ 8 HTTP/2.0 (draft-05)

6. 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

7. 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)

8. SPDY or HTTP2.0 ?
SPDY/3
SPDY/4
http2.0-00
http2.0-01
http2.0-05
http2.0
SPDY/n ??

9. motivation and spec
SPEC?

10. 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

11. draft-05
● Multiplexing
● Binary Frames
● ALPN / Upgrade
● Header Compression
● Server Push

12. 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

13. Frames
● DATA
● HEADERS
● PRIORITY
● RST_STREAM
● SETTINGS
● PUSH_PROMISE
● PING
● GOAWAY
● WINDOW_UPDATE
● CONTINUATION

14. 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

15. HTTP/1.1
HEADERS & DATA frame
CLIENT SERVER
HTTP/1.1 200 OK
Content-Type: image/png
Content-Length: 123
{binary data}
GET /a.png HTTP/1.1
Host: example.org
Accept: image/png

16. 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}

17. GET /a.png HTTP/1.1
Host: example.org
Accept: image/png
HEADERS
+ END_STREAM
+ END_HEADERS
:method = GET
:scheme = https
:host = example.org
:path = /a.png
accept = image/png
HTTP/1.1 200 OK
Content-Type: image/png
Content-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

18. $ 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 GMT
Hello 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=)
st
r
e

19. 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

20. Server Push(1)
CLIENT SERVER
HTTP/1.1 200 OK
Content-Type: text/html
Content-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
PUSH
Request

21. 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
PUSH
Respons

22. 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

23. 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 Java
see: https://github.com/http2/http2-spec/wiki/Implementations

24. Tools for dev
Tools?

25. spdy-indicator
● chrome, firefox, opera
● supports
○ spdy/2
○ spdy/3
○ quic

26. chrome://net-internals

27. nghttp2 & spdylay
● C implementation library
● spdycat, nghttp
○ client cli tool
● spdyd, nghttpd
○ file server
● shrpx, nghttpdx
○ proxy
web frontend of nghttp2 & spdycat => http2cat

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

29. books
● High Performance Browser Networking
○ by Ilya Grigorik(Google)
● http://chimera.labs.oreilly.com/books/1230000000545

30. thanks :)
END