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.

Sintaxa:
var evsource = new EventSource('sse_file.php');

Daca fisierul e pe alt domeniu, definiti EventSource cu adresa acelui fisier, si un al doilea argument cu un obiect cu proprietatea withCredentials setata true (default e false).
Sintaxa:
var evsource = new EventSource('//api.example.com/sse_file.php', {withCredentials: true});

Dupa ce ati creat obiectul cu 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;
});

Fiecare eveniment message are aceste proprietati:

Trimitere eveniment message de la server

Scriptul de la server care trimite evenimente stream trebuie sa transmita header-ul Content-Type: text/event-stream.
Fiecare eveniment 'message' e transmis ca text cu unul sau mai multe linii, terminat cu doua linii goale.
Sintaxa (in PHP):
header('Content-Type: text/event-stream');
echo "data:$data\n";
echo "retry:$retry\n";
echo "id=$id \n\n";


Sirul intreg cu mesajul trebuie sa se termine cu doua linii goale '\n\n'.
Daca sirul incepe cu caracter doua-puncte (:), e considerat un comentariu si e ignorat.
echo ': Text ignored \n\n';
Daca sirul nu contine caracter doua-puncte, intreaga linie este tratata ca numele campului cu un sir de valori goale.

Exemplu cu eveniment de la server in JS

Iata un exemplu simplu care ajuta sa intelegeti cum functioneaza evenimentele de la server cu obiectul EventSource.
- Acest exemplu afiseaza intr-un element HTML timpul (ora:minute:secunde) transmis de la server.
<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>
Sintaxa pentru evenimentele stream de la server e simpla. Intai setati header-ul 'Content-Type' cu valoarea 'text/event-stream', apoi se pot transmite evenimentele stream cu 'echo' (in PHP).
- Fisierul sse_ex.php contine acest cod:
<?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

In mod implicit, daca conexiunea dintre client si server se inchide, conexiunea este resetata.
Pentru a termina complet conexiunea de pe partea de client, aplicati metoda close().
var evsource = new EventSource('sse_file.php');
//restul codului..

if(conditie) evsource.close();

Pentru a termina complet conexiunea de pe partea de server, transmiteti fara header "text/event-stream" Content-Type, sau returnati un status HTTP diferit de 200 OK (ex. 404 Not Found).
header('HTTP/1.0 404 Not Found');
exit();
- Va impiedica browserul sa restabileasca conexiunea.

Utilizare nume personalizat pentru evenimentul trimis de server

Cuvantul 'message' e numele implicit pentru evenimente stream de la server, dar se poate specifica si alt nume, adaugand campul event in textul transmis la browser.
Sintaxa (in PHP):
echo 'event:event_name\n';
echo "data:$data\n";
echo "retry:$retry\n";
echo "id=$id \n\n";

Iar pe partea de client, scriptul JS poate receptiona evenimentul specificat:
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".

Un Test simplu in fiecare zi

HTML
CSS
JavaScript
PHP-MySQL
Engleza
Spaniola
Ce tag HTML5 este indicat sa contina meniul cu link-uri de navigare in site?
<section> <nav> <article>
<nav><ul>
 <li><a href="http://coursesweb.net/css/" title="CSS Course">CSS Course</a></li>
 <li><a href="http://www.marplo.net/jocuri/" title="Flash Games">Flash Games</a></li>
</ul></nav>
Ce proprietate CSS muta elementrul in dreapta sau stanga de la locul unde e?
text-align clear float
.some_class {
  width: 30%;
  float: left;
}
Clic pe metoda obiectului Math care rotunjeste numarul x descrescator la cel mai apropiat intreg.
Math.ceil(x) Math.abs(x) Math.floor(x)
var num = 12.34567;
num = Math.floor(num);
alert(num);       // 12
Indicati functia PHP care returneaza numarul de caractere dintr-un sir.
mb_strlen() count() stristr()
$str = "sir cu caractere utf-8 åèö";
$nrchr = mb_strlen($str);
echo $nrchr;        // 29
Clic pe raspunsul potrivit la intrebarea: "When it happened?".
On the 7th of July 1996 It is a quarter to 5. Nice weather.
When it happened? On the 8th of August 2001.
- Cand s-a intamplat? Pe 8 August 2001.
Indicati raspunsul potrivit la intrebarea: "¿Cuando sucedió?".
Hace buen tiempo. En el 8 de Agosto de 2001 Son las tres menos cuarto.
¿Cuando sucedió? En el 8 de Agosto de 2001.
- Cand s-a intamplat? Pe 8 August 2001.
Utilizare EventSource pentru evenimente de la server

Last accessed pages

  1. Articolul din limba engleza - The article (15368)
  2. Blog si Cugetari Personale (395)
  3. Conditional IF - Exercitii si teste engleza incepatori (3885)
  4. Proprietati si Metode obiect window (40)
  5. Substantivul din limba engleza - The Noun (14684)

Popular pages this month

  1. Gramatica limbii engleze - Prezentare Generala (2529)
  2. Prezentul simplu si continuu - Present Tense Simple and Continuous (1597)
  3. Cursuri si Tutoriale: Spaniola, Engleza, HTML, CSS, Php-Mysql, JavaScript, Ajax (1336)
  4. Trecutul simplu si continuu - Past Tense Simple and Continuous (949)
  5. Articolul din limba engleza - The article (887)