HTML 5 server-sent events

Server-Sent event - one-way messaging

The Server-Sent event refers to the 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

Server-sent events are supported by all major browsers except Internet Explorer.

Receive Server-Sent event notification

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

Example

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

Explanation of example:

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

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

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

Detect Server-Sent event support

In the above TIY example, we wrote a paragraph Additional code to detect browser support for server-sent events:

if(typeof(EventSource)!=="undefined") { // Yes! Server-sent events support! // Some code..... } else { // Sorry! No server-sent events support.. }

Server-side code example

In order for the above example to work, you will also need a server that can send data updates (e.g. 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.

PHP code (demo_sse.php):

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

ASP code (VB) (demo_sse.asp):

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

Code explanation:

Put the header "Content-Type" is set to "text/event-stream"

Specifies that the page is not cached

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

To Web page refresh output data

EventSource object

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

Event

Description