HMTL 5 Server-Sent Events

Mattepuffo's logo
HMTL 5 Server-Sent Events

HMTL 5 Server-Sent Events

Programmazione, Javascript - AJAX

Per connetterci in background al server, siamo abituati ad usare AJAX.

Ma in verità l'HTML 5 mette a disposizione anche altre API; una di queste è la Server-Sent Events.

Questa API ci permette di delegare al browser il monitoraggio di una sorgente dati, ottenendo una spece di notifica push.

Vediamo un esempio banale.

Creiamo un file PHP sul server (test.php) con un codice del genere:

header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');
echo 'data: ' . strftime('%H:%M:%S', time()) . PHP_EOL;
echo PHP_EOL;

Alcune considerazioni:

  • l'output è in testo semplice, quindi non HTML, JSON o XML
  • il testo deve cominciare con 'data:'
  • bisogna impostare il MIME-type su text/event-stream
  • dobbiamo assicurare che la risposta non venga salvata nella cache del browser con il Cache-Control

Questa l'HTML e il Javascript:

<!DOCTYPE html>
<html>
    <head>
        <title>SSE</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script>
            if (typeof (EventSource) !== "undefined") {
                var source = new EventSource('test.php');
                source.addEventListener('message', function (event) {
                    document.getElementById("result").innerHTML += event.data + "<br>";
                });
            } else {
                document.getElementById("result").innerHTML = "Server-Sent Events non supportati dal tuo borwser!";
            }
        </script>
    </head>
    <body>
        <div id="result"></div>
    </body>
</html>

A questo punto avviate la pagina; ogni 5 secondi (intervallo di default) dovreste vedere una nuova riga apparire nel browser con un tempo diverso.

E' possibile modificare questo intervallo, ma deve essere fatto lato server (ad esempio con uno sleep).

E' anche possibile impostare eventi multipli ovviamente.

Tutto ciò può essere molto comodo, ma non va a sostituire AJAX in tutto e per tutto; è sicuramente utile nei casi in cui vogliamo monitorare costantemente alcune attività.

Pensiamo a dei grafici in tempo reale, ad esempio.

Enjoy!

Condividi

Commentami!