HTML5服务器事件发送(Server-Sent Events)【HTML5教程 - 第十三篇】

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();
%>

代码功能说明：

• 设置content-type为"text/event-stream"，Event stream编码一定需要是utf-8。

• 指定页面不可缓存

• 需要发送的输出数据 （一定需要以"data:"开头）

• flush输出数据到web页面

EventSource对象

以上表中包含了我们以上例子中使用的onmessage方法，及其其它你可以使用的相关方法。

本文链接：HTML5教程 - 第十三篇：HTML5服务器事件发送(Server-Sent Events)，转自：http://www.gbin1.com/tutorials/html5-tutorial/html5-sse/