HTML5 Server-Sent Events with JSP example
2016-06-23 10:19
519 查看
Server-Sent 事件 - 单向消息传递
Server-Sent 事件指的是网页自动获取来自服务器的更新。以前也可能做到这一点,前提是网页不得不询问是否有可用的更新。通过服务器发送事件,更新能够自动到达。
例子:Facebook/Twitter 更新、估价更新、新的博文、赛事结果等。
接收 Server-Sent 事件通知
EventSource 对象用于接收服务器发送事件通知:代码示例
server_sent_event.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body> <h1>获得服务器更新</h1> <div id="result"></div> <script type="text/javascript"> if(typeof(EventSource)!=="undefined"){//判断浏览器是否支持EventSource var source = new EventSource("server.jsp");//创建一个新的 EventSource对象, //然后规定发送更新的页面的URL(本例中是 "server.jsp") source.onmessage=function(event){//每接收到一次更新,就会发生 onmessage事件 document.getElementById("result").innerHTML=event.data;//把已接收的数据推入 id 为 "result" 的元素中 }; }else{ document.getElementById("result").innerHTML="sorry,your browser doesn't support event source"; } </script> </body> </html>
server.jsp
<%@page import="java.io.PrintWriter"%>
<%@page import="java.util.Date"%>
<%@page import="java.io.OutputStream"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<%
System.out.println(new Date());
response.setHeader("Content-Type", "text/event-stream");//设置服务器端事件流
response.setHeader("Cache-Control","no-cache");//规定不对页面进行缓存
PrintWriter pw = response.getWriter();
pw.write("data: " + new Date());//输出发送日期(始终以 "data: " 开头)
%>
</body>
</html>
参考资料
https://en.wikipedia.org/wiki/Server-sent_events
https://developer.mozilla.org/en-US/docs/Web/API/Server-sent_events/Using_server-sent_events
https://html.spec.whatwg.org/multipage/comms.html
相关文章推荐
- 【JavaScript】内置对象
- 【JavaScript】变量和基本包装类型
- JS判断当前浏览器来自PC或者手机
- JSP 弹出对话框的方式总结
- JavaScript 加载顺序和异步加载详解
- jseclipse 是eclipse插件,让你编写js代码感觉更爽
- javascript新窗口打开链接window.open()被阻拦的解决办法
- jackson json 转list/map
- Javascript 数组循环遍历之forEach
- Extjs中的迭代方法
- 关于js在html中执行顺序的问题
- js中遍历Map对象
- 键盘上回车按钮的js触发事件
- jsp的运行机制
- JSON数据类型的修改
- js文字闪烁效果
- 10+ 实用的 JavaScript 调试小技巧
- jsp输出金字塔的简单实例
- js拼接HTML页面
- jsp输出九九乘法表的简单实例