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
Care tag este element de tip bloc?
<div> <img> <span>
<div>Web Programming and Development</div>
Care cod CSS afiseaza textul subliniat?
font-style: italic; text-decoration: underline; font-weight: 500;
h2 {
  text-decoration: underline;
}
Clic pe functia JavaScript care apeleaza o alta functie dupa un anumit timp.
insertBefore() setTimeout() querySelector()
function someFunction() { alert("CoursesWeb.net"); }
setTimeout("someFunction()", 2000);
Clic pe instructiunea care returneaza numarul total de elemente dintr-un array asociativ.
count($array) count($array, 1) strlen()
$food =["fruits" =>["banana", "mar"), "veggie" =>["ceapa", "rosie"));
$nr_food = count($food, 1);
echo $nr_food;       // 6
Indicati Viitorul Perfect la negativ al verbului din paranteze, in propozitia: "The child (to not play) by Sunday".
has't played haven't been playing will haven't played
The child will haven't played by Sunday.
- Copilul nu s-ar fi jucat pana duminica.
Indicati Viitorul Perfect pentru verbul "contar" (a povesti) la forma "Él".
habrá contado va a contar contaba
Él no habrá contado el cuento.
- El nu ar fi spus povestea.
Utilizare EventSource pentru evenimente de la server

Last accessed pages

  1. Accentul si Pronuntia (4389)
  2. Gramatica limbii spaniole. Indrumator si prezentare generala (11813)
  3. Conditional IF in Limba Engleza - Fraze Conditionale (17144)
  4. Caractere speciale - Entitati HTML (1176)
  5. Cursuri si Tutoriale: Spaniola, Engleza, HTML, CSS, Php-Mysql, JavaScript, Ajax (24234)

Popular pages this month

  1. Gramatica limbii engleze - Prezentare Generala (3562)
  2. Prezentul simplu si continuu - Present Tense Simple and Continuous (2461)
  3. Cursuri si Tutoriale: Spaniola, Engleza, HTML, CSS, Php-Mysql, JavaScript, Ajax (1640)
  4. Alphabet and Pronunciation - Alfabetul si pronuntia in limba engleza (1160)
  5. Substantivul din limba engleza - The Noun (1053)