---
marp: true
paginate: true
math: mathjax
theme: buutti
title: 2. HTTP
---

# HTTP

<!-- headingDivider: 5 -->
<!-- class: invert -->

## Contents

1) What is HTTP?
2) HTTP Requests
3) HTTP Responses
4) IP address and ports 


## What is HTTP?

* **_HTTP_** (Hypertext Transfer Protocol) is a TCP/IP based communication protocol, which provides a standardized way for computers to communicate with each other
* The communication happens between a client (browser, application…) and a server
  * The client sends a **_request_**, and the server returns a  **_response_**
* HTTP is *__connectionless__*:
  * The client and server are only aware of each other during the request-response phase
  * After that, each new request is sent through a new connection

### But what is TCP/IP?

* It is known as the [Internet protocol suite](https://en.wikipedia.org/wiki/Internet_protocol_suite)
* Framework used for organizing communication protocols over the Internet
  * TCP = Transmission Control Protocol
    * Controlled stream of bytes between applications communicating via an IP network
  * IP = Internet Protocol
    * Delivering packets from host to destination with IP addresses

### HTTP structure

<div class='columns' markdown='1'>
<div markdown='1'>

![w:700](imgs/http-protocol.svg)

</div>
<div markdown='1'>

* The HTTP protocol acts as a communication bus between the web client (e.g. web browser) and the web server
* There can be multiple clients connected to the server simultaneously
* The clients are not connected to each other but only to the server
  
</div>
</div>

## HTTP requests

* HTTP defines a set of request methods
* The most common requests are `GET`, `POST`, `PUT` and `DELETE`
  * These are needed to create a basic CRUD app *(Create, Read, Update, Delete)*
* More requests are listed in the [mdn web docs](https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Methods)

| HTTP Method | Usage                | Example Use                               |
|-------------|:---------------------|:------------------------------------------|
| `GET`       | Retrieve content     | Browser fetching a webpage                |
| `POST`      | Add new data         | Submitting a form to create a new account |
| `PUT`       | Update existing data | Updating user profile information         |
| `DELETE`    | Remove existing data | Deleting a user account                   |

### Note: URI vs URL

* The website address is more formally known as the ***URL (uniform resource locator)***
  * `https://maps.google.com`
  * `https://maps.google.com/maps?q=Oulu` (includes a ***query***)
* It is a subset of an ***URI (uniform resource identifier)***
  * This identifies any type of a resource
  * `mailto:info@example.com` (an email address)
  * `https://www.example.com/index.html#date` (A section of a website)

### HTTP request format

* Request line: `<request method> <request URI>`
  * Example: `GET https://example.com/products`
* Headers (optional)
  * Example: `Date: Mon, 07 Sep 2020 08:39:33 GMT`
  * Example: `Content-Type: application/json`
* Body (optional)
  * Example in the JSON format:
    ```json
    {
      "date": "2020-09-08T11:39:34.2837813+03:00",
      "temperatureC": 11,
      "temperatureF": 51,
      "summary": "Cool"
    }
    ```

### HTTP request examples

| Method   | URI                             | Headers                          | Body                |
|:---------|:--------------------------------|:---------------------------------|:--------------------|
| `GET`    | `http://server.com/`        |                                  |                     |
| `GET`    | `http://server.com/10`      |                                  |                     |
| `POST`   | `http://server.com/users`   | `Content-Type: application/json` | `{"name": "Dan"}`   |
| `PUT`    | `http://server.com/users/2` | `Content-Type: application/json` | `{"name": "Danny"}` |
| `DELETE` | `http://server.com/users/2` |                                  |                     |


## HTTP response format

* HTTP responses have the following format:
  * Status line: `<HTTP version> <status code> <reason phrase>`
    * Example:`HTTP/1.1 200 OK`
  * Headers (optional)
    * `Date: Mon, 07 Sep 2020 08:39:33 GMT`
    * `Content-Type: application/json`
  * Body (optional)
    ```json
    {
      "date": "2020-09-08T11:39:34.2837813+03:00",
      "temperatureC": 11,
      "temperatureF": 51,
      "summary": "Cool"
    }
    ```

### HTTP status codes

* The status line of HTTP a response sent by an API should accurately describe the status of what happened on the server after each request:
  * Did the operation succeed? (`2xx` status codes)
  * Was there an error with the request? (`4xx` status codes)
    * E.g., the request line was malformed, or the server doesn't support it 
  * Did a server-side exception occur? (`5xx` status codes)
    * This is never the client's fault!

### Status codes for a CRUD app

* Your APIs should use the following status codes for responses to CRUD operations
* See [Restfulapi.net](https://restfulapi.net/http-status-codes/) and [Wikipedia](https://en.wikipedia.org/wiki/List_of_HTTP_status_codes) HTTP status code listings

| `2xx SUCCESS`      | `4xx CLIENT ERROR`   | `5xx SERVER ERROR`            |
|:-------------------|:---------------------|:------------------------------|
| `200 - OK`         | `400 - Bad Request`  | `500 - Internal Server Error` |
| `201 - Created`    | `401 - Unauthorized` |                               |
| `204 - No Content` | `403 - Forbidden`    |                               |
|                    | `404 - Not Found`    |                               |
|                    | `409 - Conflict`     |                               |

## IP and ports

### IP addresses

* Every node, or ***host*** on a computer network needs an IP (Internet Protocol) address
  * These can be public or private
  * Serves two functions: identifies and provides the location of the host
* The old 32-bit IPv4 addresses are of the form `192.0.2.1`
* The 128-bit IPv6 addresses are of the form `2001:0db8:0000:0000:0000:8a2e:0370:7334` (can be shortened to `2001:db8::8a2e:370:7334`)

### Port numbers

<!-- Note: older version in the backend-basics repo -->

* The IP address is often followed by a ***port*** number separated by a colon: `192.0.2.1:8080`
* The port number (16-bit unsigned integer) defines the port through which communication to your application happens
* Ports allow multiple applications to be located on the same host
* The client connects to this port in some server (defined by an IP address), so the client and the server are able to communicate
* Computers have several different ports at their disposal

### Reserved ports

<div class='columns' markdown='1'>
<div markdown='1'>

* Some of them are reserved and your application might not be able to assign those ports to itself
* Ports from 0 to 1023 are ***system ports***
  * There are restrictions in manually assigning applications to use them
* Generally, ports from 1024 to 65535 are available for the user to assign for applications

</div>
<div markdown='1'>

![](imgs/1-introduction-to-the-internet_1.png)

</div>
</div>

