API-ul HTML pentru Evenimente Trimise de Server
API-ul Server-Sent Events (SSE) permite unui server să trimită mesaje și actualizări către o pagină web printr-o conexiune HTTP.
Evenimente Trimise de Server - Mesagerie Unidirecțională
Un eveniment trimis de server este atunci când o pagină web primește automat mesaje sau actualizări de la un server. În mod normal, o pagină trebuie să solicite date de la server, dar cu evenimentele trimise de server actualizările sunt trimise automat. Exemple includ actualizări de social media, actualizări bursiere, fluxuri de știri și rezultate sportive.
Suport pentru browsere
API-ul Server-Sent Events este suportat în toate browserele moderne (începând cu Chrome 6, Edge 79, Firefox 6, Safari 5 și Opera 11.5).
Primirea Notificărilor de Evenimente Trimise de Server
Obiectul EventSource primește notificările evenimentelor trimise de server. Creezi un nou EventSource și îi dai URL-ul paginii care trimite actualizările. De fiecare dată când sosește o actualizare, se declanșează evenimentul onmessage, iar tu pui datele primite într-un element din pagină.
Exemplu
Primirea evenimentelor trimise de server cu EventSource.
Rezultat: pagină HTML completă
<!DOCTYPE html>
<html lang="ro">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Primire SSE</title>
</head>
<body>
<p id="result"></p>
<script>
const x = document.getElementById("result");
// Verifică suportul browserului pentru SSE
if (typeof(EventSource) !== "undefined") {
var source = new EventSource("demo_sse.php");
source.onmessage = function(event) {
x.innerHTML += event.data + "<br>";
};
} else {
x.innerHTML = "Ne pare rău, nu există suport pentru evenimente trimise de server.";
}
</script>
</body>
</html>
Verificarea Suportului Browserului
Exemplul de mai sus include câteva linii suplimentare pentru a verifica suportul browserului, testând typeof(EventSource) și rulând codul SSE doar dacă este definit, altfel afișând un mesaj de lipsă a suportului.
Exemplu de Cod pe Partea de Server
Pentru ca exemplul să funcționeze, ai nevoie de un server capabil să trimită actualizări de date (precum PHP sau ASP). Sintaxa fluxului de evenimente pe partea de server este simplă: setează antetul Content-Type la text/event-stream, specifică faptul că pagina nu trebuie pusă în cache, scrie datele (începând mereu fiecare mesaj cu data:) și trimite-le înapoi către pagină. În PHP acest lucru înseamnă setarea antetului cu header('Content-Type: text/event-stream'), afișarea unei linii precum data: The server time is: ... și apelarea flush(); în ASP setezi Response.ContentType = "text/event-stream", scrii linia data: și apelezi Response.Flush().
Obiectul EventSource
Exemplele folosesc evenimentul onmessage, dar sunt disponibile și alte evenimente: onopen se declanșează la deschiderea unei conexiuni cu serverul, onmessage se declanșează la primirea unui mesaj, iar onerror se declanșează la apariția unei erori.