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 服务器发送事件）的更多相关文章

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

    ylbtech-HTML5: HTML5 服务器发送事件(Server-Sent Events) 1.返回顶部 1. HTML5 服务器发送事件(Server-Sent Events) HTML5 服 ...

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

    沈阳SEO:HTML5 服务器发送事件(server-sent event)允许网页获得来自服务器的更新. Server-Sent 事件 - 单向消息传递 Server-Sent 事件指的是网页自动获 ...

  3. HTML5服务器发送事件(Server-Send Events)

    HTML5服务器发送事件是允许获得来自服务器的更新. server-sent事件-单向传递消息,表示网页自动获取来自服务器的更新. 其中有一个重要的对象,eventsource对象是用来接收服务器发送 ...

  4. HTML5 服务器发送事件(Server-Sent Events)介绍

    w3cschool菜鸟教程 Server-Sent 事件 - 单向消息传递 Server-Sent 事件指的是网页自动获取来自服务器的更新. 以前也可能做到这一点,前提是网页不得不询问是否有可用的更新 ...

  5. HTML5学习笔记（七）HTML5 服务器发送事件(Server-Sent Events)

    Server-Sent 事件指的是网页自动获取来自服务器的更新. 以前也可能做到这一点,前提是网页不得不询问是否有可用的更新.通过服务器发送事件,更新能够自动到达. EventSource 对象用于接 ...

  6. 关于HTML5服务器发送事件(SSE)

    最近在看 W3School 上关于 HTML 5 的教程.在看到 HTML 5 服务器发送事件 ( SSE, server-sent event ) 时,没怎么弄明白示例代码是怎么回事,寻找其他教程, ...

  7. [ASP.NET MVC] Real-time之HTML5 服务器发送事件（server-sent event）

    最近有时间,打算看看SignalR,顺便了解一下Server Sent Events. Controller 输出的数据格式为:data:[数据]\n\n.输出的数据尝试8000多字符也没问题,具体的 ...

  8. HTML5 服务器发送事件

    单向传输:服务器端——>客户端   作用:传回的能每过3s重新刷新一遍.从而能过跟数据库同步,与ajax配合使用   一.客户端写法 必须的用 message 方法   JSON.parse() ...

  9. HTML5支持服务器发送事件(Server-Sent Events)-单向消息传递数据推送（C#示例）

    传统的WEB应用程序通信时的简单时序图: 现在Web App中,大都有Ajax,是这样子: HTML5有一个Server-Sent Events(SSE)功能,允许服务端推送数据到客户端.(通常叫数据 ...

随机推荐

  1. @好友的EditText

    类似微信聊天中的@好友功能,封装到一个EditText中,gist打不开了,直接贴代码到这里吧: /*** @好友的输入组件*/public class AtEditText extends Edit ...

  2. windows系统和ubuntu虚拟机之间文件共享——samba

    参考:http://www.cnblogs.com/phinecos/archive/2009/06/06/1497717.html 一. samba的安装: sudo apt-get insall  ...

  3. JVM内存管理------垃圾搜集器精解（让你在垃圾搜集器的世界里耍的游刃有余）

    引言 在上一章我们已经探讨过hotspot上垃圾搜集器的实现,一共有六种实现六种组合.本次LZ与各位一起探讨下这六种搜集器各自的威力以及组合的威力如何. 为了方便各位的观看与对比,LZ决定采用当初写设 ...

  4. oracle导入导出数据

    导入数据,cmd   imp 导出数据,cmd   exp

  5. 【目录】linux

    linux 学习1 学习2 学习3 学习4 学习5 学习6 学习7 jdk安装 配置SSH免密码登陆 linux下运行java程序

  6. Tcl

    Tcl(发音 tickle)是一种脚本语言.由John Ousterhout创建.TCL经常被用于快速原型开发 RAD.脚本编程.GUI编程和测试等方面. Expect Expect是 另外一种非常流 ...

  7. JS Date

    JS获取当前日期时间 var myDate = new Date();myDate.getFullYear();    //获取完整的年份(4位,1970-????)myDate.getMonth() ...

  8. AngularJS Select(选择框)

    AngularJS 可以使用数组或对象创建一个下拉列表选项. 使用 ng-option 创建选择框 在 AngularJS 中我们可以使用 ng-option 指令来创建一个下拉列表,列表项通过对象和 ...

  9. 【Java EE 学习 22 上】【文件上传】【目录打散】【文件重命名】

    1.文件上传概述 (1)使用<input type="file">的方式来声明一个文件域. (2)表单提交方式一定要是post方式才行 (3)表单属性enctype 默 ...

  10. IP地址的分类

    IPv4 地址的分类:   一,组成   1. 使用32位地址 2. 以点分十进制表示,如172.16.0.0,每一个数字对应于8个二进制的比特串,称为一个位组(octets).如某一台主机的IP地址 ...