Implementing HTTP/2 client in 60 minutes

Transcript

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

   View Slide

2. Moto Ishizawa
   (@summerwind)
   2/20
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

20. Thank you :-)
    

    View Slide