11.48. HTML5 server sends events

11.48.1. Server-Sent event-one-way messaging ¶

Server-Sent an event means that a web page automatically gets updates from the server.

It was possible to do this in the past, as long as the page had to ask if any updates were available. Updates can arrive automatically by sending events through the server.

Examples: Facebook/Twitter updates, stock price updates, new blog posts, race results, etc.

11.48.2. Browser support ¶

All major browsers support sending events from the server, except for Internet Explorer.

11.48.3. Receive Server-Sent event notifications ¶

EventSource object is used to receive event notifications sent by the server:

varsource=newEventSource("demo_sse.php");source.onmessage=function(event){document.getElementById("result").innerHTML+=event.data+"
";}; 

11.48.4. Detect Server-Sent event support ¶

For the following example, we wrote an additional piece of code to detect browser support for events sent by the server:

if(typeof(EventSource)!=="undefined") { // Browser supports Server Server // Some code..... } else { // Browser does not support Server Server.. } 

11.48.5. Server-side code example ¶

In order for the above example to work, you also need servers (such as PHP and ASP) that can send data updates.

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

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

11.48.6. EventSource object ¶

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