HTML SSE API

[Guest]

HTML SSE API


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
11.5



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):

<?phpheader('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














★
+1

Reference: https://www.w3schools.com/html/html5_se ... events.asp

[rashelahmed]

I’m following the Indian Super League this season and want quick updates on all matches. Using India Super League results, which websites or apps do you trust for accurate scores, match highlights, and team performance updates?