HTML5 Basic Tutorial

HTML5 API

HTML5 Media

HTML5 Graphics

HTML5 Server-sent events

HTML5 Server-sent events (server-sent event) allows the web page to obtain the latest data from the server without refreshing the page, thereby dynamically obtaining the latest data.

Server-Sent events - One-way message passing

Server-Sent events refer to the automatic retrieval of data updates from the server by the web page.

Traditional methods of obtaining the latest data from the server include refreshing or using timers to trigger and obtain the latest data. Now, through server-sent Server-By sending a Sent event, you can automatically obtain the latest data.

Example: Facebook/Twitter updates, stock market trends, microblogs, sports event results, dynamic messages, comments, etc.

Browser Support

All mainstream browsers support server-sent events except for Internet Explorer.

Receiving Server-Sent Event Notifications

The EventSource object is used to receive server-sent event notifications:

Example

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Basic Tutorial Website(oldtoolbag.com)</title>
</head>
<body>
<h1>Get the latest server data</h1>
<div id="result"></div>
<script>
if(typeof(EventSource)!=="undefined")
{
　　　　var source=new EventSource("demo-sse.php");
　　　　source.onmessage=function(event)
　　　　{
　　　　　　　　document.getElementById("result").innerHTML+=event.data　+　"<br>";
　　　　};
}
else
{
　　　　document.getElementById("result").innerHTML="Sorry, your browser does not support server-sent event...";
}
</script>
</body>
</html>

Test to see ‹/›

Example Explanation:

Create a new EventSource object and specify the URL of the page sending updates (in this example, "demo_sse.php")
An onmessage event occurs each time an update is received
When the onmessage event occurs, push the received data into the element with id "result"

Detect Server-Sent event support

In the following examples, we write some additional code to detect the browser support for server sending events:

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

Server-side Code Example

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

The syntax of server-side event streams is very simple. Put "Content-Type" header is set to "text/event-stream". Now, you can start sending event streams.

Online Example

<?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 current time: {$time}\n\n";
flush();
?>

ASP Code (VB) (demo_sse.asp):

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

Code Explanation:

Set the header "Content-Type" set to "text/event-stream
Specify that the page should not be cached
Output the sending date (always starts with "data: ")
Refresh the webpage to output data

EventSource Object

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

Event	Description
onopen	When the connection to the server is opened
onmessage	When a message is received
onerror	When an error occurs

HTML5 WebSocket HTML5 Web Workers