服务器发送的事件（Server-Sent Events）

优质

小牛编辑

127浏览

2023-12-01

传统的Web应用程序生成分派给Web服务器的事件。例如，只需单击链接就可以从服务器请求新页面。

从Web浏览器流向Web服务器的事件类型可以称为客户端发送的事件。

与HTML5一起， WHATWG Web Applications 1.0引入了从Web服务器流向Web浏览器的事件，它们被称为服务器发送事件（SSE）。使用SSE，您可以将DOM事件从Web服务器连续推送到访问者的浏览器。

事件流方法打开与服务器的持久连接，在有新信息时将数据发送到客户端，无需连续轮询。

服务器发送的事件标准化了我们如何将数据从服务器流式传输到客户端。

SSE的Web应用程序

要在Web应用程序中使用Server-Sent Events，您需要在文档中添加元素。

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

SSE的服务器端脚本

服务器端脚本应发送指定类型text/event-stream Content-type头，如下所示。

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

设置Content-Type后，服务器端脚本将发送一个Event :标签，后跟事件名称。下面的示例将发送Server-Time作为由新行字符终止的事件名称。

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); 
}

处理服务器发送的事件

让我们修改我们的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>

在测试Server-Sent事件之前，我建议您确保您的Web浏览器支持此概念。