Several handshakes in front end



During the period of unemployment, I have nothing to do. I read the book “how to connect the Internet” and two booksHTTPRelated columns.

On the one hand to supplement professional knowledge, on the other hand is to prepare for job hopping interview.

To avoid forgetting, I drew oneXMindPicture:

Several handshakes in front end

There are too many problems worthy of further study. Let’s talk about them firstWebSeveral handshakes in English

Several handshakes in front end

1. More than one handshake

Several handshakes in front end

In the early days of network transmission, there were many problemsTCPThe protocol needs a handshake process, but the early protocol has a defect: the communication can only be initiated by the client, and the server can not push information to the client.

thereforeWebSocketThe agreement was born in 2008 and became an international standard in 2011. All browsers already support it.

And withSSL/TLSThe Security version of network protocol has existed for a long timeHTTPSIt is also a burst of development.

In the end, the handshake in the front-end field is divided into three parts

  1. TCPThree handshakes, returnHTTP
  2. TLSShake hands, returnHTTPS
  3. WebSocketHandshake, based onTCPProtocol, it works.

2. TCPThe ultimate significance of three handshakes

In my previous article: “Zhenxiang warning” revisits TCP / IP protocol and three handshakes

I’ve also talked about it in detailTCPI shook hands three times, but I didn’t realize what it meant.

Just like everyone else, I will only remember before the interview and forget afterwards.

Until I saw a passage in how the Internet connects:

**In the actual communication, the serial number does not start from 1, but needs to calculate an initial value with a random number
If the serial numbers start from 1, the communication process will be very easy to predict, and someone will use this to launch an attack.<br/><br/>But if the initial value is random, then the other party can’t figure out what the sequence number is from
Therefore, it is necessary to inform the communication object of the initial value before sending and receiving data. **

Several handshakes in front end

You taste, you taste. Isn’t shaking hands three times to test each other’s Secret signals to determine whether they are the right person?

2.1 knowledge supplement: the maximum length of a network packet

Calculate the data length that each network packet can hold, and the protocol stack will calculate the data length according to aMTUTo judge.

MTURepresents the maximum length of a network packet. In Ethernet, it is generally the maximum length1500byte

MTUIs the total length that contains the head, so you need toMTUSubtracting the length of the header, the length obtained is the maximum data length that a network packet can hold. This length is calledMSS

Several handshakes in front end

Several handshakes in front end

As can be seen from the above two figures,MSSThe value is1460(1500-40)Bytes, where:

  1. TCPFixed head20Bytes.
  2. IPFixed head20Bytes.
  3. TCPThe longest head can reach60Bytes.

3. TLShandshake:HTTPSThe core of

Several handshakes in front end

HTTPSIt’s actually a very simple agreement,RFCThe document is very small, only seven pages long, which specifies the new protocol name“https”The default port number is 443. As for other request response modes, message structures, request methodsURI, header fields, connection management and so on are all fully usedHTTPNothing new. —-PerspectiveHTTPAgreement

If you are interested, you can have a look here…

3.1 TLS/SSLWhat is it?

Several handshakes in front end

A lot of people see itTLS/SSLThis pair of words began to be encircled. In fact, these two things are the same thing:

Several handshakes in front end

1999Name changed inSSL 3 === TLS 1.0

What is the most widely used at presentTLS 1.2:

TLSIt consists of several sub protocols, such as record protocol, handshake protocol, warning protocol, change password specification protocol, extension protocol, etc.

becauseTLS/SSLThe protocol is located between the application layer and the transport layer TCP protocol.TLSThe rough division can be divided into two layers

  1. Handshake protocol close to application layerTLS Handshaking Protocols
  2. Record layer protocol close to TCPTLS Record Protocol

It’s too much to write in this space. Let’s take care of it firstTLSShake hands.

3.2 TLS handshakeDetailed explanation

When does TLS handshake occur? :

  1. Every time a user passesHTTPSWhen you navigate to a web site and the browser first begins to query the site’s original server, this is doneTLShandshake.
  2. Whenever any other communication is usedHTTPS(includingAPICall andHTTPSThis also happens when you query the DNS on theTLShandshake.
  3. Occurs when a TCP connection is opened by a TCP handshakeTLShandshake.

What happens during the TLS handshake?

Several handshakes in front end

stayTLSDuring the handshake, the client and the server perform the following operations together:

  • Specify the TLS version to be used (TLS 1.0, 1.2, 1.3, etc.)
  • Determine which encryption suites will be used.
  • The identity of the server is verified by the public key of the server and the digital signature of the SSL certification authority
  • After the handshake, a session key is generated to use symmetric encryption

The encryption suite determines the handshake mode:

Excerpt from: detailed explanation of SSL handshake process in the chapter of HTTPS
stayTLSThere are two main types of handshakes: one based onRSABased onDiffie-Hellman. The main difference between the two handshakes lies in key exchange and authentication.

Secret key exchange Authentication
RSA handshake RSA RSA
DH handshake DH RSA/DSA

The mainstream handshake types are basically based onRSASo the following explanation is based on RSAShake hands.

The whole process is as follows:
Several handshakes in front end
Specific process description:

  1. clienthello: the client initiates a handshake by sending a “hello” message to the server. The message will include the TLS version supported by the client, the encryption suite supported, and a random byte string called “client random.”.
  2. The serverhello: for reply clienthelloMessage, the server sends a message containing the server’sSSLCertificate, the encryption suite selected by the server and “server random number”, another random byte string generated by the server.
  3. The client sends the pre master key of public key encryption.
  4. The server decrypts the encrypted pre master key with its own private key.

    • clientfinished: the client sends a finish message, which is encrypted with the session key.
    • The serverfinished: the server sends a finish message encrypted with the session key.
  5. The handshake is completed, and then the master key is used to encrypt and decrypt.

There is only encryption suite, and the explanation needs to be based on packet capture. Another day, another day I will talk about…

Several handshakes in front end

4. WebSockethandshake

Several handshakes in front end

WebSocketThe protocol is relatively simple to implement. It usesHTTPThe protocol makes an initial handshake. After a successful handshake, the connection is established,WebSocketBasically, raw TCP is used to read / write data.

IllustrationHTTP》The pictures in this book are quite clear:

Several handshakes in front end

The specific steps are as follows:

  1. Client request:
  GET /chat HTTP/1.1     
Upgrade: websocket     
Connection: Upgrade     
Sec-WebSocket-Key: x3JJHMbDL1EzLkh9GBhXDw==     
Sec-WebSocket-Protocol: chat, superchat     
Sec-WebSocket-Version: 13     
  1. Server response:
    HTTP/1.1 101 
Switching Protocols     
Upgrade: websocket     
Connection: Upgrade     
Sec-WebSocket-Accept: HSmrc0sMlYUkAGmm5OPpG2HaGWk=     
Sec-WebSocket-Protocol: chat

4.1 WebsocketFull duplex communication

WebsocketThe protocol solves the problem of full duplex communication between server and client.

What is simplex, half duplex, full duplex communication?

type ability
Simplex One way transmission of information
Half duplex Information can be transmitted in both directions, but not at the same time
full duplex Information can be transmitted in both directions at the same time

4.2 WebsocketandSocketdifference

You canWebSocketImagineHTTPApplication layer),HTTPandSocketWhat’s the relationship,WebSocketandSocketThat’s what it’s about.

