HTTP and Server Side Programming

Download as pdf or txt
Download as pdf or txt
You are on page 1of 88

Introduction to HTTP

Topics
HTTP

HTTP/1.x

HTTP/2

HTTP/3

HTTP Request/Response Messages


HTTP
A protocol for fetching resources such as HTML documents

Foundation of any data exchange on the Web

Client-Server protocol, which means requests are initiated by the recipient,


usually the Web browser

A complete document is reconstructed from the different sub-documents


fetched, for instance, text, layout description, images, videos, scripts, and
more
HTTP Request/Response
Clients and servers communicate by exchanging individual messages (as
opposed to a stream of data)

The messages sent by the


client, usually a Web browser,
are called requests

The messages sent by the


server as an answer are called
responses
HTTP Protocol
HTTP is an application layer
protocol that is sent over TCP,
or over a TLS-encrypted TCP
connection
Components of HTTP-based Systems
Client/User-Agent

any tool that acts on behalf of the user

sends HTTP requests

most of the time the user-agent is a Web browser


Components of HTTP-based Systems
Web Server

handles client requests and provides an answer called the response


Components of HTTP-based Systems
Proxies

sit between the client and the server,

perform functions such as caching, filtering, load balancing,


authentication, and logging
HTTP Statelessness
HTTP is Stateless

there is no link between two requests being successively carried out

However, you can create sessions using HTTP Cookies which allows sharing
the same context, or the same state between requests
HTTP Request/Response Flow
When a client wants to communicate with a server it performs the following
steps
Step-1: Open a TCP Connection
The TCP connection is used to send a request(s) and receive a response
The client may open a
new connection,
reuse an existing connection, or
open multiple TCP connections to the servers
HTTP Request/Response Flow
Step-2: Send an HTTP Message

GET / HTTP/1.1

Host: developer.mozilla.org

Accept-Language: fr
HTTP Request/Response Flow
Step-3: Read the HTTP/1.1 200 OK
Response sent by Date: Sat, 09 Oct 2010 14:28:02 GMT
Server: Apache
the Server
Last-Modified: Tue, 01 Dec 2009 20:18:22 GMT
ETag: "51142bc1-7449-479b075b2891b"
Accept-Ranges: bytes
Content-Length: 29769
Content-Type: text/html

<!DOCTYPE html... (here come the 29769


bytes of the requested web page)
HTTP Request/Response Flow
Step-4: Close or reuse the connection for further requests
Evolution of HTTP
HTTP has gone through many changes

HTTP/0.9

HTTP/1.0

HTTP/1.1

HTTP/2

HTTP/3
HTTP/0.9 – The one-line protocol
Requests consisted of a single line

GET /mypage.html

The response only consisted of the file itself

<html>

A very simple HTML page

</html>
Characteristics of HTTP/0.9
Client request is a single ASCII character string

Client request is terminated by a carriage return (CRLF)

Server response is an ASCII character stream

Server response is a hypertext markup language (HTML)

Connection is terminated after the document transfer is complete


HTTP/0.9
Example
Question
Can you identify some of the limitations of the HTTP/0.9 protocol ?
HTTP/0.9: Limitations
Could not serve other documents than hypertext documents

It has GET request method only

Unable to provide metadata about the request and the response

Unable to negotiate content


HTTP/1.0: Building extensibility
HTTP Working Group (HTTP-WG) published RFC 1945, which documented the
"common usage" of the many HTTP/1.0 implementations found in the
internet
HTTP/1.0: Features
Versioning information is now sent within each request

HTTP/1.0 is appended to the GET line

The notion of HTTP headers has been introduced

both for the requests and the responses, allowing metadata to be


transmitted and making the protocol extremely flexible and extensible
HTTP/1.0: Features
Request and response headers were ASCII encoded

With the help of the new HTTP headers, the ability to transmit other
documents than plain HTML files has been added

using the Content-Type header

In addition to media type negotiation it included capabilities such as content


encoding, character set support, multi-part types, authorization, caching,
proxy behaviors, date formats, and more

The connection between server and client is closed after every request
HTTP/1.0 Example
Request line with HTTP
1
version number, followed by
request headers

Response status, followed by


2
response headers
Question
What do you think are the limitations of the HTTP/1.0 protocol ?
HTTP/1.0: Limitations
Requiring a new TCP connection per request

imposes a significant performance penalty


HTTP/1.1: Standardized protocol
The official HTTP/1.1 standard is defined in RFC 2616

The HTTP/1.1 standard resolved a lot of the protocol ambiguities found in


earlier versions

HTTP/1.1 by default leaves the connection open


HTTP/1.1
It introduced a number of critical performance optimizations:

Keepalive Connections

A connection can be reused, saving the time to reopen it numerous


times to display the resources embedded into the single original
document retrieved

Chunked Encoding Transfers

Chunked responses are now also supported


HTTP/1.1
It introduced a number of critical performance optimizations:

Byte-range Requests

Request Pipelining has been added, allowing to send a second request


