HTML5 - zdarzenia wysłane przez serwer

Konwencjonalne aplikacje internetowe generują zdarzenia, które są wysyłane do serwera WWW. Na przykład proste kliknięcie łącza żąda nowej strony z serwera.

Zdarzenia przesyłane z przeglądarki do serwera WWW można nazwać zdarzeniami wysyłanymi przez klienta.

Wraz z HTML5, WHATWG Web Applications 1.0 wprowadza zdarzenia, które przepływają z serwera WWW do przeglądarek internetowych i nazywane są zdarzeniami wysłanymi przez serwer (SSE). Korzystając z SSE, możesz w sposób ciągły wypychać zdarzenia DOM z serwera WWW do przeglądarki odwiedzającego.

Podejście do przesyłania strumieniowego zdarzeń otwiera trwałe połączenie z serwerem, wysyłając dane do klienta, gdy dostępne są nowe informacje, eliminując potrzebę ciągłego odpytywania.

Zdarzenia wysyłane przez serwer standaryzują sposób, w jaki przesyłamy dane z serwera do klienta.

Aplikacja internetowa dla SSE

Aby użyć zdarzeń wysłanych przez serwer w aplikacji internetowej, trzeba dodać element <eventsource> do dokumentu.

Plik src atrybut elementu <eventsource> powinien wskazywać na adres URL, który powinien zapewniać trwałe połączenie HTTP, które wysyła strumień danych zawierający zdarzenia.

Adres URL wskazywałby na skrypt PHP, PERL lub dowolny skrypt w Pythonie, który zadbałby o spójne przesyłanie danych o zdarzeniach. Poniżej znajduje się prosty przykład aplikacji internetowej, która wymagałaby czasu serwera.

<!DOCTYPE HTML>

<html>
   <head>
   
      <script type = "text/javascript">
         /* Define event handling logic here */
      </script>
   </head>
   
   <body>
      <div id = "sse">
         <eventsource src = "/cgi-bin/ticker.cgi" />
      </div>
		
      <div id = "ticker">
         <TIME>
      </div>
   </body>
</html>

Skrypt po stronie serwera dla SSE

Powinien wysłać skrypt po stronie serwera Content-typenagłówek określający typ tekstu / strumień zdarzenia w następujący sposób.

print "Content-Type: text/event-stream\n\n";

Po ustawieniu typu zawartości skrypt po stronie serwera wyśle plik Event: tag, po którym następuje nazwa zdarzenia. Poniższy przykład wyśle czas serwera jako nazwę zdarzenia zakończoną znakiem nowego wiersza.

print "Event: server-time\n";

Ostatnim krokiem jest przesłanie danych zdarzenia za pomocą Data: znacznik, po którym następowałaby liczba całkowita będąca wartością ciągu zakończona znakiem nowego wiersza w następujący sposób -

$time = localtime();
print "Data: $time\n";

Wreszcie, poniżej znajduje się kompletny ticker.cgi napisany w Perlu -

#!/usr/bin/perl  
print "Content-Type: text/event-stream\n\n";  

while(true) { 
   print "Event: server-time\n"; 
   $time = localtime(); 
   print "Data: $time\n"; 
   sleep(5); 
}

Obsługa zdarzeń wysłanych przez serwer

Zmodyfikujmy naszą aplikację internetową, aby obsługiwała zdarzenia wysyłane przez serwer. Oto ostatni przykład.

<!DOCTYPE HTML> 

<html>  
   <head> 
  
      <script type = "text/javascript"> 
         document.getElementsByTagName("eventsource")[0].addEventListener("server-time", 
         eventHandler, false); 
    
         function eventHandler(event) { 

            // Alert time sent by the server 
            document.querySelector('#ticker').innerHTML = event.data; 
         } 
      </script> 
   </head> 
  
   <body> 
      <div id = "sse"> 
         <eventsource src = "/cgi-bin/ticker.cgi" /> 
      </div> 
   
      <div id = "ticker" name = "ticker"> 
         [TIME] 
      </div> 
   </body> 
</html>

Przed przetestowaniem zdarzeń wysłanych z serwera sugerowałbym, aby upewnić się, że Twoja przeglądarka internetowa obsługuje tę koncepcję.