在HTML5的服务器发送事件中，使用EventSource对象可以接收服务器发送事件的通知。

示例：

es.html

 <!DOCTYPE html>

 <html>

 <head>

 <meta charset="UTF-8">

 <title>Insert title here</title>

 <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>

 <script src="https://cdn.bootcss.com/event-source-polyfill/0.0.9/eventsource.min.js"></script>

 </head>

 <body>

 <ul id="list">

 </ul>

 <script>

 var source = new EventSource("test1");

 source.onmessage = function(event) {

     var item = $("<li></li>").html(event.data);

     $("#list").append(item);

 }

 </script>

 </body>

 </html>

服务端接收我用的是Spring MVC实现的：

Demo1Controller.java

 package com.test.controller;

 import java.util.Date;

 import org.springframework.stereotype.Controller;

 import org.springframework.web.bind.annotation.RequestMapping;

 import org.springframework.web.bind.annotation.ResponseBody;

 @Controller

 public class Demo1Controller {

     @ResponseBody

     @RequestMapping(value="/test1",produces="text/event-stream;charset=UTF-8")

     public String test6() {

         return "retry:5000\ndata:" + new Date().toLocaleString() + "\n\n";

     }

 }

页面效果：

这个示例实现了每隔5秒钟从服务器获取当前服务器时间，并输出到页面上。

下面我解释一下关键代码：

es.html网页第7行，是引入了eventsource.min.js脚本，加入这个脚本是为了让IE8及以上版本的IE可以支持EventSource，EventSource在目前所有版本都不支持。在其他主流浏览器如谷歌，火狐等都是支持的

es.html网页第13行，是创建EventSource对象，并建立和服务端请求test1的连接

es.html网页第14行，是用来接收服务端发来的数据，并进行后续操作

java类第13行，需要在注解添加属性produces="text/event-stream;charset=UTF-8"，不然会报错：EventSource's response has a charset ("iso-8859-1") that is not UTF-8. Aborting the connection.

java类第15行，是EventSource接收数据的固定格式：retry:${毫秒数}\ndata:${返回数据}\n\n，retry是指每隔多久请求一次服务器，data是指要接收的数据。注意这个retry参数不是必须的，如果不填写，对应的浏览器会有一个默认间隔时间，谷歌默认是3000毫秒，也就是3秒钟。

HTML5中使用EventSource实现服务器发送事件的更多相关文章

  1. HTML5的服务器EventSource(server-sent event)发送事件

    参考资料: HTML5的服务器(server-sent event)发送事件有什么应用场景? W3school HTML 5 服务器发送事件 『后台消息推送功能』,前端除了轮询.scoket.第三方服 ...

  2. 【HTML5】Server-Sent服务器发送事件

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

  3. HTML5学习(十一)---服务器发送事件

    参考教程:http://www.w3school.com.cn/html5/html_5_serversentevents.asp HTML5 服务器发送事件(server-sent event)允许 ...

  4. HTML5 总结-服务器发送事件-9

    HTML 5 服务器发送事件 HTML5 服务器发送事件(server-sent event)允许网页获得来自服务器的更新. Server-Sent 事件 - 单向消息传递 Server-Sent 事 ...

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

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

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

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

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

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

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

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

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

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

随机推荐

  1. 05-Vue组件

    定义Vue组件 什么是组件: 组件的出现,就是为了拆分Vue实例的代码量的,能够让我们以不同的组件,来划分不同的功能模块,将来我们需要什么样的功能,就可以去调用对应的组件即可: 组件化和模块化的不同: ...

  2. 浅谈Python设计模式 - 代理模式

    声明:本系列文章主要参考<精通Python设计模式>一书,并且参考一些资料,结合自己的一些看法来总结而来. 一.在某些应用中,我们想要在访问某个对象之前执行一个或者多个重要的操作,例如,访 ...

  3. windows下，tomcat设置为服务启动

    一.配置号tomcat 二.cmd命令符下进入tomcat/bin目录,输入:service.bat install 三.运行中输入services.msc 打开服务管理控制台,可以找到 Apache ...

  4. 2019年杭电多校第二场 1002题Beauty Of Unimodal Sequence(LIS+单调栈)

    题目链接 传送门 思路 首先我们对\(a\)正反各跑一边\(LIS\),记录每个位置在前一半的\(LIS\)中应该放的位置\(ans1[i]\),后一半的位置\(ans2[i]\). 对于字典序最小的 ...

  5. js 正则表达式 贪婪与惰性

    首先引入一个介绍比较详细的网站 http://www.jb51.net/article/31491.htm 接下来是本人的简介 其实贪婪和惰性很容易理解,从字面意思我们就可以知道,所谓的"贪 ...

  6. 15、Python面向对象基础

    和其它编程语言相比,Python 在尽可能不增加新的语法和语义的情况下加入了类机制. Python中的类提供了面向对象编程的所有基本功能:类的继承机制允许多个基类,派生类可以覆盖基类中的任何方法,方法 ...

  7. Exception的异常分类与处理

    一. 异常:  1:错误的分类          1)Error:错误(不可控),一般指的是系统方面的异常,比如 蓝屏,内存溢出,jvm运行环境出现了问题.          2) Exception ...

  8. secureCRT无操作自动登出时间修改（亲测可用）

    转自:http://blog.sina.com.cn/s/blog_6bcf42010102vlt9.html secureCRT连接机器经常会因为一段时间无操作就退出了,提示timed out wa ...

  9. hive中删除表的错误Error, return code 1 from org.apache.hadoop.hive.ql.exec.DDLTask. MetaException

    hive使用drop table 表名删除表时报错,return code 1 from org.apache.hadoop.hive.ql.exec.DDLTask. MetaException 刚 ...

  10. MapReduce内存调优

    内存调优 Hadoop处理数据时,出现内存溢出的处理方法?(内存调优) 1.Mapper/Reducer阶段JVM内存溢出(一般都是堆) 1)JVM堆(Heap)内存溢出:堆内存不足时,一般会抛出如下 ...