Server-Sent Events(HTML5 服务器发送事件)
Server-Sent Events简介
Server-Sent Events(SSE)用于网页自动获取服务器上更新的数据,它是一个实时性的机制。
实时性获取数据的解决方案
对于某些需要实时更新的数据(例如Facebook/Twitter 更新、估价更新、新的博文、赛事结果等)来说,有这么几种解决方案:
Polling(轮询)
在客户端重复的向服务端发送新请求。如果服务器没有新的数据更动,关闭本次连接。然后客户端在稍等一段时间之后,再次发起新请求,一直重复这样的步骤。
Long-polling(长轮询)
在长轮询中,客户端发送一个请求到服务端。如果服务端没有新的数据更动,那么本次连接将会被保持,直到等待到更新后的数据,返回给客户端并关闭这个连接。
Server-Sent Events
SSE类似于长轮询的机制,但是它在每一次的连接中,不只等待一次数据的更动。客户端发送一个请求到服务端 ,服务端保持这个请求直到一个新的消息准备好,将消息返回至客户端,此时不关闭连接,仍然保持它,供其它消息使用。SSE的一大特色就是重复利用一个连接来处理每一个消息(又称event)。
WebSocket
WebSocket不同于以上的这些技术,因为它提供了一个真正意义上的双向连接。WebSocket是HTML5中非常强大的新特性,已经得到广泛应用。(这里暂时不进行展开)
一个基本例子——动态更新时间(基于Servlet)
我们希望在html页面中显示一个动态变化的时间,这里使用Server-Sent Events来实现,在后台获取时间,不断发送给前台。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
function start() {
var eventSource = new EventSource("HelloServlet");
eventSource.onmessage = function(event) {
document.getElementById("foo").innerHTML = event.data;
};
}
</script>
</head>
<body>
Time: <span id="foo"></span> <br><br>
<button onclick="start()">Start</button> </body>
</html>
这是一个很简单的HTML页面,结合JS代码,我们现在是希望改变<span id="foo"></span>标签中的值,这是最纯粹的目的。下面分析代码:
1.new出一个EventSource对象,这个对象就是用来请求服务断的,它的构造方法中需要一个请求的URL,来请求哪一个Servlet/Action等。。。
2.利用EventSource对象的onmessage函数,得到服务端传递的数据。
再来分析后端代码:
public class HelloServlet extends HttpServlet {
@Override
public void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
// ContentType 必须指定为 text/event-stream
resp.setContentType("text/event-stream");
// CharacterEncoding 必须指定为 UTF-8
resp.setCharacterEncoding("UTF-8");
PrintWriter pw = resp.getWriter();
for(int i=0; i<10; i++) {
// 每次发送的消息必须以\n\n结束
pw.write("data: " + System.currentTimeMillis() + "\n\n");
try {
Thread.sleep(1000);
} catch (InterruptedException e) {
e.printStackTrace();
}
}
pw.close();
}
}
这里可以观察到,后端代码其实就是一个普通的Servlet(Web.xml省略),重写了Get方法,利用response对象得到的PrintWriter来写消息,这是一个大致的思路。
1.设置ContentType为text/event-stream
2.设置CharacterEncoding为UTF-8
3.得到PrintWriter对象,写数据,格式为: data: xxxx \n\n 注意一定要有两个\n\n作为结尾
这样就告诉了客户端:我发送了event-stream格式且编码为UTF-8的数据,数据长这样:
data: xxxx \n\n
然后客户端的JS代码利用EventSource对象的onmessage函数,监听到了服务端的数据更动,解析内容xxxx,即event.data = xxxx;
Server-Sent Events(HTML5 服务器发送事件)的更多相关文章
- HTML5: HTML5 服务器发送事件(Server-Sent Events)
ylbtech-HTML5: HTML5 服务器发送事件(Server-Sent Events) 1.返回顶部 1. HTML5 服务器发送事件(Server-Sent Events) HTML5 服 ...
- HTML5 服务器发送事件(Server-Sent Events)
沈阳SEO:HTML5 服务器发送事件(server-sent event)允许网页获得来自服务器的更新. Server-Sent 事件 - 单向消息传递 Server-Sent 事件指的是网页自动获 ...
- HTML5服务器发送事件(Server-Send Events)
HTML5服务器发送事件是允许获得来自服务器的更新. server-sent事件-单向传递消息,表示网页自动获取来自服务器的更新. 其中有一个重要的对象,eventsource对象是用来接收服务器发送 ...
- HTML5 服务器发送事件(Server-Sent Events)介绍
w3cschool菜鸟教程 Server-Sent 事件 - 单向消息传递 Server-Sent 事件指的是网页自动获取来自服务器的更新. 以前也可能做到这一点,前提是网页不得不询问是否有可用的更新 ...
- HTML5学习笔记(七)HTML5 服务器发送事件(Server-Sent Events)
Server-Sent 事件指的是网页自动获取来自服务器的更新. 以前也可能做到这一点,前提是网页不得不询问是否有可用的更新.通过服务器发送事件,更新能够自动到达. EventSource 对象用于接 ...
- 关于HTML5服务器发送事件(SSE)
最近在看 W3School 上关于 HTML 5 的教程.在看到 HTML 5 服务器发送事件 ( SSE, server-sent event ) 时,没怎么弄明白示例代码是怎么回事,寻找其他教程, ...
- [ASP.NET MVC] Real-time之HTML5 服务器发送事件(server-sent event)
最近有时间,打算看看SignalR,顺便了解一下Server Sent Events. Controller 输出的数据格式为:data:[数据]\n\n.输出的数据尝试8000多字符也没问题,具体的 ...
- HTML5 服务器发送事件
单向传输:服务器端——>客户端 作用:传回的能每过3s重新刷新一遍.从而能过跟数据库同步,与ajax配合使用 一.客户端写法 必须的用 message 方法 JSON.parse() ...
- HTML5支持服务器发送事件(Server-Sent Events)-单向消息传递数据推送(C#示例)
传统的WEB应用程序通信时的简单时序图: 现在Web App中,大都有Ajax,是这样子: HTML5有一个Server-Sent Events(SSE)功能,允许服务端推送数据到客户端.(通常叫数据 ...
随机推荐
- phpstorm的使用教程
1.设置行号:file->settings->Editor->Appearance->Show line numbers 2.设置字体和背景 :file->setting ...
- 音频指纹(Philips)
参考<A Highly Robust Audio Fingerprinting System> Philips 音频指纹提取流程: 仿真效果: 第一个图为歌曲1的第一个指纹. 第二个图为歌 ...
- 使用Java判断字符串中的中文字符数量
Java判断一个字符串str中中文的个数,经过总结,有以下几种方法(全部经过验证),可根据其原理判断在何种情况下使用哪个方法: 1. char[] c = str.toCharArray(); for ...
- 创建GitHub博客
1. 创建GitHub账号 GitHub技术博客首先需要GitHub账户,请在官网按照步骤自行注册账号. 2. 创建博客仓库 使用注册的账户登录,然后点击创建仓库,输入项目信息如下所示,注意项目名称规 ...
- 可以改变this指向的方法
this一般指向的是当前被调用者,但也可以通过其它方式来改变它的指向,下面将介绍三种方式: 1.call用作继承时: function Parent(age){ this.name=['mike',' ...
- 深入研究java.lang.Runtime类
一.概述 Runtime类封装了运行时的环境.每个 Java 应用程序都有一个 Runtime 类实例,使应用程序能够与其运行的环境相连接. 一般不能实例化一个Runtime对象, ...
- hbase集群的启动,注意几个问题
1.hbase的改的会影响器他的组件的使用, 故而, 在修改 hadoop的任何组件后, 一定要记得其它的组件也能受到影响, 一下是我在将hadoop的集群改了之后 , 再次运行hbase的时候, 就 ...
- Win7+Ubuntu双系统安装完成后时间不一致相差大概8小时
Win7+Ubuntu双系统时间不一致 解决方法: 第一种在Windows下进行如下修改: 在 注册表项:HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Con ...
- 详解ABP框架的多租户
(此文章同时发表在本人微信公众号"dotNET每日精华文章",欢迎右边二维码来关注.) 题记:ABP框架对多租户场景提供了很好的支持,内建了多租户的处理机制,今天我们来深入解析一下 ...
- 【centOS】账号管理
一.认识/etc/passwd和/etc/shadow 1.passwd的构造 上图为passwd其中一个用户的用户信息,分别表示为[用户名][密码][UID][GID][注释][家目录][Shell ...