腾讯微群加入QQ群

 找回密码
 加入我们

!connect_header_login!

!connect_header_login_tip!

搜索
查看: 699|回复: 0

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

[复制链接]
发表于 2016-8-11 18:08:49 | 显示全部楼层 |阅读模式

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

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

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

浏览器支持

iefirefoxchromeoperasafari

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

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

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

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

演示代码说明:

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

检查浏览器的SSE支持

  1. if(typeof(EventSource)!=="undefined")
  2. {
  3. // Yes! Server-sent events support!
  4. // Some code.....
  5. }
  6. else
  7. {
  8. // Sorry! No server-sent events support..
  9. }

服务器端代码

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

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

PHP代码如下:

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

ASP代码如下:

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

JSP代码如下:

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

代码功能说明:

  • 设置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方法,及其其它你可以使用的相关方法。

0
0

转自:http://blog.csdn.net/sqc1112/article/details/9925159
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 加入我们

本版积分规则

QQ|手机版|Archiver|小黑屋|一起疯|苦咖啡 ( 新ICP备12000197号  

GMT+8, 2018-6-25 17:55 , Processed in 0.042811 second(s), 12 queries , Memcache On.

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表