Introduction to HTML server push technology

1. Why is server push required?
 
Biggest advantage: Real-Time
 
Applicable scenarios: Real-time stock prices, product prices, real-time news, Twitter/weibo timeline, browser-based Chat Systems
 
2. How does Web interaction develop?
 
F5 manual refresh --> AJAX round robin (Polling) --> Comet real-time update --> HTML5 real-time communication
 
With the popularity of AJAX, most websites are currently updated through polling, but the efficiency of this method is very low. On the one hand, the server side does not always have data updates, therefore, each request may not always be updated. On the other hand, when the number of clients initiating a request increases, the number of requests accepted by the server increases significantly, increasing the pressure on the server.
 
In addition, the real-time polling method is not enough. For example, the Web-based chat function requires high real-time performance. Therefore, comet emerged. Comet is a server push technology based on HTTP persistent connections. It mainly supports streaming and long-polling. How Comet works: After a user initiates a request, it suspends and waits for the server to return data, during which the connection will not be closed. The difference between the stream mode and the long polling mode is that for the stream mode, when the client initiates a connection, the connection will not be disconnected, but is controlled by the server. When there is an update on the server side, the client refreshes the data and updates the data. For long polling, when the server side returns an update, the client first disconnects, processes it, And then initiates a new connection.
 
Although Comet is an improvement, it is still one-way communication and cannot adapt to the rapid development of Web applications. As a result, various new technologies are emerging, among which WebSocket has become the industry standard by Google, and constantly improving.
 
The following describes how to implement Comet.
 
3. Implementation of Comet
 
3.1 AJAX-based and IFrame-based streaming

It can be seen that the connection will not be closed for each data transmission, and the connection will only be closed when the communication error occurs or the connection is rebuilt (Some firewalls are often set to discard too long connections, you can set a timeout time on the server to notify the client to re-establish the connection and close the original connection after the timeout ).
 
3.2 AJAX-based long-polling (long-polling)
 

 
It can be seen that after the client sends a request, the server also suspends when it receives the request. When there is an update, the server returns data and disconnects the connection. Then, the client initiates a new connection.
 
4. HTML5 real-time communication
 
4.1 Server-Sent Event only supports one-way channel from Server to client
 
Server-Sent Events actually standardizes the Comet technology. The Server-Sent Events specification "defines an API to open an HTTP connection, through which notifications pushed from the Server can be obtained"
 
Server-Sent Events contains the new HTML element EventSource and the new MIME type text/event-stream. This MIME type defines the event framework format.
 
EventSource indicates the end point of the client that receives the event. The client creates an EventSource object to open an event stream. When an EventSource object is created, the object receives an event source URL as its constructor parameter. The onmessage event processor is called each time a new event data is received.
 
Server-Sent Event is based on HTTP streaming. As mentioned above, response will always open. when an event occurs on the server side, the event will be written to response.
 
4.2 WebSocket: defines the frame protocol based on TCP and supports two-way communication.
 
 
WebSocket is a new HTML5 protocol. It implements two-way communication between the browser and the server.
 
In the WebSocket API, the browser and the server only need to perform a handshake, and then a fast channel is formed between the browser and the server. Data can be directly transmitted to each other.
 
Currently, many websites use polling technologies to implement instant messaging. Round Robin is performed at a specific interval (for example, every 1 second). The browser sends an HTTP request to the server and then the server returns the latest data to the browser of the client. This traditional mode brings obvious disadvantages, that is, the browser needs to constantly send requests to the server. However, the HTTP request header is very long, the data contained in it may be a small value, which will occupy a lot of bandwidth and server resources.
 
The result of polling with newer technologies is Comet, which uses AJAX. However, although this technology can achieve two-way communication, it still needs to send requests. In Comet, long connections are widely used, which also consumes a lot of server bandwidth and resources.
 
In the face of this situation, HTML5 defines the WebSocket protocol, which can better save server resources and bandwidth and achieve real-time communication.
Author: fwj316891124