HTML5 data push SSE principle and application development, html5sse

HTML5 data push SSE principle and application development, html5sse

JavaScript expresses behavior and CSS expresses appearance. Note that HTML not only expresses structure (logical structure), but also expresses content (data itself). When data needs to be updated, the structure does not need to be updated, it is this kind of demand that does not change the organizational structure that only changes the data, which promotes the generation of data pulling and data push technologies.

SSE is an HTML5 technology that allows the server to push new data (data push for short) to the client. Data push has two alternative solutions: No update solution and data pulling solution. Http://tieba.yunxunmi.com/tieba-html5.html

No update solution:

After loading HTML, you can get an HTML page. Then, the browser will request images, CSS files, and JavaScript files. They are static files that can be cached by the browser. If the page uses backend languages, such as PHP, Ruby, and Python, to dynamically generate HTML for users.

Data pulling scheme:

The browser requests or updates all data to the server based on some user behaviors, after a certain period of time, or based on a certain trigger scheme, you can use javascript or a meta tag to reload the entire page. The Ajax technology we are familiar with is only used to request the latest data. When receiving the data, the javascript function will use it to partially update the DOM. Data pulling essentials: only pull new data, and only update the affected part of the page.

None of the above is data push. Data push is not a static file, nor does it involve a browser sending a request to update data. The server selects a client to send new data.

When the data source has new data, the server can immediately send it to one or more clients, instead of waiting for the client to request it, these new data may be sudden news, the latest stock, chat information of online friends, new weather forecasts, and the next step in strategy games.

SSE is suitable for frequent updates, low latency, and data is from the server to the client. It differs from WebSocket:

1) convenience. No new components need to be added, and you can continue using the backend languages and frameworks that you are used to without worrying about creating a new virtual machine with a new IP address or port number. Http://tieba.yunxunmi.com/tieba-html5.html

2) The server side is concise. Because SSE can operate on the existing HTTP/HTTPS protocol, it can directly run on the existing proxy server and authentication technology.

The biggest advantage of WebSocket over SSE is that it is bidirectional communication, which means that the server sends data as easily as receiving data from the server, SSE transfers data from the client to the server through an independent Ajax request. Therefore, compared with WebSocket, Ajax increases the overhead. Therefore, if you need to transmit data to the server once per second or faster, you should use WebSocket.

The Code is as follows:

Html code

<! Doctype html> 
It should be noted that it is best to check the data on the server to prevent potential javascript injection attacks.
Php code
<?php    header('Content-Type: text/event-stream');    header('Cache-Control: no-cache');    $time = date('r');    echo "data: The server time is: {$time}\n\n";    flush();?>
"Content-Type: text/event-stream" is a MIME Type specially designed for SSE,
Effect

When data push is wrong selection http://tieba.yunxunmi.com/tieba-html5.html
First, consider the static situation, without introducing data push. Whenever a user opens a page, an I socket connection is opened between the browser and the server, and the server mobile phone information is then returned to the user, it may be very simple, just like loading a static HTML file or image from a disk, it may be very complicated, just like running a background language to connect to many databases. The key point here is that once the required information is returned, the socket will be closed, and each HTTP request will open a socket connection with a relatively short life cycle, these sockets are limited resources on the server. Each time they complete a set task, they are recycled for reuse.
Now let's take a look at data push. A request will never be completed, and there is always a lot of information to be sent, so the socket will remain open. Obviously, because they are limited resources, there is a limit on the number of SSE connections at the same time.
Imagine that you are providing telephone service support for your latest application. There are 10 wiring center employees who provide services for 1000 users. When users encounter problems, one of them is wiring, and then wire it. New customer calls are queued and one of the operators is offline. This is a typical network service mode.
However, a customer said that I have no problem, but I will use your product in the next few hours. If you have any problems, I hope you will reply immediately. This customer will keep talking with the operator for several hours, so 10% of the call center's service resources will be wasted. If there are 10 such customers, the other 990 customers will not be able to call. This is the data push mode.
Of course, this is not always a bad thing. If the customer has a problem every few seconds in the afternoon, it will not waste 10% of service resources but increase the number of calls. Because each problem requires a new call (just like Data pulling), the operator needs to spend extra time verifying the customer's identity and calling out the account to reduce service efficiency. Keeping the phone number not only improves customer satisfaction, but also improves call center efficiency. This is the most suitable scenario for data push.

Massive technical articles: http://tieba.yunxunmi.com/
Cloud search http://so.yunxunmi.com/make search simpler with html5 full support for mobile phones and PCs


More html5 related: http://tieba.yunxunmi.com/tieba-html5.html