085_html5服务器发送事件

1. html5服务器发送事件(server-sent event)允许网页获得来自服务器的更新。

2. Server-Sent事件 - 单向消息传递

2.1. Server-Sent事件指的是网页自动获取来自服务器的更新。

2.2. 以前也可能做到这一点, 前提是网页不得不询问是否有可用的更新。通过服务器发送事件, 更新能够自动到达。

3. 浏览器支持: 所有主流浏览器均支持服务器发送事件, 除了Internet Explorer。

4. 接收Server-Sent事件通知

4.1. EventSource 对象用于接收服务器发送事件通知:

var es = new EventSource("http://localhost:8080/EventSource/SAR2C.action");es.onmessage = function(messageEvent) {document.getElementById("result").innerHTML += messageEvent.data + "<br />";
};

4.2. 创建一个新的EventSource对象, 然后规定发送更新的页面的URL(本例中是: "http://localhost:8080/EventSource/SAR2C.action")，必须是全路径。

4.3. 每接收到一次更新, 就会发生onmessage事件。

4.4. 当onmessage事件发生时, 把已接收的数据推入id为"result"的元素中。

5. 检测Server-Sent事件支持

if(typeof(EventSource) !== "undefined") {} else {}

6. 服务器端代码实例

6.1. 为了让上面的例子可以运行, 您还需要能够发送数据更新的服务器(比如: Servlet、PHP和ASP)。

6.2. 新建一个名叫EventSource的动态Web工程

6.3. 编写ServerAutoRefresh2Client.java, 服务器端事件流的语法是非常简单的。把"Content-Type"报头设置为"text/event-stream"。现在, 您可以开始发送事件流了。

package com.lywgames.mysessionlistener;import java.io.BufferedOutputStream;
import java.io.IOException;
import java.io.OutputStream;
import java.util.Date;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;public class ServerAutoRefresh2Client extends HttpServlet {private static final long serialVersionUID = 1L;int id = 0;long startTime = 0;long endTime = 0;int goodsCount = 9999;@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {String lastEventId = req.getHeader("Last-Event-ID");startTime = endTime;endTime = new Date().getTime();System.out.println("lastEventId = " + lastEventId + ", 2次请求时间间隔:" + (endTime - startTime));resp.setContentType("text/event-stream");OutputStream os = new BufferedOutputStream(resp.getOutputStream());// id,retry,data,之后必须使用两个\n\n(不然客户端取不到值)。// id最好放在最前面。req.getHeader("Last-Event-ID"); 在谷歌、safari浏览器有值, 火狐浏览器为null。os.write(("id:" + (++id) + "\n\n").getBytes());// 声明浏览器在连接断开之后进行再次连接之前的等待时间 10秒// 火狐浏览器默认5s请求一次, 谷歌浏览器默认3s请求一次, safari浏览器默认3s请求一次。os.write(("retry:" + (10 * 1000) + "\n\n").getBytes());os.write(("data:还有"+(goodsCount--)+"件商品。\n\n").getBytes());os.flush();os.close();}@Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {doGet(req, resp);}
}

6.4. EventSource.html

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>获得服务器更新</title></head><body>商品数量:<div id="result"></div><script>if(typeof(EventSource) !== "undefined") {// 必须是全路径var es = new EventSource("http://localhost:8080/EventSource/SAR2C.action");es.onopen = function(event) {}es.onmessage = function(messageEvent) {document.getElementById("result").innerHTML += messageEvent.data + "<br />";};es.onerror = function(event) {};} else {document.getElementById("result").innerHTML = "抱歉，您的浏览器不支持 server-sent 事件 ...";}</script></body>
</html>

6.5. 运行项目

7. EventSource 对象

7.1. 在上面的例子中, 我们使用onmessage事件来获取消息。不过还可以使用其他事件:

085_html5服务器发送事件相关推荐

HTML5 服务器发送事件(Server-Sent Events)介绍
w3cschool菜鸟教程 Server-Sent 事件 - 单向消息传递 Server-Sent 事件指的是网页自动获取来自服务器的更新. 以前也可能做到这一点,前提是网页不得不询问是否有可用的更新 ...
【HTML5】Server-Sent服务器发送事件
Server-Sent 事件 - 单向消息传递 Server-Sent 事件指的是网页自动获取来自服务器的更新. 以前也可能做到这一点,前提是网页不得不询问是否有可用的更新.通过服务器发送事件,更新能 ...
来自网页的消息服务器繁处理忙,EventSource 对象用于接收服务器发送事件通知,是网页自动获取来自服务器的更新...
//--------------------------------客户端代码----------------------------- if(typeof(EventSource) !== &quo ...
HTML5中的服务器发送事件Server-sent events
HTML5加了许多新功能,其中服务器发送事件Server-sent events是一个亮点,以下直接贴上代码示例客户端a.html页面 <!DOCTYPE html> <html& ...
HTML 5 服务器发送事件
HTML5 服务器发送事件(server-sent event)允许网页获得来自服务器的更新. 浏览器支持所有主流浏览器均支持服务器发送事件,除了 Internet Explorer. 服务器端代码 ...
html怎么直接给服务器发消息,HTML5教程之服务器发送事件
HTML5 服务器发送事件(Server-Sent Events)允许网页获得来自服务器的更新. Sever-Sent事件 -单项消息传递 Sever-Sent事件指的是网页自动获取来自服务器的更新 ...
HTML5支持服务器发送事件
来源传统的WEB应用程序通信时的简单时序图: 现在Web App中,大都有Ajax,是这样子: HTML5有一个Server-Sent Events(SSE)功能,允许服务端推送数据到客户端.(通常 ...
HTML5支持服务器发送事件(Server-Sent Events)-单向消息传递数据推送（C#示例）
传统的WEB应用程序通信时的简单时序图: 现在Web App中,大都有Ajax,是这样子: HTML5有一个Server-Sent Events(SSE)功能,允许服务端推送数据到客户端.(通常叫数据 ...
HTML服务器发送事件
HTML服务器发送事件(server-sent event)允许网页获得来自服务器的更新.Server-Sent事件:单向消息传递.Server-Sent 事件指的是网页自动获取来自服务器的更新.以前 ...

085_html5服务器发送事件

085_html5服务器发送事件相关推荐

最新文章

热门文章