HTML5 - SSE (Server-Sent Events)


Šta je Server-Sent Events?

Događaj koji je poslao HTML5 server novi je način da web stranice komuniciraju s web serverom. Moguće je i s objektom XMLHttpRequest koji vašem JavaScript kodu omogućava da uputi zahtjev web serveru, ali to je razmjena jedan za jedan - što znači da kada web server pruži svoj odgovor, komunikacija je gotova. XMLHttpRequest objekt je srž svih Ajax-ovih operacija.

Međutim, postoje neke situacije u kojima web stranice zahtijevaju dugotrajnije povezivanje s web serverom. Tipičan primjer su cijene dionica na financijskim web lokacijama gdje se cijena automatski ažurira. Drugi primjer je vijest koja se prikazuje na raznim web lokacijama s medijima. Takve stvari možete stvoriti pomoću događaja poslanih s HTML5 servera. Omogućava web stranici da održi otvorenu vezu s web serverom, tako da web server može automatski poslati novi odgovor u bilo kojem trenutku, nema potrebe za ponovnim povezivanjem i iznova pokretati istu skriptu servera.



Slanje poruka sa skriptom servera (Server Script)

Stvorimo PHP datoteku pod nazivom "server_time.php" i u nju upišimo sljedeću skriptu. Jednostavno će u redovnim intervalima izvještavati o trenutnom vremenu ugrađenog sata web servera. Dohvatićemo ovaj put i u skladu s tim ažurirati web stranicu kasnije u ovom lekciji.

<?php
header("Content-Type: text/event-stream");
header("Cache-Control: no-cache");
 
// Dohvatite trenutno vrijeme na serveru
$currentTime = date("h:i:s", time());
 
// Pošaljite u poruci
echo "data: " . $currentTime . "\n\n";
flush();
?>

Prva dva reda PHP skripte postavljaju dva važna zaglavlja. Prvo, postavlja MIME tip na text/stream-stream, što zahtijeva standard događaja na strani poslužitelja. Drugi red govori web serveru da isključi predmemorisanje, u suprotnom može se predmemorisati izlaz vaše skripte. Svaka poruka poslana putem HTML5 događaja poslanih od servera mora započeti s tekstualnim podacima: nakon čega slijedi stvarni tekst poruke i novi niz karaktera u redu (\n\n). I na kraju, koristili smo funkciju PHP flush() kako bismo bili sigurni da se podaci šalju odmah, umjesto da se baferuju dok se PHP kod ne dovrši.



Obrada poruka na web stranici

Objekt EventSource koristi se za primanje poruka poslanih od servera. Sada kreirajmo HTML fajl pod nazivom "demo_sse.html" i postavimo ga u isti direktorij projekta u kojem se nalazi datoteka "server_time.php". Ovaj HTML fajl jednostavno prima trenutno vrijeme koje izvještava web server i prikazuje ga korisniku.

<!DOCTYPE html>
<html lang="en">
<head>
<title>Korištenje Server-Sent Events</title>
<script>
    window.onload = function() {
        var source = new EventSource("server_time.php");
        source.onmessage = function(event) {
            document.getElementById("result").innerHTML += "Novo vrijeme 
            primljeno sa web servera: " + event.data + "<br>";
        };
    };
</script>
</head>
<body>
    <div id="result">
        <!--Ovdje će biti umetnut odgovor servera-->
    </div>
</body>
</html>