国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

HTML5 SSE

HTML5 Server-Sent Events

HTML5 server-sent event allows web pages to obtain updates from the server.

Server-Sent Event - One-Way Messaging

## The #Server-Sent event refers to a web page automatically getting updates from the server.

It was also possible to do this before, if the webpage had to ask if an update was available. By sending events through the server, updates can arrive automatically.

Examples: Facebook/Twitter updates, valuation updates, new blog posts, event results, etc.

Browser support

7.jpg


# #All major browsers support server-sent events, except Internet Explorer.

Receive Server-Sent event notificationThe EventSource object is used to receive event notifications sent by the server: 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php中文網(wǎng)(php.cn)</title>
</head>
<body>
<h1>獲取服務(wù)端更新數(shù)據(jù)</h1>
<div id="result"></div>
<script>
    if(typeof(EventSource)!=="undefined")
    {
        var source=new EventSource("demo_sse.php");
        source.onmessage=function(event)
        {
            document.getElementById("result").innerHTML+=event.data + "<br>";
        };
    }
    else
    {
        document.getElementById("result").innerHTML="抱歉，你的瀏覽器不支持 server-sent 事件...";
    }
</script>
</body>
</html>

demo_sse.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();
?>

Run the program and try it

Example analysis:

Create a new EventSource object and then specify to send updates The URL of the page ("demo_sse.php" in this example)

Every time an update is received, the onmessage event will occur

When the onmessage event occurs, push the received data Enter the element with the id "result"

Detect Server-Sent event supportIn the following example, we wrote an additional paragraph Code to detect browser support for events sent by the server:

if(typeof(EventSource)!=="undefined")

{ // Browser support Server-Sent
// Some code...
}
else
{
// The browser does not support Server-Sent..
}

Server side code example

In order for the above example to work, you will also need to be able to send data updates Servers (such as PHP and ASP).

The syntax of server-side event streaming is very simple. Set the "Content-Type" header to "text/event-stream". Now you can start sending the event stream.

Example

<?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();
?>

ASP code (VB) (demo_sse.asp):

<%
Response.ContentType="text/event-stream"
Response.Expires=-1
Response.Write("data: " & now())
Response.Flush ()
%>

Code explanation:

  • Set the header "Content-Type" to "text/event-stream"

  • Specifies that the page is not cached

  • Output the sending date (always starts with "data: ")

  • Refresh output data to the web page

##EventSource object

In the above example, we use the onmessage event to get the message. However, other events can also be used:

onopenWhen the connection to the server is opened onmessage When a message is received onerrorWhen an error occurs
Event Description


Continuing Learning
||
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文網(wǎng)(php.cn)</title> </head> <body> <h1>獲取服務(wù)端更新數(shù)據(jù)</h1> <div id="result"></div> <script> if(typeof(EventSource)!=="undefined") { var source=new EventSource("demo_sse.php"); source.onmessage=function(event) { document.getElementById("result").innerHTML+=event.data + "<br>"; }; } else { document.getElementById("result").innerHTML="抱歉，你的瀏覽器不支持 server-sent 事件..."; } </script> </body> </html>
submitReset Code