HTML5 Server-Sent Events with JSP example

最新推荐文章于 2023-09-04 17:18:36 发布

个人知识管理布道师

最新推荐文章于 2023-09-04 17:18:36 发布

阅读量580

点赞数

分类专栏： HTML5

本文链接：https://blog.csdn.net/u010689306/article/details/51741044

版权

HTML5 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

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

收藏

觉得还不错? 一键收藏
0
评论
HTML5 Server-Sent Events with JSP example

Server-Sent 事件 - 单向消息传递Server-Sent 事件指的是网页自动获取来自服务器的更新。以前也可能做到这一点，前提是网页不得不询问是否有可用的更新。通过服务器发送事件，更新能够自动到达。例子：Facebook/Twitter 更新、估价更新、新的博文、赛事结果等。接收 Server-Sent 事件通知EventSource 对象用于接收
复制链接

扫一扫