HTML5:HTML5 Server Send events (server-sent events)

YLBTECH-HTML5:HTML5 Server Send events (server-sent events)

1. back to top

1, HTML5Server Send events (server-sent events)

HTML5 Server Send events (Server-sent event) allow Web pages to get updates from the server .

Server-sent Event-one-way message delivery

the Server-sent event refers to a webpage that automatically obtains updates from the server .

This could have been done before, provided the Web page had to ask if there were any updates available. Events are sent through the server, and updates are automatically reached.

Examples:facebook/twitter updates, valuation updates, new posts, tournament results , and more.

Browser support

All major browsers support server sending events, in addition to Internet Explorer.

Receive Server-sent event notifications

The EventSource object is used to send event notifications to the receiving server:

Instance

var source=New EventSource ("demo_sse.php"); source.onmessage=function( Event) {    document.getElementById ("result"). Innerhtml+=event.data + "<br>";};

Try it?

Instance parsing:

• Create a new EventSource object, and then specify the URL of the page that is sending the update ("demo_sse.php" in this case)
• OnMessage event occurs every time an update is received
• When the OnMessage event occurs, the received data is pushed into the element with the ID "result"

Detect Server-sent Event Support

In the following example, we have written an extra piece of code to detect the browser support of the server sending events:

if (typeof(EventSource)!== "undefined") {  //  browser support server-sent  //  some code ..... }else{//  Browser does not support server-sent ...}

Server-side Code instances

To make the above example work, you also need a server that can send data updates (such as PHP and ASP).

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

Instance

<?  Header(' Content-type:text/event-stream 'header(' Cache-control:no-cache ' )  $timedate(' 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 ("" & Now ()) Response.Flush ()%>

Code Explanation:

• Set the header "Content-type" to "Text/event-stream"
• No caching of pages is required
• Output send date (always start with "data:")
• Refresh output data to a Web page

EventSource Object

In the example above, we use the OnMessage event to get the message. However, you can also use other events:

Events	Description
OnOpen	When the connection to the server is opened
OnMessage	When a message is received
OnError	When an error occurs

2.

2. back to top

3. back to top

4. back to top

5. back to top

1, HTTP://WWW.RUNOOB.COM/HTML/HTML5-SERVERSENTEVENTS.HTML2,

6. back to top

Ylbtech Source: http://ylbtech.cnblogs.com/ This article is copyright to the author and the blog Park, Welcome to reprint, but without the consent of the author must retain this paragraph, and in the article page obvious location to the original link, otherwise reserves the right to pursue legal responsibility.

HTML5:HTML5 Server Send events (server-sent events)