HTML5服务器事件发送(Server-Sent Events)

Server-Sent Events - 单向的信息处理

一个SSE(server send event)指web页面直接从服务器得到更新信息。

这在以前也是可行的，但是web页面必须主要去查询是否有更新。但使用SSE，更新将自动发送过来。

浏览器支持

除了IE，Firefox，Chrome，Opera和Safari 5都支持这个特性。

得到服务器发送的信息提示

EventSource对象用来得到服务器发送的信息提示：

 
 
  
  
   
   var source=new EventSource("demo_sse.php");
source.onmessage=function(event){
  document.getElementById("result").innerHTML+=event.data + "<br />";
}

演示代码说明：

创建一个EventSource对象，指定发送更新的页面URL （这里是demo_see.jsp）
每一次一个更新接收后，onmessage事件就触发
当onmessage时间触发，将得到的数据设置到id="result"的元素中

检查浏览器的SSE支持

 
 
  
  
   
   if(typeof(EventSource)!=="undefined")
  {
  // Yes! Server-sent events support!
  // Some code.....
  }
else
  {
  // Sorry! No server-sent events support..
  }

服务器端代码

对于上面的例子，你需要有一个服务器端的发送数据更新的代码（JSP，PHP或者ASP等）。

服务器端的事件流语法方式很简答。设置content-type头信息为”text/event-stream"后，你就可以发送事件流。

PHP代码如下：

 
 
  
  
   
   <?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');
 
$time = date('r');
echo "data: >> 服务器时间: {$time}\n\n";
flush();
?>

ASP代码如下：

 
 
  
  
   
   <%
Response.ContentType="text/event-stream"
Response.Expires=-1
Response.Write("data: >> 服务器时间" & now())
Response.Flush()
%>

JSP代码如下：

 
 
  
  
   
   <%@ page contentType="text/event-stream; charset=UTF-8"%>
<%
response.setHeader("Cache-Control", "no-cache");
out.print("data: >> 服务器时间" + new java.util.Date() );
out.flush();
%>