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

Source: Internet
Author: User

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)

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.