Cu SSE (Server-Sent Events - Evenimente trimise de server) pagina web poate sa primeasca automat date de la server fara solicitari de trimitere.
Evenimentele SSE sunt unidirectionale; mesajele sunt transmise intr-un singur sens, de la server la pagina web.
Pentru a primi automat in JavaScript notificari de la server, definiti un obiect EventSource, cu adresa URL a fisierului de pe server.
EventSource cu adresa acelui fisier, si un al doilea argument cu un obiect cu proprietatea withCredentials setata true (default e false).EventSource, se poate receptiona mesajul de la server prin evenimentul message:
var evsource = new EventSource('sse_file.php');
evsource.addEventListener('message', (ev)=>{
//preia notificarea de la server din eveniment (ev)
let data = ev.data;
});
message are aceste proprietati:
data - textul cu notificarea de la server. Poate fi orice sir, de exemplu un sir cu obiect JSON.lastEventId - id-ul ultimului mesaj (daca e transmis de la server).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.ev.lastEventId.EventSource.
<h3>Exemplu eveniment de la server cu EventSource</h3>
<h4>Server-Time: <span id='ss_time'></span></h4>
<script>
var ss_time = document.getElementById('ss_time');
//daca browser-ul suporta EventSource
if(window.EventSource){
//defineste un obiect EventSource object care sa primeasca date de la sse_ex.php
var evsource = new EventSource('javascript/sse_ex.php');
//receptioneaza datele de la server
evsource.addEventListener('message', (ev)=>{
let id = ev.lastEventId; //in caz ca e necesar id-ul mesajului
//preia si adauga data in #ss_time
let data = ev.data;
ss_time.innerHTML = data;
});
}
else ss_time.innerHTML ='No server-sent events support.';
</script>
'Content-Type' cu valoarea 'text/event-stream', apoi se pot transmite evenimentele stream cu 'echo' (in PHP).
<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache'); //ca sa nu adauge datele in cache la browser
header('Access-Control-Allow-Origin: *'); //permite acces stream doar de pe domeniu actual
$time = date('h:i:s');
$id = time(); //sa seteze id-ul cu timestamp-ul curent
//transmite evenimentul cu un interval de timp de 1 secunda (1000 milisecunde)
echo "data:$time\n";
echo "retry:1000\n";
echo "id=$id \n\n";
//trimite datele la browser
ob_flush();
flush();
close().
var evsource = new EventSource('sse_file.php');
//restul codului..
if(conditie) evsource.close();
"text/event-stream" Content-Type, sau returnati un status HTTP diferit de 200 OK (ex. 404 Not Found).
event in textul transmis la 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)=>{
//preia notificarea de la server din eveniment (ev)
let data = ev.data;
});
- Acest cod va fi apelat automat cand serverul trimite un mesaj cu numele de eveniment "event_name".
<table><tr> <th>Title 1</th> <th>Title 2</th> </tr></table>
.some_class {
line-height: 150%;
}document.getElementById("id_button").onclick = function(){
window.open("http://coursesweb.net/");
}$ar_dir = scandir("dir_name");
var_export($ar_dir);He will sleep there. - El va dormi acolo.
Él dormirá allí. - El va dormi acolo.