This slide is to introduce HTTP/2 prominent features. It also provides the background for video streaming over HTTP/2

1. HTTP/2 Tutorial
Hung T. Le
Computer Communications Laboratory – Univ. of Aizu

2. Outline
• Introduction of HTTP/2
̶ Hypertext Transfer Protocol
̶ Limitations of the existing HTTP/1.x
̶ HTTP/2
• Prominent features for video streaming
̶ Frame and Stream
̶ HTTP/2 features
• Conclusions
2

3. Hypertext Transfer Protocol (HTTP)
• According to Wikipedia,
̶ HTTP is the foundation of data
communication for the World Wide Web
• In web services,
̶ The web browser submits an HTTP request
to the web server
̶ The web server, which provides resources
such as HTML files, will react to the request
by sending an HTTP response carrying the
requested resource
̶ A web page is fully downloaded after a
sequence request-response transactions
• HTTP/1.1 is the main protocol for web
delivering nowadays
3

4. HTTP/1.x limitations
• HTTP/1.x problems
̶ Header-related overhead
̶ At least one RTT for each request
̶ Head of line blocking
4
The webpage is not displayed well until
all JavaScript files are fully received
Many header fields for only one request, regardless
the size of the requested resource
RTT from London to other places over
the world

5. Introduction to HTTP/2
• HTTP/2
̶ Developed based on SYDY proposed by Google
̶ Scandalized in May 2015
• New features
̶ Header field compression and Binary framing
̶ Server push and Stream termination
̶ Multiple concurrent streams over one connection and Flow control
• HTTP/2 is expected to replace HTTP/1.x in the near future
5
Source: http://caniuse.com/#feat=http2

6. Outline
• Introduction of HTTP/2
̶ Hyper Text Transfer Protocol
̶ Limitations of existing HTTP/1.x
̶ HTTP/2
• Prominent features for video streaming
̶ Frame and Stream
̶ HTTP/2 features
• Conclusions
6

7. Please note …
• Objectives
̶ Some prominent features that may be useful for video streaming
• Some parts are not included
̶ Initiating an HTTP/2 connection
̶ Upgrading to/from HTTP/2 connections
̶ Binary framing and Header field compression
̶ Error handling
̶ Security
• The concepts of HTTP/1.1 are out of the scope of this talk
̶ The structure of an HTTP message
̶ The response of an HTTP request, …
• Terms:
̶ Endpoint can be either the client or the server of the connection
7

8. • HTTP/2 Hierarchy
̶ HTTP/2 is an application layer
̶ Connection, Stream, Message, Frame.
• In the HTTP/2 standard (RFC 7540)
̶ TCP connection (pls. refer h2c) , TLS connection (pls. refer h2)
̶ Frame is the smallest unit of communication in HTTP/2
̶ A Stream is an independent and bidirectional sequence of frames
̶ Message is not defined in RFC 7540.
Frame and Stream
8
Session (TLS)
Transport (TCP)
Network (IP)
Application (HTTP/2)

9. Frame and Stream
• Basic idea of framing requests/responses
̶ To support multiple concurrent streams (multiplexing) in HTTP/2
̶ To cope with Head-of-line blocking problem
9Source: https://en.99designs.jp/
The important files such as CSS, JS, fonts
will be fully received before less important
ones (images, for example)
We will come back this problem in the next
part.

10. Frame and Stream
• The order of frames in an HTTP/2 connection
• The order of frames in a single stream
10
Stream 11
HEADERS
Stream 11
DATA
Stream 13
DATA
Stream 15
HEADERS
Stream 15
DATA
Stream 13
DATA
Stream 15
DATA
Note: The order of frames is significant
Stream 11
DATA
Stream 11
HEADERS
Stream 11
DATA
Stream 11
DATA
Stream 11
HEADERS
(a) A client sends an HTTP
request in stream 11
(b) A server sends an HTTP
respond in the same stream
Note: A HTTP request and a HTTP response fully consume a single stream

11. Frame
• Characteristics:
̶ A frame must be in a stream, which is identified by a specific field
called Stream Identifier in the frame header
̶ The frame size (in Length field) is from 2^14 (16KB) to 2^24-1
(16MB)
̶ Currently, the HTTP/2 standard defines 10 different frame types,
each of which serves a distinct purpose and defines distinct flags
11

