With SSE (Server-Sent Events) the web page can automatically receive data from server without requiring any sending requests.
Server-sent events are unidirectional; that is, data messages are delivered in one direction, from the server to the client.
To receive server-sent event notifications in JavaScript, create an object of the EventSource interface, specifying the URL of the page that sends the messages.
EventSource with the URI address of the script, and a second argument with an object with the withCredentials property set to true (default is false).message event:
var evsource = new EventSource('sse_file.php');
evsource.addEventListener('message', (ev)=>{
//getting data from event (ev)
let data = ev.data;
});
message event contains these properties:
data - the data field for message. It can be any string data, for example a string with JSON object.lastEventId - the id of the last event message (if specified on server side).Content-Type: text/event-stream.
header('Content-Type: text/event-stream');
echo "data:$data\n";
echo "retry:$retry\n";
echo "id=$id \n\n";
data property.ev.lastEventId property.EventSource object.
<h3>Example server sent events with EventSource</h3>
<h4>Server-Time: <span id='ss_time'></span></h4>
<script>
var ss_time = document.getElementById('ss_time');
//if the browser supports EventSource
if(window.EventSource){
//defines an EventSource object to receive data from sse_ex.php file
var evsource = new EventSource('javascript/sse_ex.php');
//detects when it is received message with data from server
evsource.addEventListener('message', (ev)=>{
let id = ev.lastEventId; //if you need the event message id
//gets and adds data in #ss_time
let data = ev.data;
ss_time.innerHTML = data;
});
}
else ss_time.innerHTML ='No server-sent events support.';
</script>
'Content-Type' header to 'text/event-stream'. Now you can start sending event streams with 'echo' (in PHP).
<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache'); //to prevent caching of event data
header('Access-Control-Allow-Origin: *'); //allows stream access from current domain only
$time = date('h:i:s');
$id = time(); //to set id with current timestamp
//outputs message with a time interval of 1 second (1000 milliseconds
echo "data:$time\n";
echo "retry:1000\n";
echo "id=$id \n\n";
//sends output data to the browser
ob_flush();
flush();
close() method.
var evsource = new EventSource('sse_file.php');
//rest of code..
if(some_condition) evsource.close();
"text/event-stream" Content-Type, or return an HTTP status other than 200 OK (e.g. 404 Not Found).
event field in the block of text that is sent to the browser.echo 'event:event_name\n'; echo "data:$data\n"; echo "retry:$retry\n"; echo "id=$id \n\n";
var evsource = new EventSource('sse_file.php');
evsource.addEventListener('event_name', (ev)=>{
//getting data from event (ev)
let data = ev.data;
});
- This code will be called automatically whenever the server sends a message with the event field set to "event_name".
<ul> <li>http://coursesweb.net/html/</li> <li>http://coursesweb.net/css/</li> </ul>
.some_class {
display: list-item;
}var obj = {
"courses": ["php", "javascript", "ajax"]
};
var jsonstr = JSON.stringify(obj);
alert(jsonstr); // {"courses":["php","javascript","ajax"]}$strhtml = '<body><div id="dv1">CoursesWeb.net</div></body>';
$dochtml = new DOMDocument();
$dochtml->loadHTML($strhtml);
$elm = $dochtml->getElementById("dv1");
echo $elm->nodeValue; // CoursesWeb.net