Skip to content

Changes

Page history
Update S12: HTTP protocol authored by Rodrigo's avatar Rodrigo
Hide whitespace changes
Inline Side-by-side
S12:-HTTP-protocol.md
View page @ 5ab87339
![](https://github.com/davidrol6/2021-2022-PNE/raw/master/s12-http-1/Cover/Cover2.png)
![](https://gitlab.etsit.urjc.es/rperez/pne-wiki/-/raw/master/s12-http-1/Cover/Cover.png)
# Session 12: HTTP protocol
......@@ -28,30 +28,31 @@
* [Response with HTML contents](#response-with-html-contents)
* [HTML](#html)
* [Exercises](#exercises)
* [Exercise 1](#exercise-1)
* [Exercise 1](#exercise-1)
* [Exercise 2](#exercise-2)
* [Exercise 3](#exercise-3)
* [Exercise 4](#exercise-4)
* [Exercise 3](#exercise-3)
* [Exercise 4](#exercise-4)
* [End of the session](#end-of-the-session)
* [Credits](#credits)
* [License](#license)
* [License](#license)
# Introduction to the HTTP protocol
* [HTTP protocol](https://en.wikipedia.org/wiki/Hypertext_Transfer_Protocol) is the language spoken between a **browser** (client) and a **web server**
* This is our **general scenario**, in which there is a communication between one client and one server. As we already know, there are two kinds of sockets: one just for listening to new connection on the server (Red dot), and others for interchanging data between the client and the server (blue dots)
![](https://github.com/myTeachingURJC/2018-19-PNE/raw/master/wiki/s11-http/src/client-server-sockets.svg?sanitize=true)
![](https://gitlab.etsit.urjc.es/rperez/pne-wiki/-/raw/master/s12-http-1/client-server-sockets.svg?sanitize=true)
## Test
* [Test1](https://fpgawars.github.io/LOVE-FPGA/Web-components/Led/led.html)
* [Test2](https://fpgawars.github.io/LOVE-FPGA/Web-components/Eye/eye.html)
* [Test1](https://fpgawars.github.io/LOVE-FPGA/Web-components/Led/led.html)
* [Test2](https://fpgawars.github.io/LOVE-FPGA/Web-components/Eye/eye.html)
## Requesting a web page
Let's understand what is happening when a **browser** connects to a **web server** for viewing a **web page**. This is the **initial scenario**:
![](https://github.com/myTeachingURJC/2018-19-PNE/raw/master/wiki/s11-http/src/client-server-sockets-web-0.svg?sanitize=true)
![](https://gitlab.etsit.urjc.es/rperez/pne-wiki/-/raw/master/s12-http-1/src/client-server-sockets-web-0.svg?sanitize=true)
The client is the **browser** running in our device (computer, mobile, tablet...). the server is running in another computer on the internet. It is waiting for the clients to connect
......@@ -59,7 +60,7 @@ The client is the **browser** running in our device (computer, mobile, tablet...
When we write an **URL** in the browser, we are requesting a web page from the server. The client creates a **socket** and **establish a connection** with the server. The server creates a new **socket** (clientsocket) for **interchanging data** with the **client** (in both directions). The original sockets continues listening for new connections
![](https://github.com/myTeachingURJC/2018-19-PNE/raw/master/wiki/s11-http/src/client-server-sockets-web-1.svg?sanitize=true)
![](https://gitlab.etsit.urjc.es/rperez/pne-wiki/-/raw/master/s12-http-1/src/client-server-sockets-web-1.svg?sanitize=true)
Now the client and server can **communicate** by means of the "blue" sockets. When they **write** to the sockets, the data is **sent**. When they **read** from them, the data is **received**. There is a **bidirectional communication** channel established
......@@ -67,29 +68,29 @@ Now the client and server can **communicate** by means of the "blue" sockets. Wh
The client takes the initiative (always) and sends a **request message** for obtaining the **web page** that the user wants to see
![](https://github.com/myTeachingURJC/2018-19-PNE/raw/master/wiki/s11-http/src/client-server-sockets-web-2.svg?sanitize=true)
![](https://gitlab.etsit.urjc.es/rperez/pne-wiki/-/raw/master/s12-http-1/src/client-server-sockets-web-2.svg?sanitize=true)
### Step 3: The server reads the page from the disk
The server receives the **request message** and reads the **html file** from the **hard disk**
![](https://github.com/myTeachingURJC/2018-19-PNE/raw/master/wiki/s11-http/src/client-server-sockets-web-3.svg?sanitize=true)
![](https://gitlab.etsit.urjc.es/rperez/pne-wiki/-/raw/master/s12-http-1/src/client-server-sockets-web-3.svg?sanitize=true)
### Step 4: The server sends a response message
The server builds a **response message**, composed of different fields. The HTML contents are located in the end of the message
![](https://github.com/myTeachingURJC/2018-19-PNE/raw/master/wiki/s11-http/src/client-server-sockets-web-4.svg?sanitize=true)
![](https://gitlab.etsit.urjc.es/rperez/pne-wiki/-/raw/master/s12-http-1/src/client-server-sockets-web-4.svg?sanitize=true)
### Step 5: The browser renders the page on the screen
The client receive the **html content** and shows it on the screen
![](https://github.com/myTeachingURJC/2018-19-PNE/raw/master/wiki/s11-http/src/client-server-sockets-web-5.svg?sanitize=true)
![](https://gitlab.etsit.urjc.es/rperez/pne-wiki/-/raw/master/s12-http-1/src/client-server-sockets-web-5.svg?sanitize=true)
## HTTP messages
There are two types of messages in HTTP: **Request** and **response**. They both have the **same format**: They consist of **Lines in plain text** (strings) separated by the **special character** '\n'
There are two types of messages in HTTP: **Request** and **response**. They both have the **same format**: They consist of **Lines in plain text** (strings) separated by the **special character** '\\n'
The lines are divided into two parts: the **heather** and the **body**. There is a **blank line** for separating both elements
......@@ -116,7 +117,7 @@ GET /directory/other/file.html HTTP/1.0
And this is an **example** of a real message:
![](https://github.com/myTeachingURJC/2018-19-PNE/raw/master/wiki/s11-http/src/http-request-message-example.svg?sanitize=true)
![](https://gitlab.etsit.urjc.es/rperez/pne-wiki/-/raw/master/s12-http-1/src/http-request-message-example.svg?sanitize=true)
In this example, there is no body (it is empty)
......@@ -143,7 +144,7 @@ HTTP/1.0 200 OK
This is an **example** of a response message:
![](https://github.com/myTeachingURJC/2018-19-PNE/raw/master/wiki/s11-http/src/http-request-response-example.svg?sanitize=true)
![](https://gitlab.etsit.urjc.es/rperez/pne-wiki/-/raw/master/s12-http-1/src/http-request-response-example.svg?sanitize=true)
# Creating our first HTTP server
......@@ -151,7 +152,7 @@ Let's create our **first HTTP server**, step by step, learning while doing
## Starting point: The echo server
We start from a **simple server**, from the previous week, that just **receives the request message** and print it on the console: The **echo server**. It does no generates a response yet
We start from a **simple server**, from the previous week, that just **receives the request message** and print it on the console: The **echo server**. It does no generates a response yet
**Create** the **Session 12 folder** and the **new** python file **echo-server.py**. Copy & paste the following code
......@@ -206,7 +207,6 @@ while True:
# -- Close the socket
cs.close()
```
First, let's check that our **server** is **working fine**. From the **linux console** we send a message to the server using the **printf** and **nc commands**:
......@@ -246,7 +246,7 @@ But... our server **has received** the **request messages** from the **browser**
![](https://github.com/myTeachingURJC/2019-2020-PNE/raw/master/s12-http-1/echo-server-03.png)
**Notice** that there appear **many** request messages (all the same). This is because we have not generate a response to the client's request messages. The browser **re-sends** the request messages many times, until there is a **timeout** and the browser writes an **error message**
**Notice** that there appear **many** request messages (all the same). This is because we have not generate a response to the client's request messages. The browser **re-sends** the request messages many times, until there is a **timeout** and the browser writes an **error message**
This is the **request message** received from the browser:
......@@ -267,7 +267,7 @@ Have a look at the first line:
GET / HTTP/1.1
```
The browser is asking our server for the **/** object. It means the **main page. The HTTP version used is 1.1
The browser is asking our server for the **/** object. It means the \*\*main page. The HTTP version used is 1.1
## Sending a simple response message
......@@ -279,7 +279,8 @@ Our **response message** should have the following format:
```
HTTP/1.1 200 OK\n
```
```
* The **header** should contain at least two elements:
* **Content-Type:** This is for indicating the type of content return by the server. It will be typically **text/html** (but can also be image/png in the case of sending back an image in png format)
* **Content-Length:** It indicates the **total length** of the information sent in the **body** of the response
......@@ -401,13 +402,13 @@ The server is asking for the resource **/favicon.ico**. The [favicon](https://en
## curl: Watching the http messages
The Linux command **curl** allow us to watch both the http **request** and **response messages**. Run the **web-server-1.py** and **execute** the following command on the **Linux Console**:
The Linux command **curl** allow us to watch both the http **request** and **response messages**. Run the **web-server-1.py** and **execute** the following command on the **Linux Console**:
```
curl 127.0.0.1:8080 -v
```
The messages that start with the **\>** symbol are the **requests:** from the client to the server. The messages with the **\<** symbol are the responses: from the server to the client
The messages that start with the **>** symbol are the **requests:** from the client to the server. The messages with the **<** symbol are the responses: from the server to the client
![](https://github.com/myTeachingURJC/2019-2020-PNE/raw/master/s12-http-1/curl-01.png)
......@@ -512,7 +513,6 @@ while True:
# -- Close the socket
cs.close()
```
Now we will see a **different page** in the browser:
......@@ -525,7 +525,7 @@ If we test it with the curl command:
curl 127.0.0.1:8080 -v
```
We will see that now the ****Content-Type header of the response message is different. Its new value is **"text/html"** because the server is returning an html document
We will see that now the \*\*\*\*Content-Type header of the response message is different. Its new value is **"text/html"** because the server is returning an html document
![](https://github.com/myTeachingURJC/2019-2020-PNE/raw/master/s12-http-1/web-server-02.png)
......@@ -547,8 +547,8 @@ We will see that now the ****Content-Type header of the response message is diff
</html>
```
* **HTML documents** should always start with the special tag: \<!DOCTYPE html\>
* The rest of the html code is inside the **\<html\>** and **\</html\>** tags
* **HTML documents** should always start with the special tag:
* The rest of the html code is inside the and tags
* Every html document consist of two parts: the **head** and the **body**
* The **head** contains information for the browser, about the document
* The actual content is located in the **body**
......@@ -568,14 +568,14 @@ All the exercises and experiments performed during this session should be stored
* **Filename**: Session-12/exercise-1.txt
* **Description**: A Text file in which you should write down you answers to the exercise 1
Run the **web-server-2**. Open the browser and connect to the URL: **http://127.0.0.1:8080/hello**. Answer the following questions:
Run the **web-server-2**. Open the browser and connect to the URL: [**http://127.0.0.1:8080/hello**](http://127.0.0.1:8080/hello). Answer the following questions:
* Which is the request line?
* Which is the resource name that the client is asking for? (Path)
Repeat the exercise for this URL: **http://127.0.0.1:8080/file.html**
Repeat the exercise for this URL: **http://127.0.0.1:8080/file.html**
Repeat the exercise for this URL: **http://127.0.0.1:8080/hi/there?name=virus&type=corona**
Repeat the exercise for this URL: [**http://127.0.0.1:8080/hi/there?name=virus&type=corona**](http://127.0.0.1:8080/hi/there?name=virus&type=corona)
What should be the URL that we have to write in the Browser for accessing the /dna/u5 resource?
......@@ -626,7 +626,6 @@ When you connect from the browser, you will se the Green server web page
Once it is working, modify the file **index.html** so that the message that appears is: "I am the Green Server! :-) (MODIFIED BY ME!!!!)"
## END of the session
The session is finished. Make sure, during this week, that everything in this list is checked!
......@@ -641,17 +640,15 @@ The session is finished. Make sure, during this week, that everything in this li
* [ ] web-server-Ex3.py
* [ ] web-server-Ex4.py
* [ ] index.html
* [ ] All the previous files have been pushed to your remote Github repo
# Credits
* [Juan González-Gómez](https://github.com/Obijuan) (Obijuan)
* [Alvaro del Castillo](https://github.com/acs). He designed and created the original content of this subject. Thanks a lot :-)
* Rodrigo Pérez Rodríguez
# License
![](https://github.com/Obijuan/digital-electronics-with-open-FPGAs-tutorial/raw/master/wiki/portada/attribution-share-alike-creative-commons-license.png)
![](https://gitlab.etsit.urjc.es/rperez/PNE/-/raw/master/Cover/attribution-share-alike-creative-commons-license.png)
# Links
......