HTML5 Server-Sent Events with JSP example

来源：互联网发布：qq飞车淘宝怎么刷魅力编辑：程序博客网时间：2024/05/30 22:46

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

0 0