before the answer for the first one is fully transmitted, lowering the
latency of the communication
HTTP/1.1
It introduced a number of critical performance optimizations:

Additional cache control mechanisms have been introduced

Content negotiation, including language, encoding, or type, has been


introduced

The addition of the Host header allowed to host different domains at the
same IP address (allowing server colocation)
HTTP/1.1: Example
1 Request for HTML file, with encoding metadata
HTTP/1.1: Example
2 Chunked response for original HTML request
HTTP/1.1: Example
3 Number of octets in the chunk expressed as an
ASCII hexadecimal number

4 End of chunked stream response


HTTP/1.1: Example
Request for an icon file made
5
on same TCP connection

6
Inform server that the
connection will not be reused
HTTP/1.1: Example
7 Icon response, followed by connection close
Question
What is the name of the header part that is added on HTTP/1.1 version to
improve the limitation of HTTP/1.0 (requiring a new TCP connection for each
request)
Question
What do you think are the limitations of the HTTP/1.X protocol ?
Limitations of HTTP/1.x
Clients need to use multiple connections to achieve concurrency and
reduce latency

Does not compress request and response headers, causing unnecessary


network traffic

Does not allow effective resource prioritization, resulting in poor use of the
underlying TCP connection
SPDY
SPDY was an experimental protocol, developed at Google

Its primary goal was to try to reduce the load latency of web pages by
addressing some of the well-known performance limitations of HTTP/1.1
SPDY
The specific project goals were the following

Target a 50% reduction in page load time (PLT)

Avoid the need for any changes to content by website authors

Minimize deployment complexity, avoid changes in network infrastructure

Develop this new protocol in partnership with the open-source


community

Gather real performance data to (in)validate the experimental protocol


SPDY
SPDY in lab condition has shown 55% reduction in page load time

As a result SPDY was supported in Chrome, Firefox, and Opera, and a rapidly
growing number of sites, both large (e.g., Google, Twitter, Facebook) and small

In effect, SPDY was on track to become a de facto standard through growing


industry adoption
SPDY and HTTP/2
Observing the trend, the HTTP Working Group (HTTP-WG) launched a new
effort

to take the lessons learned from SPDY,

to build and improve on them, and

to deliver an official "HTTP/2" standard


HTTP/2
HTTP/2 is a protocol designed for low-latency transport of content over the
World Wide Web

Improve end-user perceived latency

Address the "head of line blocking"

Not require multiple connections

Retain the semantics of HTTP/1.1


Latency vs Bandwidth impact on Page Load Time

Single digit %
perf improvement
after
5 Mbps

Linear
improvement in
page load time!
Latency vs Bandwidth impact on Page Load Time
Decreasing latency has more impact than increasing bandwidth

For Example

Decreasing RTTs from 150 ms to 100 ms have a larger effect on the speed
of the internet than increasing a user’s bandwidth from 3.9 Mbps to 10
Mbps or even 1 Gbps
HTTP/2:Streams, Messages, and Frames
The introduction of the new binary framing mechanism changes how the
data is exchanged between the client and server

Stream

A bidirectional flow of bytes within an established connection, which may


carry one or more messages

Message

A complete sequence of frames that map to a logical request or response


message
HTTP/2: Streams, Messages, and Frames
Frame

The smallest unit of communication in HTTP/2, each containing a


frame header, which at a minimum identifies the stream to which the
frame belongs
HTTP/2: Streams, Messages, and Frames
The frame is the smallest unit of communication that carries a specific
type of data—e.g., HTTP headers, message payload, and so on

Frames from different streams may be interleaved and then reassembled


via the embedded stream identifier in the header of each frame

HTTP/2 breaks down the HTTP protocol communication into an exchange


of binary-encoded frames, which are then mapped to messages that belong
to a particular stream, and all of which are multiplexed within a single TCP
connection
HTTP/2: Main Characteristics
One TCP connection
Stream
Streams are multiplexed
Streams are prioritized
HTTP/2: Main Characteristics
Binary framing layer
Prioritization
Flow control
Server push
Header compression (HPACK)
HTTP/2: Basic data flow
How many streams are there in the diagram?

How many frames?


HTTP/2: Stream Multiplexing
Advantages

Interleave multiple requests in parallel without blocking on any one

Interleave multiple responses in parallel without blocking on any one

Use a single connection to deliver multiple requests and responses in


parallel
HTTP/2: Stream Multiplexing
Advantages

Remove unnecessary HTTP/1.x workarounds for optimization, such as


concatenated files, image sprites, and domain sharding

Deliver lower page load times by eliminating unnecessary latency and


improving utilization of available network capacity
HTTP/2
Header Compression

Uses HPACK algorithm


HTTP/2: Server Push
HTTP/2: Server Push
What are the advantages of server push?
HTTP/2: Advantages of Server Push
Pushed resources can be cached by the client

Pushed resources can be reused across different pages

Pushed resources can be multiplexed alongside other resources

Pushed resources can be prioritized by the server


