一、服务器推送技术

客户端轮询：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.0 实现 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>