HTML5 data push SSE principle and application development

Source: Internet
Author: User

JavaScript expresses the behavior, the CSS expresses the appearance, notice that the HTML both expresses the structure (the logical structure), but also expresses the content (the data itself) usually needs to update the data, does not need to update the structure, is this does not change the organization structure only changes the data the request, has promoted the data pull and the data push technology production.

SSE is a HTML5 technology that allows server-side push of new data (referred to as data push) to the client. There are two alternatives to data push: No update scenario and a data pull scenario. http://tieba.yunxunmi.com/tieba-html5.html

No update scenario:

After loading the HTML, you get an HTML page, and then the browser requests pictures, CSS files, and JavaScript files, all of which are static files that the browser can cache. If the page uses a back-end language, such as PHP, Ruby, and Python, the language that generates HTML dynamically for the user.

Data Pull Scenarios:

The browser can request or update all data to the server based on some user behavior, or after a certain amount of time, or based on some other triggering scheme, and can command the entire page to reload via JavaScript or a meta tag. The Ajax technology we are familiar with is only used to request the latest data, and when the data is received, the JavaScript function uses it to locally update the DOM. The gist of data fetching: Only the new data is pulled, and only the affected parts of the page are updated.

None of these are data pushes, data pushes are not static files, and the browser initiates a request to update the data, and the data push is the server chooses the client to send the new data.

When the data source has new data, the server can be sent to one or more clients immediately, instead of waiting for the client to request, the new data may be breaking news, the latest stock, chat information on-line friends, new weather forecast, the next step in the strategy game.

SSE is suitable for frequent, low-latency updates and data from the server to the client. The difference between it and WebSocket:

1) convenience, do not need to add any new components, with any custom backend language and framework can continue to use, do not have to create a new virtual machine to get an IP or new port number and bother. http://tieba.yunxunmi.com/tieba-html5.html

2) server-side simplicity. Because SSE can operate on existing HTTP/HTTPS protocols, it can run directly on existing proxy servers and authentication technologies.

The biggest advantage of WebSocket compared to SSE is that it is two-way communication, which means that the server sends data as simple as receiving data from the server, and SSE typically transmits data from the client to the service side via a separate AJAX request. Therefore, using Ajax relative to websocket increases overhead. Therefore, if you need to transfer data to the server at a rate of one or more times per second, you should use WebSocket.

The specific code is as follows:

html Code

<!doctype html>

Note that it is best to check for potential JavaScript injection attacks before using server-side data.

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 designed specifically for SSE,

Effect

When data pushes is the wrong choice http://tieba.yunxunmi.com/tieba-html5.html

First consider the static situation, do not introduce data push, every time the user opens a page, between the browser and the server will open I a socket connection, the server phone information and then return to the user, it may be very simple, like loading a static HTML file from disk or a picture, can be very complex, It's like running a background language to connect a lot of databases. The key point here is that once the required information is returned, the socket is closed, and each HTTP request opens a relatively short life-cycle socket connection that is a limited resource on the server that is recycled for reuse whenever it finishes the scheduled task.

Now take a look at the data push. A request is never completed and there is always a lot of information to send, so the socket remains open. Obviously, because they are limited resources, there is a limit to the number of SSE connections at the same time.

Imagine a situation where you are providing telephone service support for your latest application, 10 Connection center staff serving 1000 users, a user experiencing a problem, one of the operators wiring, and then hanging the line. New customer calls are queued, knowing one of the operator hangs, which is typical of the network service model.

But now there is a customer who has said that I have no problem now, but the next few hours will use your products, and if you encounter problems, I hope you immediately reply. The customer will stay on the phone with the operator for a few hours, so the 10% service resources of the call center are wasted. If there are 10 such customers, then 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, this situation to keep the phone unblocked not only waste 10% of service resources, but will increase. Because each problem requires a new phone call (like data pull), the operator needs to spend extra time verifying the identity of the customer, bringing up the account and reducing the efficiency of the service. Keeping a phone is usually not only satisfying the customer, but also improving the efficiency of the call center, which is the best scenario for data push.

Massive technical article: http://tieba.yunxunmi.com/
Cloud search http://so.yunxunmi.com/makes searching easier with HTML5 full support for phones and PCs


more HTML5 Related: http://tieba.yunxunmi.com/tieba-html5.html

HTML5 data push SSE principle and application development

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.