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.