一、服务器推送技术
①客户端轮询：Ajax定时拉取
②服务器主动推送:WebSocket
WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。
WebSocket使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。
在 WebSocket API 中，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送
③服务端主动推送:SSE 服务器发送事件(Server Send Event)
指的是网页自动获取来自服务器的更新，HTML5新标准，用来从服务端实时推送数据到浏览器端，直接建立在当前http连接上，本质上是保持一个http长连接，轻量协议。所有主流浏览器均支持SSE，除了IE。
案例:Facebook、Twitter更新、估价更新、新的博文、赛事结果等。
js代码：
var source=new EventSource("htttp://www.xxx.com");
source.onmessage=function(event)
{
document.getElementById("result").innerHTML+=event.data + "<br />";
};
- 创建一个新的
EventSource对象，然后规定发送更新的页面的url - 每接收到一次更新，就会发生
onmessage事件 - 当
onmessage事件发生时，把已接收的数据推入id为"result"的元素中
二、SpringBoot2.x服务端主动SSE
①服务器端代码
@RestController
@RequestMapping("/sse")
public class SSEController {
@RequestMapping(value = "/data",produces = MediaType.TEXT_EVENT_STREAM_VALUE)
public String data(){
try {
Thread.sleep(500);
} catch (InterruptedException e) {
e.printStackTrace();
}
return "模拟动态数据...."+Math.random();
}
}
②前端代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试服务器推送技术</title>
<script type="text/javascript">
var data=new EventSource("http://localhost:8080/sse/data")
data.onmessage = function (event) {
document.getElementById("result").innerText=event.data
}
</script>
</head>
<body>
<h1>动态数据</h1>
<div id="result"></div>
</body>
</html>
③测试效果
