Scribd
Upload
32 views4 pages

Sse Api HTML

Uploaded by

captainricardus
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
32 views4 pages

Sse Api HTML

Uploaded by

captainricardus
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 4

HTML SSE API

❮ PreviousNext ❯

Server-Sent Events (SSE) 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
The numbers in the table specify the first browser version that fully support
server-sent events.

API

SSE 6.0 79.0 6.0 5.0


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

ADVERTISEMENT
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: The server time is: " & 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

You might also like