HTTP/2
Single TCP

Multiple Stream
HTTP/1.X vs HTTP/2 TCP Connection
Browsers Supporting HTTP/2
CanIUse

Global Usage: 97%


Limitations of HTTP/2
Can you think of any limitation of HTTP/2 protocol?
QUIC
QUIC (Quick UDP Internet Connections) is a new transport protocol for the
internet, developed by Google

QUIC solves a number of transport-layer and application-layer problems


experienced by modern web applications, while requiring little or no change
from application writers

QUIC is very similar to TCP+TLS+HTTP2, but implemented on top of UDP


QUIC
Key advantages of QUIC over TCP+TLS+HTTP2 include:

Low connection establishment latency

Improved congestion control

Multiplexing without head-of-line blocking

Forward error correction

Connection migration
HTTP/3: HTTP over QUIC
Instead of using TCP as the transport layer for the session, it uses QUIC

QUIC introduces streams as first-class citizens at the transport layer

QUIC streams share the same QUIC connection, so no additional handshakes


and slow starts are required to create new ones

QUIC streams are delivered independently such that in most cases packet loss
affecting one stream doesn't affect others.

This is possible because QUIC packets are encapsulated on top of UDP


datagrams
HTTP/3: HTTP over QUIC
Using UDP allows much more flexibility compared to TCP, and enables QUIC
implementations to live fully in user-space — updates to the protocol
implementations are not tied to operating systems updates as is the case with
TCP

QUIC also combines the typical 3-way TCP handshake with TLS 1.3's
handshake

Encryption and authentication are provided by default, and also enables


faster connection establishment
HTTP/3: HTTP over QUIC
Check the browsers supporting QUIC or HTTP/3

CanIUse
HTTP Messages
HTTP messages, as defined in HTTP/1.1 and earlier, are human-readable

In HTTP/2, these messages are embedded into a binary structure, a frame,


allowing optimizations like compression of headers and multiplexing

Even if only part of the original HTTP message is sent in HTTP/2, the
semantics of each message is unchanged and the client reconstitutes the
original HTTP/1.1 request

HTTP messages typically contain, request/response line, request/response


headers, and/or request/response body
HTTP Messages
HTTP/1.X vs HTTP/2
HTTP Request Message
HTTP Response Message
Reference
High Performance Browser Networking

HTTP | MDN

https://www.rfc-editor.org/rfc/rfc9114.html

https://www.rfc-editor.org/rfc/rfc9000.html
Introduction to
Server Side Programming
Topics
Server-Side/Backend Programming

Static/Dynamic Websites

Server-Side Web Frameworks


Web Application Architecture:
Server Side Programming
Dynamically display different data when needed, generally pulled out of a
database stored on a server and sent to the client to be displayed via some
code (e.g. HTML and JavaScript)
Web Servers
Web servers wait for client request messages, process them when they arrive,
and reply to the web browser with an HTTP response message
Static Sites
Returns the same hard-coded content from the server whenever a particular
resource is requested
Dynamic Sites
Some of the response content is generated dynamically, only when needed

HTML pages are normally created by inserting data from a database into
placeholders in HTML templates

Can return different data for a URL based on information provided by the user
or stored preferences and can perform other operations as part of returning a
response
Dynamic Sites
What can you do on the server-side?
Efficient Storage and Delivery of Information

Customised User Experience

servers can store and use information about clients to provide a


convenient and tailored user experience

Controlled Access to Content

restrict access to authorized users and serve only the information that a
user is permitted to see
What can you do on the server-side?
Store Session/State Information

server-side programming allows developers to make use of sessions

session is a mechanism that allows a server to store information on the


current user of a site and send different responses based on that
information
What can you do on the server-side?
Notifications and Communication

servers can send general or user-specific notifications through the


website itself or via email, SMS, instant messaging, video conversations,
or other communications services
What can you do on the server-side?
Data Analysis

A website may collect a lot of data about users: what they search for, what
they buy, what they recommend, how long they stay on each page

Server-side programming can be used to refine responses based on


analysis of this data
Server-Side Web Frameworks
Also known as web application frameworks

They make it easier to write, maintain and scale web applications


Server-Side Web Frameworks
Provide tools and libraries that simplify common web development tasks,
such as

route requests to the appropriate handler

make it easy to access data in the request

abstract and simplify database access

formatting output (e.g. HTML, JSON, XML)

improving security against web attacks


Some Web Frameworks
Framework Language and Environment
Django Python
Flask Python
Express.js NodeJs, Javascript
Nest.js NodeJs, Express.js/Fastify, Javascript
Deno JavaScript, TypeScript, Chrome v8, Rust
Ruby on Rails Ruby
Some Web Frameworks
Framework Language and Environment
ASP.NET .NET, C#
Micronaut Java
Quarkus Java
Spring Boot Java, Kotlin
Laravel PHP
Reference
https://developer.mozilla.org/en-US/docs/Learn/Server-side/First_steps/Introd
uction

You might also like