Utilizare EventSource pentru evenimente de la 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.

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:

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

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

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

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

<<-JavaScript Worker

Un Test simplu in fiecare zi

HTML

CSS

JavaScript

PHP-MySQL

Engleza

Spaniola

Care meta tag se foloseste pentru scurta descriere a paginii?

<meta name="description" content="70-160 caractere ce descriu continutul paginii" />

Ce proprietate CSS opreste efectul dat de "float"?

clear text-align position

#some_id {
  clear: both;
}

Clic pe metoda ce creaza un array cu toate elementele din pagina cu un anumit nume de tag.

getElementsByName() getElementById() getElementsByTagName()

var divs = document.getElementsByTagName("div");
var nr_divs = divs.length;
alert(nr_divs);

Indicati functia PHP ce returneaza numarul de elemente dintr-un array.

is_[) count() strlen()

$arr =[7, 8, "abc", 10);
$nri = count($arr);
echo $nri;        // 4

Indicati adverbul corespunzator adjectivului din paranteza in propozitia: "I live (happy)".

happly happily hapily

I live happily.
- Traiesc fericit (in mod fericit).

Indicati adverbul corespunzator adjectivului din paranteza in propozitia: "Vivo (feliz)".

felizamente felizmente felices

Vivo felizmente.
- Traiesc fericit (cu fericire).