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();
?>
This code returns the current time of the server to the client. Finally, a result similar to the following is displayed on the client page: The server time is: Fri, 29 Aug 2016 02:03:21 +0800The server time is: Fri, 29 Aug 2016 02:03:24 +0800The server time is: Fri, 29 Aug 2016 02:03:27 +0800The server time is: Fri, 29 Aug 2016 02: 03:30 +0800The server time is: Fri, 29 Aug 2016 02:03:33 +0800...
Receive Server-Sent event notificationEventSource object is used to receive server-sent event notification:Instance
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