search

Home >Web Front-end >H5 Tutorial >Detailed graphic explanation of HTML5 data push SSE principle and application development

Detailed graphic explanation of HTML5 data push SSE principle and application development

黄舟
黄舟Original
2017-03-08 15:23:152685browse

JavaScript expresses behavior and CSS expresses appearance. Note that HTML expresses both structure (logical structure) and content (data itself). Usually when data needs to be updated, the structure does not need to be updated. This is exactly what happens. The desire to change only the data without changing the organizational structure has promoted the emergence of data pull and data push technologies.

SSE is an HTML5 technology that allows the server to push new data to the client (referred to as data push). There are two alternatives to data push: no updates and data pull.

No update solution:

After loading the HTML, you will get an HTML page, and then the browser will request images, CSS files, JavaScript files, etc., they They are all static files that the browser can cache. If the page uses a back-end language, such as PHP, Ruby, Python and other languages ​​that dynamically generate HTML for users.

Data pull scheme:

The browser will send data to the browser based on some user behavior, or after a certain period of time, or based on some other trigger scheme. The server side requests or updates all data, and can command the entire page to reload through JavaScript or a meta tag. The familiar Ajax technology is only used to request the latest data. When the data is received, the javascript function will use it to locally update the DOM. The essence of data pulling: only pull new data, and only update the affected parts of the page.

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

When the data source has new data, the server can immediately send it to one or more clients without waiting for the client to request. These new data may be unexpected. Post news, latest stocks, chat messages from online friends, new weather forecasts, next steps in strategy games, etc.

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

1) Convenience. No need to add any new components. You can continue to use it with any back-end language and framework you are used to. There is no need to get a new IP or a new virtual machine for a new virtual machine. Trouble with the port number.

2) Simplicity on the server side. Because SSE operates on existing HTTP/HTTPS protocols, it can run directly on existing proxy servers and authentication technologies.

The biggest advantage of WebSocket over SSE is that it is a two-way communication, which means that sending data to the server is as simple as receiving data from the server, while SSE generally passes a separate Ajax request from the client to the server. Transfer data, so using Ajax will increase overhead compared to WebSocket. Therefore, if you need to transmit data to the server once per second or faster, you should use WebSocket.

The specific code is as follows:

html code

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>basic SSE test</title>
    </head>
    <body>
        <pre id = "x">initializting...
<script> var es = new EventSource("basic_sse.php"); es.addEventListener("message",function(e){ //e.data document.getElementById("x").innerHTML += "\n"+e.data; },false);//使用false表示在冒泡阶段处理事件，而不是捕获阶段。 </script>

It should be noted that: use the server It is best to check before entering the data to prevent potential JavaScript injection attacks.

php code

<?php
    header(&#39;Content-Type: text/event-stream&#39;);
    header(&#39;Cache-Control: no-cache&#39;);
    $time = date(&#39;r&#39;);
    echo "data: The server time is: {$time}\n\n";
    flush();
?>

"Content-Type: text/event-stream" is specially designed for SSE MIME type,

Effect screenshot

When data push is the wrong choice

Consider static first In this case, without introducing data push, every time the user opens a page, a socket connection will be opened between the browser and the server, and the server phone information is then returned to the user. It may be as simple as loading a page from the disk. Just like a static HTML file or an image, it can be complex, like running a background language that connects to many databases. The key point here is that once the required information is returned, the socket is closed and each HTTP request opens one of these relatively short-lived socket connections, which are limited on the server. Resources, whenever they complete their intended tasks, are recovered for recycling.

Now let’s compare data push. A request never completes, there is always a lot of information to send, so the socket remains open. Obviously, because they are limited resources, there will be 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. There are 10 call center employees serving 1,000 users. The user encounters a problem and one of the operators picks up the line and then hangs up. New customer calls are queued until one of the operators hangs up, which is a typical network service pattern.

However, now a customer called and said, I have no problem now, but I will use your product in the next few hours, and if I encounter any problem, I hope you will reply immediately. This customer will stay on the phone with the operator for several hours, and 10% of the call center's service resources are wasted. If there are 10 such customers, then the other 990 customers cannot call. This is the data push model.

Of course, this is not always a bad thing. If this customer has a problem every few seconds throughout the afternoon, keeping the phone open will not waste 10% of service resources, but will increase it. Because each question requires a new call (like a data pull), operators need to spend extra time verifying the customer's identity and pulling up accounts, reducing service efficiency. Staying on the phone usually not only makes customers more satisfied, but also improves the efficiency of the call center. This is the most suitable scenario for data push.


The above is the detailed content of Detailed graphic explanation of HTML5 data push SSE principle and application development. For more information, please follow other related articles on the PHP Chinese website!

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：HTML5 local storage Localstorage code detailsNext article：HTML5 local storage Localstorage code details

Related articles

See more