Computer Networking & HTTP
Tags: webdev, http, www, tcp
Published: 2020-06-13 20:48:26

**Series: How WWW works?**

WWW(World Wide Web) is so popular nowadays that apart from websites and web applications, even mobile apps and computer games won't work without it.

HTTP(Hypertext Transfer Protocol) is the _main_ protocol behind WWW and some people even use the words HTTP and WWW interchangeably.

I believe almost all web devs know about HTTP and WWW but some don't explore (or they're not taught) about another part of WWW which is computer networking. This is because computer networking is often considered as a Computer Science(academic) subject and self-taught web devs rarely need to know this.

### Computer Networking & HTTP

HTTP only defines rules for communication between server and client(internet browser) but for communication we need to connect to other computers first. That's where computer networking protocols come in.

> Internet browsers use computer networking protocols and HTTP to provide us the greatness and usefulness of WWW

`TCP/IP` and `UDP` are two popular computer networking protocols used to connect computers, so they can communicate. Both of these protocols are implemented in most of the operating systems out there. All the **DNS** and **Socket** stuff happen in these protocols.

HTTP clients leverage these computer networking protocols to connect to different HTTP servers (like Facebook's) and then talks to them in HTTP.

`TCP/IP` is the most popular computer networking protocol for WWW, so I'll be using `TCP/IP` to represent the computer networking protocol for rest of the post.

![TCP/IP Protocol with HTTP](https://dev-to-uploads.s3.amazonaws.com/i/3x0hmm0gvh6yaspy5iv1.png)

### Introduction to HTTP

HTTP is a client-server architected protocol where the client and server can share information and ask each other to do a certain task(s) using agreed-upon language.

HTTP defines words, manners, and rules for communication between client and server.

#### HTTP Request

An HTTP request is simply a *text* written using rules defined by HTTP. HTTP clients make a connection, often using `TCP/IP`, to the server for sending the HTTP request. 

Example:

```
GET / HTTP/1.1
User-Agent: Mozilla/4.0 (compatible; MSIE5.01; Windows NT)
Host: www.google.com
Accept-Language: en-us
Accept-Encoding: gzip, deflate
Connection: Keep-Alive
```

Let's see what HTTP request above tells the server(which it's being sent to).

The first line of an HTTP request is a special line called request-line. In the example above it is saying that the request is a `GET` request, to the `/` document(web page address), using `1.1` version of HTTP.

#### Headers

All the lines after the request-line (until an empty line or end of the request) are HTTP Headers(Header for singular). Headers are written in colon-separated `key:value` pairs. Headers are used to share information and/or instruct client or server to do a certain action(s). In the example above `Host` header is used to tell the server that we're looking for www.google.com (a single server can have more than one host), and other headers for other kinds of information. 

#### HTTP Response

HTTP server responds to an HTTP request, interpreting it, with an HTTP response, which is sent to the client using the connection the server received the request from. HTTP response then will be interpreted by the HTTP client.

Example:

```
HTTP/1.1 200 OK
Content-Encoding: gzip
Accept-Ranges: bytes
Age: 322343
Cache-Control: max-age=604800
Content-Type: text/html; charset=UTF-8
Date: Sat, 23 May 2020 05:20:54 GMT
Etag: "3147526947"
Expires: Sat, 30 May 2020 05:20:54 GMT
Last-Modified: Thu, 17 Oct 2019 07:18:26 GMT
Server: ECS (bsa/EB18)
Vary: Accept-Encoding
X-Cache: HIT
Content-Length: 648

<!doctype html>
<html>
...
</html>
```

*You may notice how the HTTP request and response examples are pretty similar; headers and first special line.*

The first special line in an HTTP response is called the status-line. In the example above it is saying that the response is using `1.1` version of HTTP and the HTTP status code is `200` with the phrase `OK`.

You may notice there is some content after headers and a line break; it's a response body(a request can have it too). HTTP request/response body is often interpreted as instructed in headers as in the example above, `Content-Type` header tells the client that response type is `text/html; charset=UTF-8` thus client will treat it as an HTML page.

**line break after headers indicates that headers have ended*
**custom/non-standard headers are allowed in both request and response*

### HTTP Transaction Lifecycle

backdrop: you use the internet browser to request www.google.com

1. The browser uses `TCP/IP` protocol, provided by the Operating System, to connect to www.google.com server
2. The browser prepares and sends HTTP request to the server using connection made in the previous step
3. The server receives HTTP request
4. The server interprets HTTP request and responds with HTTP response
5. The browser receives the HTTP response
6. Browser interpret HTTP response (e.g. if it's HTML; render it)


**browser is an HTTP client*
**server in the post means a web/HTTP server(there are other kinds of servers too)*


_this post is the rewrite of my last post **How HTTP works?**_


If you didn't get any concept/term from the post, ask me in the comments section.
You can follow me on [Twitter](https://twitter.com/MeInamUlHuq)