HTML5 's server-sent Events (SSE)

HTML5 has a server-sent Events (SSE) feature that allows the server to push data to the client. (usually called data push). Let's take a look at the simple timing diagram of traditional Web application communication:

Now, most of the Web app has Ajax, and that's what it looks like:

Based on data push, when the data source has new data, it is sent to the client immediately, without waiting for the client to request. These new data may be the most news, the latest stock quotes, chat information from friends, weather forecasts and so on.

Data pull and push function is the same, the user to get new data. But there are some advantages to data push. You may have heard of comet, Ajax push, reverse Ajax, HTTP streaming, WebSockets and SSE are different technologies. Perhaps the biggest advantage is low latency. SSE is used for Web applications to refresh data and does not require any action by the user.
You may have heard of HTML5 's websockets, which can also push data to the client. WebSockets is a more complex technology to implement the server, but it is a true full-duplex socket, the server can push the data to the client, the client can also push the data back to the server. SSE works in existence HTTP/HTTPS protocol, support proxy server and authentication technology. SSE is a text protocol you can easily debug it. If you need to send large binary data from the service side to the client, WebSocket is a better choice.

Let's take a look at a very simple example, first the front-end basic_sse.html:

<! DOCTYPE html>
The backend is first a basic_sse.php page:
<?phpheader ("Content-type:text/event-stream"); while (true) {    echo "data:". Date ("Y-m-d h:i:s"). " \ n ";    @ob_flush (); @flush ();    Sleep (1);}? >
HTML5 's server-sent Events (SSE)