Introduction to front-end implementation of message push, instant messaging, SSE, WebSocket, http

Information push

The server actively pushes messages to the client, so that the client can receive the information immediately.

Scenes

  • The page receives likes, message reminders
  • chat function
  • Barrage function
  • Real-time update data function

Implement instant messaging

short polling

The browser (client) sends http requests to the server at regular intervals, and the server responds directly after receiving the request, regardless of whether there is data update.

Essence: The client enables the client to simulate and receive data changes from the client in real time through continuous requests

Advantages: easy to understand, easy to operate

Disadvantage: If each client keeps sending requests to the server, the number of users will increase, and the number of requests will double, resulting in high pressure on the server and slow response. Not suitable for large projects or too many users.

var xhr = new XMLHttpRequest();
setInterval(function(){
    xhr.open('GET','/user');
    xhr.onreadystatechange = function(){

    };
    xhr.send();
},1000)

long polling (comet)

The server does not respond immediately after receiving the client's request. It first suspends the request, and returns a response when the data changes. When the data does not change within a certain period of time, the timer will return a response and close the connection. After the client processes the response, it sends a new round of long polling to the server again.

Pros: Fewer http requests than short polling

Disadvantage: Hanging also wastes resources

function ajax(){
    var xhr = new XMLHttpRequest();
    xhr.open('GET','/user');
    xhr.onreadystatechange = function(){
        ajax();
    };
    xhr.send();
}

Both short polling and long polling

  • Based on HTTP, both of them have their own defects; polling requires faster processing speed, and long polling requires the ability to handle concurrency
  • The server will not actively push information, but will return a response after the client sends an ajax request

Long connection (SSE)

SSE is based on the persistent connection in the HTTP protocol. As a new function of HTML5, the client does not need to send a request to the server, but directly responds to the client when the server data changes.

 See Native implementation of  SSE for Web message push at the front and back ends

see vue3  vue3 uses sse_sse vue_OneRepublicSu's Blog-CSDN Blog

see vue2  uses SSE (server sent event) in vue2

WebSocket

WebSocket is a new protocol defined by Html5, which can realize server-client full-duplex communication; the server and the client need to establish a connection. When the connection starts, the two parties exchange information in an equal state, and there is no request and corresponding relationship.

sse websocket
http protocol Independent websocket protocol
Lightweight and easy to use relatively complex
By default, disconnection and reconnection are supported Need to implement disconnection and reconnection by yourself
text transfer binary transfer
Support for custom message types sent -
Single channel, only the server can send messages to the client Dual channel, send information to each other

websocket implementation  

js realizes WebSocket
connection

http

  • Full name: Hypertext Transfer Protocol.
  • Introduction: The transmission protocol for the server to transmit hypertext to the local browser
  • Features: application layer protocol, data transmission based on TCP/IP protocol
  • https: encrypted http
  • The default port number of HTTP is 80, and the port number of HTTPS is 443.

http protocol status code

  • 1xx (information)
    • 100 Accepted request is being processed, informational status code
  • 2xx (success) The request was successfully processed
    • 200 The server has successfully processed the request
  • 3xx (Redirect) Further action is required to complete the request
    • 301 Permanent redirect, indicating that the resource has been assigned a new URL
    • 302 Temporary redirection, indicating that the resource is temporarily assigned a new URL
    • 303 indicates that there is another URL for the resource, use the GET method to obtain the resource
    • 304 (Not Modified) The requested page has not been modified since the last request. The server returns a response without returning the content of the web page
  • 4xx client errors
    • 400 The server does not understand the syntax of the request
    • 401 The request requires authentication information through HTTP authentication
    • 403 The server rejects the request
    • 404 The server cannot find the requested page
  • 5xx server errors
    • 500 The server encountered an error and could not complete the request
    • 503 The server is down for maintenance or overloaded, unable to process the request

three handshake four wave

The mechanism of the three-way handshake is to ensure that a safe and reliable connection can be established

I saw a particularly amusing example, the Public Security Bureau Chief Wang Ge and Chen Mou called

  1. Public Security Bureau: Hello! Chen, can you hear me? (one session)
  2. Chen: I heard it, Brother Wang, can you hear me (second session)
  3. Public Security Bureau: I heard you, come over and surrender yourself (start the conversation) (three conversations)

insert image description here

At the beginning, both the client and the server are in the CLOSED state. The client actively opens the connection, and the server passively opens the connection.

