伺服器sent events-26497;語句

傳統的web應用程式生成發送到web伺服器的事件。例如，只需單擊一個連結，就可以從伺服器請求一個新頁面。

從web瀏覽器流向web伺服器的事件類型可以稱爲客戶端發送的事件。

除了HTML5之外，Web應用1.0還引入了從Web伺服器到Web瀏覽器的事件，稱爲伺服器發送事件（SSE）。使用SSE，您可以將DOM事件不斷地從web伺服器推送到訪問者的瀏覽器。

事件流方法打開到伺服器的持久連接，在新信息可用時向客戶端發送數據，從而消除了連續輪詢的需要。

伺服器發送的事件規範了我們如何將數據從伺服器流到客戶端。

Web Application for SSE

要在web應用程式中使用伺服器發送的事件，您需要向文檔中添加一個<eventsource>元素。

<eventsource>元素的src屬性應指向一個URL，該URL應提供發送包含事件的數據流的持久HTTP連接。

URL將指向一個PHP、PERL或任何Python腳本，這些腳本負責始終如一地發送事件數據。下面是一個web應用程式的簡單示例，它將需要伺服器時間。

<!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>

Server Side Script for SSE

伺服器端腳本應發送內容類型頭，指定類型文本/事件流如下。

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

設置內容類型後，伺服器端腳本將發送一個事件：標記，後跟事件名稱。下面的示例將伺服器時間作爲事件名發送，以新行字符結尾。

print "Event: server-time\n";

最後一步是使用data：標記發送事件數據，該標記後面是字符串值的整數，以一個新行字符結尾，如下所示−

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

最後，下面是用Perl−編寫的完整ticker.cgi;

#!/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); 
}

Handle Server-Sent Events

讓我們修改web應用程式來處理伺服器發送的事件。下面是最後一個例子。

<!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>

在測試伺服器發送的事件之前，我建議您確保您的web瀏覽器支持此概念。

極客書

HTML5 - Server Sent Events

Web Application for SSE

Server Side Script for SSE

Handle Server-Sent Events