HTML5 Server-Sent Events

## HTML Basic

HTML HOME HTML Introduction HTML Editors HTML Basic HTML Elements HTML Attributes HTML Headings HTML Paragraphs HTML Formatting HTML Links HTML Head HTML CSS HTML Images HTML Tables HTML Lists HTML Blocks HTML Layout HTML Forms HTML Iframes HTML Colors HTML Colornames HTML Colorvalues HTML JavaScript HTML Entities HTML URL Encode HTML Quick List HTML Summary HTML XHTML

## HTML5 News

HTML5 Intro HTML5 New Elements HTML5 Canvas HTML5 SVG HTML5 Drag/Drop HTML5 Geolocation HTML5 Video HTML5 Audio HTML5 Input Types HTML5 Form Elements HTML5 Form Attributes HTML5 Semantic HTML5 Web Storage HTML5 App Cache HTML5 Web Workers HTML5 SSE

## HTML Media

HTML Media HTML Object HTML Audio HTML Video HTML YouTube

## HTML Examples

HTML Examples HTML Quiz HTML5 Quiz HTML Certificate HTML5 Certificate

## HTML References

HTML Tag List HTML Attributes HTML Events HTML Canvas HTML Audio/Video HTML Doctypes HTML Colornames HTML Colorpicker HTML Colormixer HTML Character Sets HTML ASCII HTML ISO-8859-1 HTML Symbols HTML URL Encode HTML Lang Codes HTTP Messages HTTP Methods Keyboard Shortcuts

# HTML5 Server-Sent Events

« Previous
Next Chapter »

HTML5 Server-Sent Events allow a web page to get updates from a server.

## Server-Sent Events - One Way Messaging

A server-sent event is when a web page automatically gets updates from a server.

This was also possible before, but the web page would have to ask if any updates were available. With server-sent events, the updates come automatically.

Examples: Facebook/Twitter updates, stock price updates, news feeds, sport results, etc.

## Browser Support

Server-Sent Events are supported in all major browsers, except Internet Explorer.

## Receive Server-Sent Event Notifications

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

## Example

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

Example explained:

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

## Check Server-Sent Events Support

In the tryit example above there were some extra lines of code to check 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

For the example above to work, you need a server capable of sending data updates (like PHP or ASP).

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

Code in PHP (demo_sse.php):

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

Code in ASP (VB) (demo_sse.asp):

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

Code explained:

- Set the "Content-Type" header to "text/event-stream"
- Specify that the page should not cache
- Output the data to send (Always start with "data: ")
- Flush the output data back to the web page

## The EventSource Object

In the examples above we used the onmessage event to get messages. But other events are also available:

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

« Previous
Next Chapter »

## Your suggestion:

Your E-mail (optional):

Page address:

Description:

Close [X]

## Thank You For Helping Us!

Your message has been sent to W3Schools.

Close [X]
Search w3schools.com:

## WEB HOSTING

Best Web Hosting UK Reseller Hosting Wow! $5 SSD Hosting

## WEB BUILDING

Download XML Editor
FREE Website BUILDER FREE Website Creator

## WEB RESOURCES

Web Statistics Web Validation

## SHARE THIS PAGE