Websocket for front end interviews

My CSDN: me.csdn.net/Chad97 personal blog: Ruoduan. Cn

---

Knock on the blackboard knowledge:

websocket:

Websocket is a new HTML5 protocol, which allows the server to transfer information to the client, enabling the browser and client duplex communication. Websocket makes up for HTTP’s lack of support for persistent connections, so before we learn about WebSocket, let’s take a look at HTTP

HTTP

HTTP is an application-layer protocol used to transfer HTML files, image files, and query results. It is designed for communication between the server and the client. At work, the client opens a connection to make a request and then waits for the server to respond. The server cannot proactively send a request to the client. HTTP is a stateless protocol, meaning that the server does not keep any data between two requests. So this creates a problem, for example, in an e-commerce site, you add an item to the cart, you change pages, you add an item, there’s no connection between the two add requests, and the browser doesn’t know which item the user has selected. The solution is to add cookie information to the HTTP header so that each request shares the same state.

So what is the workflow of the HTTP request response?

1. The client connects to the Web server and establishes a TCP socket connection with the Web server’s HTTP port (80 by default). 2. Sending an HTTP request The server accepts the request and returns an HTTP response. The Web server resolves the request and locates the request resource. The server writes a copy of the resource to a TCP socket, which is read by the client. A response consists of four parts: a status line, a response header, a blank line, and response data. 4. Release TCP connection The Web server closes the TCP socket to release the TCP connection. The client passively closes the TCP socket to release the TCP connection. The client browser first parses the status line to see the status code that indicates whether the request was successful. Each response header is then parsed, and the response header tells the following is an HTML document of several bytes and the document’s character set. The client browser reads the response data HTML, formats it according to the SYNTAX of the HTML, and displays it in the browser window. I won’t talk much about HTTP, there’s too much for me to talk about. The Authoritative Guide to HTTP is a very small book that makes it very clear.

HTTPS

What is HTTPS, and what is its relationship to HTTP. We saw in the last paragraph that HTTP is the protocol we use to browse the Web. The data transmitted over HTTP is unencrypted, that is, plaintext. Therefore, it is very insecure to transmit private information over HTTP. ** In order to encrypt these private data, the SSL protocol was designed to encrypt the data transmitted over HTTP, hence the birth of HTTPS. ** Then SSL was upgraded to TLS. However, the name used for a long time also generates feelings, so has been the continuation of SSL is a synonym for HTTPS habit. The following graph will give you a good idea of the relationship between HTTP and HTTPS. Here’s a graph

So what exactly is HTTPS encryption?

The encryption process is as follows:

1, the browser will support a set of encryption rules sent to the site. 2. The website selects a set of encryption algorithms and HASH algorithms and sends its identity information to the browser in the form of a certificate. The certificate contains the website address, the encryption public key, and the authority that issued the certificate. 3, access to the website certificate after the browser to do the following work: (1) the legitimacy of the verification certificate (certificate, certificate of organization is legal, contain the website address is consistent with is on a visit to the address, etc.), if the certificate is trusted, the browser bar displays a small locks inside, otherwise it will give the certificate from the tip of the letter. (2) If the certificate is trusted, or if the user accepts an untrusted certificate, the browser generates a password of random numbers and encrypts it with the public key provided in the certificate. (3) Use the agreed HASH to calculate the handshake message, use the generated random number to encrypt the message, and finally send all the previously generated information to the website. 4. After receiving the data from the browser, the website needs to perform the following operations: (1) Use its private key to decrypt the information, take out the password, use the password to decrypt the handshake message sent by the browser, and verify whether the HASH is the same as that sent by the browser. (2) Encrypt a handshake message with a password and send it to the browser. 5. The browser decrypts and computes the HASH of the handshake message. If the HASH is consistent with that sent by the server, the handshake process is over.

websocket

After all this talk, we finally get to WebSockets. Websocket is a persistent protocol compared to HTTP. Here is a typical WebSocket handshake

