一. 点睛
服务器端推送技术在我们日常开发中较为常用,可能早期很多人的解决方案是使用Ajax
向服务器轮询消息,使浏览器尽可能第一时间获得服务端的消息,因为这种方式的轮询频率不好控制,所以大大增加了服务端的压力。
下面要介绍的服务端推送方案都是基于:当客户端向服务端发送请求,服务端会抓住这个请求不放,等有数据更新的时候才返回给客户端,当客户端接收到消息后,再向服务端发送请求,周而复始。这种方式的好处是减少了服务器的请求数量,大大减少了服务器的压力。
除了服务器端推送技术之外,还有一个另外的双向通信的技术——WebSocket
,后面会在介绍Spring
Boot
的时候进行演示。
下面将提供基于SSE
(Server Send Event
服务端发送事件)的服务器端推送和基于Servlet3.0
+的异步方法特性的演示,其中第一种方式需要新式浏览器的支持,第二种方式是跨浏览器的。
二. 示例
1. 演示控制器
package org.light4j.springMvc4.web;
import java.util.Random;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
@Controller
public class SseController {
@RequestMapping(value="/push",produces="text/event-stream") //①
public @ResponseBody String push(){
Random r = new Random();
try {
Thread.sleep(5000);
} catch (InterruptedException e) {
e.printStackTrace();
}
return "data:Testing 1,2,3" + r.nextInt() +"\n\n";
}
}
代码解释:
① 注意,这里使用输出的媒体类型为
text/event-stream
,这是服务器端SSE
的支持,本例演示每5
秒向浏览器推送随机消息。
2. 演示页面
在src/main/resources
下面新建sse.jsp
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ 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>SSE Demo</title>
</head>
<body>
<div id="msgFrompPush"></div>
<script type="text/javascript" src="<c:url value="assets/js/jquery.js" />"></script>
<script type="text/javascript">
if (!!window.EventSource) { //①
var source = new EventSource('push');
s='';
source.addEventListener('message', function(e) {//②
s+=e.data+"<br/>";
$("#msgFrompPush").html(s);
});
source.addEventListener('open', function(e) {
console.log("连接打开.");
}, false);
source.addEventListener('error', function(e) {
if (e.readyState == EventSource.CLOSED) {
console.log("连接关闭");
} else {
console.log(e.readyState);
}
}, false);
} else {
console.log("你的浏览器不支持SSE");
}
</script>
</body>
</html>
代码解释:
①
EventSource
对象只有新式的浏览器才有(Chrome
,Firefox
等)。EventSource
的SSE
的客户端。
② 添加SSE
客户端监听,在此获得服务器端推送的消息。
3. 配置
在文件MyMvcConfig
的方法addViewControllers
中添加viewController
映射访问演示页面sse.jsp
的映射,代码如下:
registry.addViewController("/sse").setViewName("/sse");
添加完成之后的代码如下所示:
@Override
public void addViewControllers(ViewControllerRegistry registry) {
registry.addViewController("/index").setViewName("/index");
registry.addViewController("/toUpload").setViewName("/upload");
registry.addViewController("/converter").setViewName("/converter");
registry.addViewController("/sse").setViewName("/sse");
}
4. 运行。
访问http://localhost/springMvc4.x-serverSendEvent/sse
,可以看到效果如下图所示:
三. 源代码示例:
打赏 欢迎关注人生设计师的微信公众账号
公众号ID:longjiazuoA