This article is a summary of what can be a long reading of Illustrated HTTP. PS: This book is easy to read for front-end engineers and is a great introduction to HTTP.

By the time you read this article, I assume you already know a little bit about HTTP, URLS, common status codes, etc. Of course, this is the stuff behind AJAX/ interfaces/apis that we work with every day, so it’s common to be asked in an interview what happens when the browser enters a URL to the page and displays it in front of the user. Do you know anything about HTTP? (Interview question) Of course, there are many articles about HTTP on the web, and they are much more detailed and much better than what I have said, so this article will combine the Node HTTP module with the code to describe HTTP to deepen the impression.

HTTP is a part of the TCP/IP protocol family. TCP/IP is a part of the TCP/IP application layer, which includes FTP and DNS protocols. The other three parts, transport layer, network layer and link layer are not discussed within the scope of HTTP. Only need to know that a request made by the client, passes through the HTTP protocol packing layer and TCP protocol packing layer and IP packing layer and Ethernet packing layer again, and send express is the same, this process is called encapsulation, pack and then hit the road (through the physical transport), reached the server when it began to open the express, from outside to inside. In this process, no one can absolutely know whether the data is reliable or not, so use TCP three-way handshake (interview questions)

TCP flags SYN (Synchronize) and ACK (Acknowledgement) are used in the handshake. The sender first sends a packet with the SYN flag to the peer. After receiving the packet, the receiving end sends a packet with the SYN/ACK flag to confirm the packet. Finally, the sender sends back a packet with an ACK flag, indicating the end of the handshake. If the handshake is interrupted, the TCP protocol sends the same packets in the same order again.

To sum up:

  • Client – sends packets with the SYN flag – one handshake – Server
  • Server – Sends packets with SYN/ACK flags – Secondary handshake – Client
  • Client – sends packets with ACK flags – three-way handshake – server

Without further ado, let’s build a server using Node /v8.9.3. Step by step, this process may have a pit, search engines and official documents better match oh.

// Introduce the HTTP module

const http = require('http')

class Server {

    constructor() {

    }



    start() {

        const serve = http.createServer((req, res) => {

Res.end (' My first server ')

        })

Serve. Listen (3000, '127.0.0.1 () = > {

Console. log(' I started at http://127.0.0.1:3000 ')

        })

    }

}

// Start the server

app = new Server()

app.start()



/** two lines of code

 * const http = require('http')

 * http.createServer((req, res) => {

* res.end(' my first server ')

*})

 *     .listen(3000)

* /

Copy the code

Let’s start this server

node server.js

Copy the code

Open http://127.0.0.1:3000 to look forward to, open a look, FXXK! Chinese garbled! You are quick to think that there is a coding format problem. Node itself does not support GBK, but it does support UTF-8. Of course, we’ll leave this coding aside for now and discuss the two parameters of the callback received by http.createServer: Request, Response, request entity, and response entity. When we debug the interface, we look at the browser console network and see a request common header, response header, and request header. The request header or request header browser does a lot of work for us. It contains important information about an interface, such as formData, query, etc., like in this example:

GET / HTTP/1.1

Host: 127.0.0.1:3000

Connection: keep-alive

Cache-Control: max-age=0

Upgrade-Insecure-Requests: 1

User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/64.0.3282.140 Safari/537.36

Accept: text/html,application/xhtml+xml,application/xml; Q = 0.9, image/webp image/apng, * / *; Q = 0.8

Accept-Encoding: gzip, deflate, br

Accept-Language: zh-CN,zh; Q = 0.9

Cookie: _ga = GA1.1.937303312.1517920872; hibext_instdsigdipv2=1; _gid = GA1.1.34943646.1521164839

Copy the code

The public header is provided by the browser for easy viewing, generally is the request URL address, request method, status code and other messages; The response header, or response header, has a set of important header fields. Common ones are as follows:

HTTP / 1.1 200 OK

Content-Type: text/plain; charset=UTF-8

Date: Sat, 17 Mar 2018 02:48:41 GMT

Connection: keep-alive

Content-Length: 24

Copy the code

The response header message will tell us which version of the protocol is used, what status is it and the message ‘OK’.

Let’s start with the response header, which is the main part of our debugging interface. There is a field called Content-Type, and you are quick to think that this might solve our server’s garbled problem. Using our current server, the response header is returned without the content-Type field. And our callback has already taken the Response object, which means we can directly modify the response header to return what we want. We add this response field before res.end().

res.setHeader('Content-Type', 'text/plain; charset=UTF-8')

Copy the code

The meaning of this field is to tell the browser how to parse the returned result. This approach is called the Multipurpose Internet Mail Extension (MIME) type. We also use content-Type in post requests to submit data. For example, using AXIos, uploading data using POST requires changing the Content-Type of headers based on the backend interface. The default data format of AXIos is Request Payload, which is a JSON object. Some interfaces only support FormData, you’ll need to change your Content-Type: Application/X-www-form-urlencoded, and format your data qs.stringify(data) using qs modules. K1 =v1&ke2=v2&k3=v3 for formData; Sometimes the content-Type: multipart/form-data header is the same when uploading different types of data.

Common MIME types are as follows:

mimeTypes = {

    'css': 'text/css',

    'gif': 'image/gif',

    'html': 'text/html',

    'ico': 'image/jpeg',

    'jpeg': 'image/jpeg',

    'jpg': 'image/jpeg',

'js': 'application/javascript; charset=UTF-8',

    'pdf': 'application/pdf',

    'png': 'image/png',

    'svg': 'image/svg+xml',

    'swf': 'application/x-shockwave-flash',

    'tiff': 'image/tiff',

'txt': 'text/plain; charset=UTF-8',

    'wav': 'audio/x-wav',

    'wma': 'audio/x-ms-wma',

    'wmv': 'video/x-ms-wmv',

    'xml': 'text/xml'

}

Copy the code

Here we sort out the content of the article:

  • HTTP is a part of TCP/IP protocol family, in its application layer, is our most commonly used transport protocol; TCP three-way handshake.
  • The most important part of HTTP is the request message and response message. The header of the message, that is, the response header, contains a large amount of information and has its unique left and right.
  • MIME and Content-type.
  • External: Node starts the server; Axios, post request considerations, modifies the request headerContent-Type.qsThe module formats the submitted data.

HTTP correctly translates to hypertext Transfer protocol; Now often called Hypertext Transfer Protocol HTML is the hypertext markup language

To be continued

Please leave me a comment on GitHub. Let’s learn and improve together.