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. 摄像头视频捕捉(简单通用--通过IsampleGrabberCB实现)

    前言 DirectShow是微软公司提供的一套在Windows平台上进行流媒体处理的开发包,与DirectX开发包一起发布.DirectShow为多媒体流的捕捉和回放提供了强有力的支持.用Direct ...

  2. Inode详解

    一.inode是什么 理解inode,要从文件储存说起. 文件储存在硬盘上,硬盘的最小存储单位叫做"扇区"(Sector).每个扇区储存512字节(相当于0.5KB). 操作系统读 ...

  3. python pickle

    >>> import pickle >>> m_list=[',2,'asa'] >>> m_list [', 2, 'asa'] >> ...

  4. linux编程问题记录

    1.程序中需要用到字符串的时候,尽可能选择string类型,这种类型的字符串有很多比较容易的功能,如字符串之间可以直接拷贝赋值 string a; string b="123"; ...

  5. [Android Pro] android控件ListView顶部或者底部也显示分割线

    reference to  :  http://blog.csdn.net/lovexieyuan520/article/details/50846569 在默认的Android控件ListView在 ...

  6. iOS之ToolBar定制

    ToorBar的定制 在诸如社区类的app里面,很多都涉及到用户发布消息,如现今最流行的新浪微博,每条信息底部都会有个工具条,正如下图所示,有转发.评论和点赞三个按钮的工具条. 结构 1.作为一个独立 ...

  7. 【转】B-树和B+树的应用：数据搜索和数据库索引

    B-树 1 .B-树定义 B-树是一种平衡的多路查找树,它在文件系统中很有用. 定义:一棵m 阶的B-树,或者为空树,或为满足下列特性的m 叉树: ⑴树中每个结点至多有m 棵子树: ⑵若根结点不是叶子 ...

  8. 常见开发需求之angular上拉加载更多

    需求   移动端使用angular实现上拉加载更多的条目,这个需求比较常见,网上的插件改动起来比较麻烦,不如自己写一个最适合,以前有同事写了一个,奈何bug太多,后来改分页了,我们产品说什么都让做,没 ...

  9. java线程池ThreadPoolExecutor使用简介

    一.简介线程池类为 java.util.concurrent.ThreadPoolExecutor,常用构造方法为:ThreadPoolExecutor(int corePoolSize, int m ...

  10. poj 1141 Brackets Sequence (区间dp)

    题目链接:http://poj.org/problem?id=1141 题解:求已知子串最短的括号完备的全序列 代码: #include<iostream> #include<cst ...