How does the server push messages to the client?

Hello everyone, I am the front-end watermelon brother. Today, I will show you how the server pushes messages to the client.

Sometimes, we hope that the server can actively push some information to the client.However, the HTTP protocol can only allow the client to initiate a request and the server to respond, but cannot allow the server to actively send information.

To solve this problem, we have three common solutions: short polling, long polling, WebSocket.

Short Polling

Short polling means sending an HTTP request at regular intervals until the required information is obtained.

Assume that the user pays our order with the payment platform, but because the payment platform notifies our server asynchronously, the front-end page cannot get the information on whether the support is successful, and the server needs to inform the front-end.

We use short polling, probably like this:

A: Has the order been completed?

B: No.

A: (After 200ms) Has the order been completed?

B: No.

A: (200ms after receiving the request) Has the order been completed?

B: No.

…(The question and answer continued several times)

A: Has the order been completed?

B: Done.

The polling is over, so A gets the order completion information and displays the order completion UI.

Short polling is simple to implement, and the server does not need to do much special processing, but sending requests frequently will consume more bandwidth.

Long Polling

Long polling: The client sends an HTTP request, The server suspends the connection for a long time, does not return data for a long time, and does not return until the required information is obtained.

It looks like this:

A: Has the order been completed?

…(after a while)

B: Done.

This concludes the polling.

The problem with long polling is that HTTP has become a long connection, and there is no response for a long time, which may be unexpectedly closed due to insufficient resources.In extreme cases, it may also trigger a timeout error of the gateway, returning 504 Gateway timeout.These situations require some strategy to deal with.

In addition, the code implementation is also more complicated than short polling. For example, whether the order is completed, you need to monitor the status change of an order, and then notify a specific request, which is more troublesome than the short polling directly reading the data returned by the database.much more.

WebSocket

Because of the need for the server to actively push messages, the WebSocket protocol appeared.

WebSocket, like the HTTP protocol, is an application layer protocol, and the upper layer also relies on the TCP protocol of the transport layer for data transmission.

The difference is that WebSocket has a complete full-duplex capability, supports active push by the server, and has low overhead.In applications with heavy server push, such as chat rooms, WebSocket is the best choice.

The process of the browser establishing a WebSocket: first send an HTTP request, which includes the relevant header fields that the request is upgraded to WebSocket. If the server supports it, it will return a 101 status code, indicating that the protocol can be switched and a WebSocket connection can be established.

After that, the browser can obtain the active push message from the server by listening to the event.

End

Short rotation training is characterized by simple implementation and does not require much modification work.

Long polling will suspend the HTTP request and return data to the client until the state changes, which can reduce the number of requests and bandwidth, but it needs to consider the situation of unexpected shutdown, and the implementation is complicated.

The WebSocket protocol is a protocol specially invented to solve the problem of service push. It can truly realize the active push of the server and is suitable for scenarios with heavy service push.

I am the front-end watermelon brother, welcome to follow me to learn more front-end interview questions.