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

示例：

es.html

  1.  <!DOCTYPE html>
  2.  <html>
  3.  <head>
  4.  <meta charset="UTF-8">
  5.  <title>Insert title here</title>
  6.  <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
  7.  <script src="https://cdn.bootcss.com/event-source-polyfill/0.0.9/eventsource.min.js"></script>
  8.  </head>
  9.  <body>
  10.  <ul id="list">
  11.  </ul>
  12.  <script>
  13.  var source = new EventSource("test1");
  14.  source.onmessage = function(event) {
  15.      var item = $("<li></li>").html(event.data);
  16.      $("#list").append(item);
  17.  }
  18.  </script>
  19.  </body>
  20.  </html>

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

Demo1Controller.java

  1.  package com.test.controller;
  2.  
  3.  import java.util.Date;
  4.  
  5.  import org.springframework.stereotype.Controller;
  6.  import org.springframework.web.bind.annotation.RequestMapping;
  7.  import org.springframework.web.bind.annotation.ResponseBody;
  8.  
  9.  @Controller
  10.  public class Demo1Controller {
  11.  
  12.      @ResponseBody
  13.      @RequestMapping(value="/test1",produces="text/event-stream;charset=UTF-8")
  14.      public String test6() {
  15.          return "retry:5000\ndata:" + new Date().toLocaleString() + "\n\n";
  16.      }
  17.  
  18.  }

页面效果：

这个示例实现了每隔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. X509证书信任管理器类的详解

    在JSSE中,证书信任管理器类就是实现了接口X509TrustManager的类.我们可以自己实现该接口,让它信任我们指定的证书. 接口X509TrustManager有下述三个公有的方法需要我们实现 ...

  2. selenium.获取浏览器大小、设置浏览器位置、最大化浏览器

    此篇博客学习控制浏览器的api,分别有: get_window_size() 获取浏览器大小 set_window_size() 设置浏览器位置 get_window_position() 获取浏览器 ...

  3. PostgreSQL分区表实现——pg_pathman分区表管理

    该博文用于自己学习记录,内容节选自: https://github.com/digoal/blog/blob/master/201610/20161024_01.md pg_pathman 创建分区表 ...

  4. eclipse集成lombok插件

    原文:https://my.oschina.net/u/3771868/blog/1837243 lombok官网:https://projectlombok.org/jar包下载路径:https:/ ...

  5. 【还是畅通工程 HDU - 1233】【Kruskal模板题】

    Kruskal算法讲解 该部分内容全部摘录自刘汝佳的<算法竞赛入门经典> Kruskal算法的第一步是给所有边按照从小到大的顺序排列. 这一步可以直接使用库函数 qsort或者sort. ...

  6. php命令模式(command pattern)

    ... <?php /* The command pattern decouples the object that executes certain operations from objec ...

  7. httprunner学习17-linux上安装httprunner环境

    前言 如果你是在linux上安装httprunner环境,用的是python3的环境,安装成功后会发现hrun命令找不到,需添加软链接. 环境准备: centos 7.6 python 3.6 htt ...

  8. Lombok 学习资料

    Lombok 学习资料 网址 Lombok 官方网站 https://projectlombok.org/features/all Lombok:让JAVA代码更优雅 http://blog.didi ...

  9. Redis Cluster数据分片机制

    复制粘贴自: https://www.e-learn.cn/content/redis/2344485, 点击链接访问原文 仅供个人学习参考之用, 如有侵权, 请联系删除! 高级开发不得不懂的Redi ...

  10. 关于python Tk中实时的输出.

    源码如下: import time from Tkinter import * def run(): while True: txt.insert(END,'...') print '...' tim ...