浅析HTML5的WebSocket与服务器推送事件

2020-04-25 07:55:10易采站长站整理

这个事件流方法会打开一个到服务器的持久连接,新消息可用时发送数据到客户端,从而不再需要持续的轮询。

SSE Web 应用程序
要在 Web 应用程序中使用服务器推送事件,我们需要给文档添加一个 <eventsource>元素。

<eventsource> 元素的 src 属性应该指向一个 URL,这个 URL 应该提供一个 HTTP 持久连接用于发送包含事件的数据流。

这个 URL 将会指向一个持续发送事件数据的 PHP,PERL 或者任意 Python 脚本。下面是一个简单的期望获得服务器时间的 Web 应用程序示例。

XML/HTML Code复制内容到剪贴板

<!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-streamnn”;
设置 Content-type 之后,服务器端脚本将发送一个后面紧跟事件名称的 Event: 标签。下面的示例将会发送一个以换行符结束的 Server-Time 作为事件名称。

复制代码print “Event: server-timen”;
最后一步是使用 Data: 标签发送事件数据,紧随其后的是以换行符结束的整数字符串值,如下所示:

复制代码$time = localtime();
print “Data: $timen”;
下面是用 perl 编写的完整 ticker.cgi:

复制代码
#!/usr/bin/perl
print “Content-Type: text/event-streamnn”;
while(true){
print “Event: server-timen”;
$time = localtime();
print “Data: $timen”;
sleep(5);

处理服务器推送事件
让我们修改一下我们的 Web 应用程序来处理服务器推送时间。下面是最终示例:

XML/HTML Code复制内容到剪贴板

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