Utilizare EventSource pentru evenimente de la server

Curs Javascript

• Trimitere eveniment message de la server
• Exemplu cu eveniment de la server in JS
• Utilizare nume personalizat pentru evenimentul trimis de server

Cu SSE (Server-Sent Events - Evenimente trimise de server) pagina web poate sa primeasca automat date de la server fara solicitari de trimitere.

Primirea de evenimente de la server

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.

var evsource = new EventSource('sse_file.php');
evsource.addEventListener('message', (ev)=>{
 //preia notificarea de la server din eveniment (ev)
 let data = ev.data;
});

• 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).

Trimitere eveniment message de la server

header('Content-Type: text/event-stream');
echo "data:$data\n";
echo "retry:$retry\n";
echo "id=$id \n\n";

• $data - o variabila cu sirul din proprietatea data.
• $retry - (optional) durata, in milisecunde dupa care va fi transmisa urmatoarea notificare. Seteaza intervalul de timp dintre notificarile de la server. Daca nu e specificat, default e 3000 (3 secunde).
• $id - (optional) un ID pentru notificarea curenta. Valoarea care poate fi citita in JavaScript la proprietatea ev.lastEventId.

Exemplu cu eveniment de la server in JS

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

<?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();

Terminare evenimente streams

var evsource = new EventSource('sse_file.php');
//restul codului..

if(conditie) evsource.close();

Utilizare nume personalizat pentru evenimentul trimis de server

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;
});