GET /chat HTTP/1.1
Host: server.example.com
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: x3JJHMbDL1EzLkh9GBhXDw==
Sec-WebSocket-Protocol: chat, superchat
Sec-WebSocket-Version: 13
Origin: http://example.com
Copy the code

You can see that there is an extra header relative to the HTTP header. In fact, we can say that WebSocket borrows the HTTP handshake and is a patch for HTTP to solve a specific problem. Let’s see how the above header changes relative to the HTTP header.

Upgrade: websocket
Connection: Upgrade
Copy the code

This is the core of WebSocket, telling the server that this is a WebSocket request, not an HTTP request

Sec-WebSocket-Key: x3JJHMbDL1EzLkh9GBhXDw==
Sec-WebSocket-Protocol: chat, superchat
Sec-WebSocket-Version: 13
Copy the code

Sec-websocket-key is a Base64 enCOD value, which is randomly generated to verify that it is a true WebSocket. Then sec-websocket-protocol is a user-defined string to distinguish between the same URL, Different services require different protocols sec-websocket-version This is needless to say the WebSocket Version number. The server will return the following

HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: HSmrc0sMlYUkAGmm5OPpG2HaGWk=
Sec-WebSocket-Protocol: chat
Copy the code

Sec-websocket-accept indicates that the server confirms and encrypts the sec-websocket-key of the client. Sec-websocket-protocol Indicates the final Protocol used. What are the differences between WebSocket and HTTP when working? The following diagram shows the differences.

If it does, it returns the data. If it doesn’t, it asks the server again if it has the data I need. What about websocket? It only sets up a connection once, so the connection is not broken, and if the server has any data, it will automatically return it to the client. The other problem is that in HTTP, we mentioned that HTTP is stateless, meaning it forgets, there is no connection between the last request and this request. We need to refer to cookies to solve this. So in websockt, because it is a long connection, so this does not have to add cookie again and again, is it a lot of convenience. The following code is the application of WebSocket in the front-end code

if ('WebSocket' in window) {
  websocket = new WebSocket("Address");
} else {
    // WebSocket is not supported
}
websocket.send = ('msg')
alert(websocket.readyState) // WebSocket readiness
websocket.onerror = function(){}
websocket.onopen = function(){}
websocket.onmessage = function(){}
websocket.onclose = function(){}
Copy the code

All right, that’s it

• Add an interview question

What tools are used to exclude JS memory leaks?

• Of course, this is also my late repair of nature’s porter

1. Use the Heap Profiling tool

(1) Heap Profiling can record a snapshot of the current Heap memory and generate a description file of the object. The description file gives all the objects used by JS running at that time, as well as the memory size occupied by these objects, reference hierarchy, and so on.

(2) When javascript is running, there is stack memory and heap memory. When we create a new class, the new object is stored in the heap, and the reference to the new object is stored in the stack. The program finds the object by reference to the stack. For example, var a = [1,2,3], where a is a reference stored in the stack, and the heap holds an Array object containing [1,2,3].

3. Open the debugging tool, click the Profiles TAB in Memory, select “Take Heap Snapshot”, and click the “Start” button to Take the Heap Snapshot in current JS.

The right view lists the objects in the heap.

Constructor: the name of the class short: object to the root of reference level Distance Objects Count: the number of Objects Shallow Size: object of memory (does not contain internal reference other Objects of memory) Retained the Size: Object of the total memory (including · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · ·) click on the above the black circle in the upper left corner, there will be a second memory snapshots

2. Troubleshooting of memory leaks

Switch the box above to the Comparison option, which lists the object differences between the current view and the previous view

#Delta: number of newly created objects minus the number of objects recycled. If #Delta is positive, the closure function was created. If #Delta is not negative in multiple snapshots, the closure function was not destroyed

Update the EventSource again

www.cnblogs.com/accordion/p…

Put a link in here and call it a day