HTML tutorial
CSS3 tutorial
Bootstrap tutorial
JavaScript tutorial
JQuery tutorial
AngularJS tutorial
React tutorial
NodeJS tutorial
PHP tutorial
Python tutorial
Python3 tutorial
Django tutorial
Linux tutorial
Docker tutorial
Ruby tutorial
Java tutorial
C tutorial
C ++ tutorial
Perl tutorial
JSP tutorial
Lua tutorial
Scala tutorial
Go tutorial
ASP.NET tutorial
C # tutorial
Server-Sent Events (SSE) allow a web page to get updates from a server
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.
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 |
The EventSource object is used to receive server-sent event notifications:
var source = new EventSource("demo_sse");
source.onmessage = function(event) {
document.getElementById("result").innerHTML += event.data + "<br>";
};
Example explained:
In the tryit example above there were some extra lines of code to check browser support for server-sent events:
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):
Code in ASP (VB) (demo_sse):
Code explained:
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 |