| ... | ... | @@ -52,7 +52,7 @@ |
|
|
|
|
|
|
|
Let's understand what is happening when a **browser** connects to a **web server** for viewing a **web page**. This is the **initial scenario**:
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
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
|
|
|
|
|
| ... | ... | @@ -60,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
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
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
|
|
|
|
|
| ... | ... | @@ -68,25 +68,25 @@ 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
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
### 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**
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
### 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
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
### Step 5: The browser renders the page on the screen
|
|
|
|
|
|
|
|
The client receive the **html content** and shows it on the screen
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
## HTTP messages
|
|
|
|
|
| ... | ... | @@ -98,7 +98,7 @@ The lines are divided into two parts: the **heather** and the **body**. There is |
|
|
|
|
|
|
|
This is the **format** of the Request messages
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
The **request line** is the most important part. Here is where the client tells the server the service it needs. Consist of **three parts** separated by one space:
|
|
|
|
|
| ... | ... | @@ -117,7 +117,7 @@ GET /directory/other/file.html HTTP/1.0 |
|
|
|
|
|
|
|
And this is an **example** of a real message:
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
In this example, there is no body (it is empty)
|
|
|
|
|
| ... | ... | @@ -125,7 +125,7 @@ In this example, there is no body (it is empty) |
|
|
|
|
|
|
|
This is the **format** of the response message. It is the same than for the request message
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
The **status line** consist of **three parts** separated by spaces
|
|
|
|
|
| ... | ... | @@ -144,7 +144,7 @@ HTTP/1.0 200 OK |
|
|
|
|
|
|
|
This is an **example** of a response message:
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
# Creating our first HTTP server
|
|
|
|
|
| ... | ... | @@ -217,7 +217,7 @@ printf "Hello!" | nc 127.0.0.1 8080 |
|
|
|
|
|
|
|
We should see this message on the **server's console**, in **green** color
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
## Reading the browser's request message
|
|
|
|
|
| ... | ... | @@ -238,13 +238,13 @@ This is the **URL** of the **main page** of our server: |
|
|
|
|
|
|
|
In the **browser** we will see something like this:
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
As our server does NOT speak HTTP yet, the **browser** could **not** establish the connection with the web server. An error message is shown
|
|
|
|
|
|
|
|
But... our server **has received** the **request messages** from the **browser**. If we have a look at the **server's console**, we will see something like this:
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
**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**
|
|
|
|
|
| ... | ... | @@ -374,11 +374,11 @@ while True: |
|
|
|
|
|
|
|
Run the server and connect with the browser again. Now we can see the **answer**. Our first **mini-web server** is working!!! :-)
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
In the **server's console** in pycharm we see that there are **two request messages**:
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
This is the first one:
|
|
|
|
|
| ... | ... | @@ -410,7 +410,7 @@ 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
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
## Response with HTML contents
|
|
|
|
|
| ... | ... | @@ -517,7 +517,7 @@ while True: |
|
|
|
|
|
|
|
Now we will see a **different page** in the browser:
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
If we test it with the curl command:
|
|
|
|
|
| ... | ... | @@ -527,7 +527,7 @@ 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
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
# HTML
|
|
|
|
|
| ... | ... | @@ -547,7 +547,7 @@ We will see that now the \*\*\*\*Content-Type header of the response message is |
|
|
|
</html>
|
|
|
|
```
|
|
|
|
|
|
|
|
* **HTML documents** should always start with the special tag:
|
|
|
|
* **HTML documents** should always start with the special tag: </li>
|
|
|
|
* 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
|
| ... | ... | |
