首页风格
门户
博客

GBin1专题之HTML5教程 - 第十三篇:HTML5服务器事件发送(Server-Sent Events)

日期:2012-4-25  来源:GBin1.com

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

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

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

浏览器支持

iefirefoxchromeoperasafari

除了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对象

Events Description
onopen When a connection to the server is opened
onmessage When a message is received
onerror When an error occurs

 

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

来源:GBin1专题之HTML5教程 - 第十三篇:HTML5服务器事件发送(Server-Sent Events)

喜欢我们的文章请您与朋友分享:

?ü?à

留言

友情提示: 本站博客不再支持访客留言,如果有问题或者留言,请发布到  GBtags.com

  1. 目前没有任何留言
今日推荐