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 kom trenutku, nema potrebe za ponovnim povezivanjem i ponovnim pokretanjem iste skripte 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 od servera mora započeti s tekstualnim podacima: nakon čega sljedi stvarni tekst poruke i novi string karaktera u redu (\n\n). I na kraju, koristili smo PHP funkciju 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 datoteku pod nazivom "demo_sse.html" i postavimo je u isti direktorij projekta u kojem se nalazi datoteka "server_time.php". Ovaj HTML dokument 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>