1. WebSocketAndHTTPThe relationship between


  1. It’s all the sameTCPAll of them are reliable transport protocols.
  2. They are all application layer protocols.


  1. WebSocketIs a two-way communication protocol, simulationSocketProtocol, which can send or receive information in both directions.HTTPIt’s one-way.
  2. WebSocketA handshake is needed to establish a connection.

2. SocketWhat is it?

SocketIs the application layer andTCP/IPThe intermediate software abstraction layer of protocol family communication is a set of interfaces.

In design patterns,SocketIn fact, it’s a facade model, which integrates complexTCP/IPProtocol family hidden inSocketAfter the interface, for the user, a simple set of interfaces is the wholeSocketTo organize data to meet specified protocols.

Several handshakes in front end

4.1 expand knowledge:Socket.IOSeven layers of demotion

stayGolangJava SpringAnd so on,websocketThere is a set of implementationAPI
Several handshakes in front end

Socket.IOIt consists of two parts

  1. A server is used to integrate (or mount) toNode.JS HTTPThe
  2. A client loaded into the

Many people think thatSocket.IOjustWebSocketandXHRLong polling.

actually,Socket.ioThere are many transmission mechanisms:

1. WebSockets 
2. FlashSocket 
3. XHR long polling
4. XHR partial flow: multipart / form data
5. XHR polling
6. Jsonp polling
7. iframe

Thanks to so many transmission mechanisms,Socket.ioDon’t worry about compatibility at all.

5. Extension:HTTPSAndHTTPCore differences

It saysSocketWhat is it?One thing I forgot to say:

HTTPSAndHTTPThe core difference lies in two points

  1. holdHTTPThe underlying transport protocol consists ofTCP/IPIt was replaced bySSL/TLS
  2. Sending and receiving messages are no longer usedSocket APIInstead of calling a dedicated security interface.

Specific differences:

  1. HTTPSThe agreement needs to be completedCAApply for certificate, general free certificate is very few, need to pay.
  2. HTTPIt’s hypertext transfer protocol, and information is transmitted in plaintext,HTTPSIs a secure SSL encryption transmission protocol.
  3. HTTPandhttpsIt uses completely different connection methods and different ports. The former is the same80The latter is443
  4. HTTPThe connection is simple and stateless.HTTPSThe agreement is made bySSL+HTTPThe network protocol constructed by the protocol can carry out encrypted transmission and identity authenticationHTTPProtocol security.

Postscript and quotation

This article quotes a lot of materials and columns

1.Detailed explanation of SSL handshake process in HTTPS
2. [how is the network connected? — Hu genqin] ()
3. [diagram HTTP – Ueno publicity] ()
4. [perspective HTTP protocol — Luo Jianfeng] ()
5.《What Happens in a TLS Handshake?》

  1. 《How to Use Websockets in Golang: Best Tools and Step-by-Step Guide》

In my brain map, I summarized eight kinds ofHTTPThe core issue.
Several handshakes in front end

As the front end of a career change, understand theseHTTPIt’s a painful and interesting process. If you want to scan the brain map, you can add the code to me or the official account reply:HTTP

❤️ After three things

If you think this article is enlightening to you, I’d like to invite you to do me three small favors:

  1. Like, so that more people can see this content (collection is not like, are playing hooligans-_ -)
  2. Pay attention to “front end persuasion” and share original knowledge from time to time.
  3. Also look at other articles

Personal wechat:huab119

You can come to me, tooGitHubTake the source files of all the articles in the blog:

Front end persuasion Guide…
Play together. ~

Recommended Today

Practice of query operation of database table (Experiment 3)

Following the previous two experiments, this experiment is to master the use of select statements for various query operations: single table query, multi table connection and query, nested query, set query, to consolidate the database query operation.Now follow Xiaobian to practice together!Based on the data table (student, course, SC, teacher, TC) created and inserted in […]