12. Stream
• Important characteristics
̶ A stream is established by an endpoint but it can be used/closed by
either the client or the server
̶ A connection can contain multiple concurrently open streams. Again,
the frames of these streams are interleaved
̶ A stream is identified by an integer (i.e. Stream ID) assigned when
initiating the stream
• Some special streams
̶ Stream 0 is for sending the important settings, only SETTINGS,
WINDOW_UPDATE and PING frames are sent in this stream
̶ Stream 1 is used to restore the previous HTTP/1.1 request when the
connection is upgraded to HTTP/2
12

13. Prominent HTTP/2 features
• We explain how the HTTP/2 works via three scenarios
̶ Simple Request/Response exchange
̶ Simple exchange with server push
̶ Multiple concurrent exchanges
• The focuses are on
̶ Prominent features
̶ Related frame types
̶ Status of the stream during a session
13

14. Flowchart of a request/response
exchange
Client Server
Time
(1) Request/Response exchange
• First scenario:
̶ A client wants to request an image
from the server
• How the HTTP/2 works
̶ The client initiates a new stream (e.g.
stream 11) and sends the request
using an HEADERS frame
̶ Note that all stream start with one
HEADERS frame
14
HTTP/2HTTP/1.1
HEADERS frame (stream ID = 11)
+END_STREAM
+END_HEADERS
:method = GET
:path = /resource
host = example.org
accept = image/jpeg
GET /resource HTTP/1.1
Host: example.org
Accept: image/jpeg

15. (1) Request/Response exchange
• How the HTTP/2 works
̶ The server sends an HTTP
response on the same stream as
the request (i.e. stream 11)
̶ The HEADERS frame contains the
header of HTTP response (i.e.
status code 200 in this example)
̶ The following DATA frames
contains the payload of HTTP
response message
̶ The last frame is sent with the
END_STREAM flag set
15
…
Flowchart of a request/response
exchange
Client Server
Time

16. (1) Request/Response exchange
• Stream state
̶ During the exchange, the stream state on the server side and the client
side changes as follows:
idle
open
half closed
(remote)
half closed
(local)
closed
send ESrecv ES
send H/
recv H
send ES /
recv R/
send R
recv ES /
recv R/
send R
send R/
recv R
Server side
H: HEADERS frame (with implied CONTINUATION)
ES: END_STREAM frag
R: RST_STREAM frame
Client side
16

17. (1) Request/Response exchange
• Flow control
̶ to prevent the sender from overwhelming the receiver with data (in
DATA frames).
o For example, the receiver may be busy, under heavy load or doesn’t want
to receive more data in this stream
̶ to balance the loads among streams in the same connection
• Flow control is hop by hop (between the two endpoints)
17
Original serverProxy serverClient
There are two different flow control in the two links

18. • How the HTTP/2 works
̶ Flow control can be applied for both an individual stream and the whole
connection.
(1) Request/Response exchange
18
Flow control can be applied for both stream and connection
Server 1
Client
Stream 2
Stream 4
…
Connection 1
Buffer for connection 1
Server 2
Buffer for connection 2 Connection 2

19. (1) Request/Response exchange
̶ Using WINDOW_UPDATE frames (sent every time data are passed to the
upper layer) and SETTINGS frames (for setting the initial window size)
19
Flowchart of a request/response exchange
with Flow control.
- WINDOW_UPDATE frames are sent in
stream 11 and stream 0
…Client Server
Time
Client
…
- NOTE: the algorithm for Flow
control and the time to send
WINDOW_UPDATE frames are
dependent on the application.

20. (2) Simple exchange with Server push
• What is Server push?
̶ Server push feature allows the server to send pushed responses
before receiving the client’s requests, eliminating an RTT and reducing
the content loading time
20
Client Server Client Server Client Server
HTTP/1.0 HTTP/1.1 with
pipelining
HTTP/2.0 with server push
(without interleaving)
Time
- push.html
- style.css
- image.png

21. (2) Simple exchange with Server push
• Second scenario
̶ Based on the client-initiated request,
the server will send pushed responses
(along with corresponding “promised”
requests)
• How the HTTP/2 works
̶ The pushed response is always
associated with an explicit request.
̶ The server then sends the
PUSH_PROMISE frame via the stream
of the client-initiated request.
21
Flowchart of a request/response
exchange with Server push
Client Server
Time

22. (2) Simple exchange with Server push
• How the HTTP/2 works
̶ This PUSH_PROMISE frame includes
promised request and indicates the stream
in which pushed respond is delivered
̶ Without the acknowledgement of the
PUSH_PROMISE, the client sends
immediately the pushed response
̶ To start a new push stream, a HEADERS
frame is sent to the client, followed by
DATA frames
22
Flowchart of a request/response
exchange with Server push
Client Server
Time
…

