HTML5 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.

The following is a sample code on W3School, including client-side JavaScript and server-side PHP code:

var source = new EventSource("demo_sse.php");

source.onmessage = function(event) {

document.getElementById("result").innerHTML += event.data + "< br />";

};

This code continuously obtains data from demo_sse.php and outputs the result to the ID of in the div of result.

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

?>

...

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

Example analysis:

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 following example, we wrote an additional piece of code to detect browser support for server-sent events:

if(typeof(EventSource)!=="undefined")
{
// The browser supports Server-Sent
// Some codes...
}
else
{
// The browser does not support Server-Sent..
}

Server-side code example

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

Specify that the page is not cached

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

Refresh output data to the web page