Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Implementing HTTP/2 client in 60 minutes

Moto Ishizawa
November 03, 2014

Implementing HTTP/2 client in 60 minutes

Moto Ishizawa

November 03, 2014
Tweet

More Decks by Moto Ishizawa

Other Decks in Technology

Transcript

  1. 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
  2. Key features of HTTP/2 • Protocol Negotiation • Binary Frame

    • Stream • Header Compression (HPACK) 4/20
  3. 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/2 Frames…> HTTP Upgrade (for http://) 5/20
  4. 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
  5. 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
  6. 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
  7. 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
  8. 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
  9. 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
  10. Stream Client Server HTTP/2 Connection Stream #1 DATA Stream #3

    HEADERS Stream #5 DATA HEADERS HEADERS 12/20
  11. 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
  12. 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
  13. 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
  14. 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
  15. 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
  16. 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