The TCP server process first creates a transmission control block TCB, and is always ready to accept the connection request of the client process, and the server enters the LISTEN monitoring state

  • first handshake
    • The client sends a request message to the server, with SYN=1 in the message header and initial sequence number seq=x. At this point, the TCP client process has entered the SYN-SENT synchronization sent state
    • Conclusion: the sending ability of the client is normal
  • second handshake
    • After receiving the request message, the server will send a confirmation message to the client if it agrees to the connection. The confirmation message should be ACK=1, SYN=1, the confirmation number is ack=x+1, and the sequence number seq=y. At this time, the TCP server process has entered the SYN-RCVD synchronous receiving state
    • Conclusion: Prove that the receiving and sending capabilities of the server are normal
  • third handshake
    • The client receives the message, confirms to the server, and confirms that ACK=1, ack=y+1, and sequence number seq=x+1 of the message. At this time, the TCP connection is established, and the client enters the ESTABLISHED connection state
    • Draw a conclusion: prove that the receiving ability of the client is normal

Why would the guesswork of the three-way handshake be needed?

  • When the client sends a request message to the server, it cannot be sent to the service immediately due to network and other reasons, and then the client continues to send a request to the server, and then the server successfully establishes a connection. When the connection is released, the previous request arrives at the server, and the request is no longer valid, but the server mistakenly thinks that the client has a new request and connects again, resulting in waste of resources and unnecessary errors.
  • With the three-way handshake, the invalid message is sent to the server, and the server returns to the client, and the client can determine whether to continue to establish a connection.


waved four times

  1. Zhang San: Okay, then I'll go first
  2. Li Si: Okay, then you can go
  3. Li Si: Then I'm leaving too?
  4. Zhang San: OK, let’s go

 insert image description here

After the data transfer is complete, both parties can release the connection. At the beginning, both the client and the server are in the ESTABLISHED state, then the client is actively closed, and the server is passively closed.

Once waved, the client sends a connection release message and stops sending data. Release the header of the data message, FIN=1, and its sequence number is seq=u (equal to the sequence number of the last byte of the previously transmitted data plus 1), at this time, the client enters FIN-WAIT-1 (stop waiting 1) status

After receiving the connection release message for the second wave, the server sends a confirmation message, ACK=1, ack=u+1, and brings its own serial number seq=v. At this time, the server enters the CLOSE- WAIT close wait state

After the client waved for the third time and received the confirmation request from the server, the client will enter the FIN-WAIT-2 (terminate waiting 2) state, waiting for the server to send a connection release message, and after the server sends the last data, it will send to The client sends a connection release message, and the server enters the LAST-ACK (final confirmation) state, waiting for the client's confirmation.

After the fourth waving, the client must send a confirmation after receiving the connection release message from the server, ACK=1, ack=w+1, and its own serial number is seq=u+1. At this time, the client enters TIME-WAIT (time waiting) state, but the TCP connection has not been terminated at this time, it must pass 2MSL (the longest message life), when the client revokes the corresponding TCB, the client will enter the CLOSED state, and the server After receiving the confirmation message, the terminal will immediately enter the CLOSED closed state, and the TCP connection will be disconnected here, and it will be completed by waving four times

Why is the client waiting for 2MSL?
The main reason is to ensure that the first ACK message sent by the client can reach the server, because this ACK message may be lost, and 2MSL is the longest time for any message to exist on the network. is discarded, so that the request message of the old connection will not appear in the new connection.
 

 Enter the address and press the Enter key, what did the browser do?

  • After entering the address and confirming it, the browser will resolve the domain name.
  • If the browser has a cache of DNS-related information corresponding to the domain name
    • If so, you can get the IP address of the server.
    • If not, it will go to the local host file to check whether it is configured.
      • If the host file does not configure relevant information, a DNS request will be initiated to obtain the IP address of the corresponding server. The application side will construct a DNS request message, and the application layer will call the UDP-related protocol of the transport layer for data transmission. It will add a UDP request header on the basis of DNS and then transmit the information to the network layer. The network layer will be in UDP. On the basis of the request message, add the IP request header and then go to the data link layer. The data link layer will realize the second layer addressing, and will add its own mac information and the next step obtained through the ARP protocol of the network layer. The mac information is transmitted together through the physical layer, usually to the router, and then the router, a three-layer device, will eventually be transmitted to the next router address through the operator's route, and after reaching the server, the information will be analyzed layer by layer through the same steps HTTP requests message, and then construct an HTTP response message and transmit it to the client along the same steps. After the user enters the URL and press Enter, what exactly does the browser do? _What does the browser do after the carriage return_Xiaoya's Blog-CSDN Blog

Guess you like

Origin blog.csdn.net/violetta521/article/details/131224494