Implementing HTTP/2 client in 60 minutes HTTP/2 Conference

Moto Ishizawa (@summerwind) 2/20

lHTTP/2 provides an optimized transport for HTTP semantics. HTTP/2 supports all of the core features of HTTP/1.1, but aims to be more efficient in several ways. — Hypertext Transfer Protocol version 2 What is HTTP/2 ? 3/20

Key features of HTTP/2 • Protocol Negotiation • Binary Frame • Stream • Header Compression (HPACK) 4/20

Protocol Negotiation Client Server Client Server Client Hello
 ALPN Extension (HTTP/1, h2) Server Hello
 ALPN Extension (Selected: h2) ALPN (for https://) GET /index.html HTTP/1.1 Connection: Upgrade, HTTP2-Settings Upgrade: h2c HTTP2-Settings: 438997893ab379 HTTP/1.1 101 Switching Protocols Connection: Upgrade Upgrade: h2c HTTP Upgrade (for http://) 5/20

Starting HTTP/2 Client Server Connection Preface
 “PRI * HTTP/2.0\r\n\r\nSM\r\n\r\n” SETTINGS Frame SETTINGS Frame with ACK flagɹ SETTINGS Frame SETTINGS Frame with ACK flagɹ 6/20

Binary Frame DATA Carries HTTP request or response payloads. HEADERS Carries compressed HTTP headers. PRIORITY Specifies the sender-advised priority of a stream. RST_STREAM Notifies for abnormal termination of a stream. SETTINGS Conveys configurations that affect how endpoints communicate. PUSH_PROMISE Notifies the server push. PING Measures a minimal round trip time from the sender. GOAWAY Informs the remote peer to stop creating streams on this connection. WINDOW_UPDATE Updates flow control window. CONTINUATION Conveys a sequence of header block fragments. Frame types 7/20

Binary Frame Frame layout 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 +-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+ | Length (24) | +---------------+---------------+---------------+ | Type (8) | Flags (8) | +-+-------------+---------------+-------------------------------+ |R| Stream Identifier (31) | +=+=============================================================+ | Frame Payload (0...) ... +---------------------------------------------------------------+ 8/20

Binary Frame DATA frame payload 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 +-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+ |Pad Length? (8)| +---------------+-----------------------------------------------+ | Data (*) ... +---------------------------------------------------------------+ | Padding (*) ... +---------------------------------------------------------------+ HEADERS frame payload 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 +-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+ |Pad Length? (8)| +-+-------------+-----------------------------------------------+ |E| Stream Dependency? (31) | +-+-------------+-----------------------------------------------+ | Weight? (8) | +-+-------------+-----------------------------------------------+ | Header Block Fragment (*) ... +---------------------------------------------------------------+ | Padding (*) ... +---------------------------------------------------------------+ 9/20

Binary Frame GET /resource HTTP/1.1 Host: example.org Accept: image/jpeg HTTP Request HEADERS + END_HEADERS + END_STREAM :method: GET :scheme: https :path: /resource host: example.org accept: image/jpeg HTTP/2 Frame 10/20

Binary Frame HTTP/1.1 200 OK Content-Type: image/jpeg Content-Length: 123 {binary data} HTTP Response HEADERS + END_HEADERS :status: 100 content-type: image/jpeg content-length: 123 DATA + END_STREAM {binary data} HTTP/2 Frames 11/20

Stream Client Server HTTP/2 Connection Stream #1 DATA Stream #3 HEADERS Stream #5 DATA HEADERS HEADERS 12/20

Header Compression (HPACK) :method: GET :scheme: https :path: / :authority: summerwind.jp user-agent: chrome First headers Header Table ID Name Value 1 :method GET 2 :scheme https 3 :path / 4 :authority (Empty) Static Table 1 2 3 4: summerwind.jp user-agent: chrome Encoded headers ᶃ Find ᶄ Find ᶅ Encode ᶆ Add 13/20

Header Compression (HPACK) :method: GET :scheme: https :path: /css/style.css :authority: summerwind.jp user-agent: chrome x-custom: hello Second headers 1 2 3: /css/style.css 5 6 x-custom: hello Encoded headers ID Name Value 5 :authority summerwind.jp 6 user-agent chrome Header Table ID Name Value 1 :method GET 2 :scheme https 3 :path / 4 :authority Static Table ᶃ Find ᶄ Find ᶅ Encode ᶆ Add 14/20

Header Compression (HPACK) :method: GET :scheme: https :path: /css/style.css :authority: summerwind.jp user-agent: chrome x-custom: hello Headers 0 1 2 3 4 5 6 7 +---+---+---+---+---+---+---+---+ | 0 | 0 | 0 | 0 | 0 | +---+---+-----------------------+ | H | Name Length (7+) | +---+---------------------------+ | Name String (Length octets) | +---+---------------------------+ | H | Value Length (7+) | +---+---------------------------+ | Value String (Length octets) | +-------------------------------+ Literal Header Field without Indexing 15/20

Today’s Goal • Implementing a simple HTTP/2 Client with Node.js • Connecting to HTTP/2 server via direct • Sending / Receiving SETTINGS frames • Sending / Receiving SETTINGS frames with ACK flag • Sending a HEADERS frame as HTTP request • Receiving a HEADERS frame as HTTP response • Receiving a DATA frame as HTTP response • No HPACK decoding • No Stream management 16/20

Today’s goal (Flow) Client Server Connection Preface Sending an empty SETTINGS frame Receiving an SETTINGS frame Sending an SETTINGS frame with ACK flag Sending a HEADERS frame as HTTP request Receiving a HEADERS frame as HTTP response Receiving a DATA frame as HTTP response Sending an SETTINGS frame with ACK flag 17/20

Demo Code: http://goo.gl/Ey3xci

Next steps Protocol Negotiation • Support ALPN • Support HTTP upgrade Binary Frame • Support other frame types Stream • Management of stream lifecycle • Support priority and stream dependency Header compression (HPACK) • Add HPACK decoder • Support huffman coding 19/20

Thank you :-)