HTML5中使用EventSource实现服务器发送事件
在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实现服务器发送事件的更多相关文章
- HTML5的服务器EventSource(server-sent event)发送事件
参考资料: HTML5的服务器(server-sent event)发送事件有什么应用场景? W3school HTML 5 服务器发送事件 『后台消息推送功能』,前端除了轮询.scoket.第三方服 ...
- 【HTML5】Server-Sent服务器发送事件
Server-Sent 事件 - 单向消息传递 Server-Sent 事件指的是网页自动获取来自服务器的更新. 以前也可能做到这一点,前提是网页不得不询问是否有可用的更新.通过服务器发送事件,更新能 ...
- HTML5学习(十一)---服务器发送事件
参考教程:http://www.w3school.com.cn/html5/html_5_serversentevents.asp HTML5 服务器发送事件(server-sent event)允许 ...
- HTML5 总结-服务器发送事件-9
HTML 5 服务器发送事件 HTML5 服务器发送事件(server-sent event)允许网页获得来自服务器的更新. Server-Sent 事件 - 单向消息传递 Server-Sent 事 ...
- HTML5支持服务器发送事件(Server-Sent Events)-单向消息传递数据推送（C#示例）
传统的WEB应用程序通信时的简单时序图: 现在Web App中,大都有Ajax,是这样子: HTML5有一个Server-Sent Events(SSE)功能,允许服务端推送数据到客户端.(通常叫数据 ...
- HTML5服务器发送事件(Server-Send Events)
HTML5服务器发送事件是允许获得来自服务器的更新. server-sent事件-单向传递消息,表示网页自动获取来自服务器的更新. 其中有一个重要的对象,eventsource对象是用来接收服务器发送 ...
- HTML5 服务器发送事件(Server-Sent Events)
沈阳SEO:HTML5 服务器发送事件(server-sent event)允许网页获得来自服务器的更新. Server-Sent 事件 - 单向消息传递 Server-Sent 事件指的是网页自动获 ...
- HTML5: HTML5 服务器发送事件(Server-Sent Events)
ylbtech-HTML5: HTML5 服务器发送事件(Server-Sent Events) 1.返回顶部 1. HTML5 服务器发送事件(Server-Sent Events) HTML5 服 ...
- HTML5 服务器发送事件(Server-Sent Events)介绍
w3cschool菜鸟教程 Server-Sent 事件 - 单向消息传递 Server-Sent 事件指的是网页自动获取来自服务器的更新. 以前也可能做到这一点,前提是网页不得不询问是否有可用的更新 ...
随机推荐
- Centos 7配置阿里云yum源
1. 禁用 yum插件 fastestmirror 1)修改插件的配置文件 # cp /etc/yum/pluginconf.d/fastestmirror.conf /etc/yum/pluginc ...
- IIS配置伪静态 集成模式 样式丢失
最近将一个老网站迁移到新服务器,因为需要做伪静态配置,在网上找了一些教程跟着配置.结果却出现:按照网上教程配置完后将应用程序池模式改为经典模式,然后验证规则就匹配不了.改成集成模式验证规则能匹配但是网 ...
- LINUX基础学习之基础命令（2）--2019-11-18
1.ls :命令(list):列出指定目录下的内容 用法:ls [选项] [文件名...] [root@Redhat-7-43 ~]# which ls alias ls='ls --color=a ...
- Xmind8 Pro 最新版破解教程（序列号|破解文件|视频教程）
文字教程: (文字说明部分是为了增强教程的完整性,可以直接看视频教程部分) 一.下载XMindCrack.jar文件: 百度云(https://pan.baidu.com/s/1x5Y4FFG61MT ...
- linux日志详解-摘录
小编言:会看Linux日志是非常重要的,不仅在日常操作中可以迅速排错,也可以快速的定位.` Liunx的配置文件在/etc/rsyslog.d里,可以看到如下信息这里的意思是将不通的所有优先级的信息输 ...
- 洛谷 P1330 封锁阳光大学题解
题目描述 曹是一只爱刷街的老曹,暑假期间,他每天都欢快地在阳光大学的校园里刷街.河蟹看到欢快的曹,感到不爽.河蟹决定封锁阳光大学,不让曹刷街. 阳光大学的校园是一张由N个点构成的无向图,N个点之间由M ...
- V-rep（1）
第一次课堂作业,需要导入网格三维模型,对齐坐标系,然后在各个关节添加jiont,实现外观模型和运动仿真模型的分离. 1.首先导入模型.导入模型可能是一个整体模型(装配好的),也可能是单个(mesh)网 ...
- Pycharm中设置默认头注释
在编写Python项目时,我们可能需要添加一些默认的信息,比如添加文件创建的时间,比如添加文件作者,等等,这些信息可以自己在python脚本中添加,但是也可以在Pycharm中配置模板,每次创建文件的 ...
- js动画--透明度变化
对于设置元素的透明度的变化.主要思想也是通过一个定时器来控制的. 此外对于透明度有一点要说明一下,就是在IE中我们在css中设置透明度的方式filter:alpha(opacity:value)其中v ...
- CF472G Increase the Constraints
Increase the Constraints 定义两个等长的01字符串的汉明距离为它们字符不同的对应位置的个数. 给你两个01串S,T,现在有q个询问,每次指定S,T中两个定长的子串询问它们的汉明 ...