23. (1) Request/Response exchange
• Stream termination
̶ If the client does not want to receive the pushed response, it will simply
cancel the stream by sending a RST_STREAM frame
23
Note: The client must prepare to receive unexpected
frames that the server had sent and had queued to
send before the RST_STREAM frame arrival
Client Server
Time
Client
Time that the server stops sending data
Time that the client sends RST_STREAM
Time that the last DATA frames arrival
…

24. (2) Simple exchange with Server push
• The state changes in a pushed stream
idle
open
half closed
(remote)
half closed
(local)
closed
send ESrecv ES
send H/
recv H
send ES /
recv R/
send R
recv ES /
recv R/
send R
send R/
recv R
Server side
H: HEADERS frame (with implied CONTINUATION)
PP: PUSH_PROMISE frame (with implied CONTINUATION)
ES: END_STREAM frag
R: RST_STREAM frame
Client side
reserved
(remote)
reserved
(local)
send H recv H
recv R/
send R
send PP recv PP
recv R/
send R
24

25. 25Source: https://http2-push.appspot.com/

26. (3) Multiple concurrent exchanges
• Multiple concurrent streams:
̶ The more important resources should be given the higher priorities.
The order in which files are sent is based on Stream dependencies.
̶ Among all streams that have the same level, the streams having
higher Weight receive more resources.
̶ The Stream dependency and Weight are only suggestions by the
receiver
• Dependency tree
26
Stream 0
Stream 3 Stream 9
Stream 5 Stream 7
w=1 w=2
w=1 w=2
̶ The stream dependencies
and weight of all streams are
represented as a dependency
tree, which can be changed
by the receiver

27. (3) Multiple concurrent exchanges
̶ The scheduling streams are only for
active streams (i.e. the streams have
some data to send)
̶ The number of concurrent streams is set
by the client via SETTINGS frame. If this
number is equal to zero, the connection
is stalling.
• First examples
27
Stream 3
HEADERS
Stream 5
HEADERS
Stream 3
DATA
Stream 5
DATA +ES
Stream 3
DATA +ES
- index.html (stream 3)
- style.css (stream 5)
• The client decides stream dependency via HEADERS frames
• If streams 3 and 5 are active, all frames of stream 3 are sent to the client, followed
by those of stream 5
Stream 3
HEADERS
Stream 5
HEADERS
Stream 0
Stream 3 Stream 9
Stream 5 Stream 7
w=1 w=2
w=1 w=2

28. (3) Multiple concurrent exchanges
• Second example
28
Stream 0
Stream 3 Stream 9
Stream 5 Stream 7
w=1 w=2
w=1 w=2
#5
100B
#9
100B
#9
100B
#7
100B
#9
100B
#9
100B
#7
100B
#9
100B
#9
100B
#5
100B
When streams 5, 7 and 9 are active, the server should
send their frames as above
• Left subtree: Right subtree = 1:2
• In the left subtree, Stream 5 : Stream 7 = 1:2
Time

29. (3) Multiple concurrent exchanges
29

30. (3) Multiple concurrent exchanges
30

31. (3) Multiple concurrent exchanges
31

32. 32

33. Conclusions
• We already introduced HTTP/2 and basic concepts of HTTP/2
• We also explained how HTTP/2 works via the three scenarios
̶ Simple Request/Response exchange
o Flow control
̶ Simple exchange with server push
o Server push
o Stream termination
̶ Multiple concurrent exchanges
o Prioritization
33

34. 34

35. (1) Request/Response exchange
• The second example in the first scenario:
̶ A client wants to send an image to the server
• How the HTTP/2 works
̶ The client initiates a new stream and sends the request using
HEADERS, CONTINUATION or DATA frames.
̶ Note that all stream start with one HEADERS frame
POST /upload HTTP/1.1
Host: www.example.org
Content-Type: application/jpeg
Content-Length: 123
{binary data}
HEADERS frame
- END_STREAM
- END_HEADERS
:method = POST
:path = /resource
:scheme = https
HTTP/2HTTP/1.1
CONTINUATION frame
+ END_HEADERS
content-type = image/jpeg
host = example.org
content-length = 123
DATA frame
+ END_STREAM
{binary data}
1) Header fields are compressed
to avoid header-related
overhead
2) There is no interleaved frames
between HEADRES and
CONTINUATION frames
35