传统的Web应用程序会生成事件，这些事件将分派到Web服务器。如单击链接即可从服务器请求一个新页面。
与HTML5一起,WHATWG Web Applications 1.0引入了从Web服务器流向Web浏览器的事件它们被称为服务器推送事件(SSE)。使用SSE,您可以将DOM事件从Web服务器连续推送到访问者的浏览器。
SSE的Web应用程序
要在Web应用程序中使用服务器发送的事件，您需要在文档中添加<eventsource>元素。
<eventsource>元素的src属性应该指向一个URL，该URL应该提供一个持久的HTTP连接，该连接发送包含事件的数据流。
<!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的服务器端脚本
服务器端脚本应发送 Content-type 标头，以指定 text/event-stream 类型，如下所示。
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>
在测试服务器发送的事件之前，建议您确保Web浏览器支持此概念。
HTML5 - SSE推送事件 - 无涯教程网无涯教程网提供传统的Web应用程序会生成事件，这些事件将分派到Web服务器。如单击链接即可从服务器请...
https://www.learnfk.com/html5/html5-server-sent-events.html
