服務端常用推送技術有：
1、用戶端輪詢:ajax定時拉取
2、服務端主動推送:WebSocket。全雙工的，本質上是一個額外的tcp連接配接，建立和關閉時握手使用http協定，其他資料傳輸不使用http協定，更加複雜一些，适用于需要進行複雜雙向資料通訊的場景。
3、服務端主動推送:SSE (Server Send Event)。html5新标準，用來從服務端實時推送資料到浏覽器端，
直接建立在目前http連接配接上，本質上是保持一個http長連接配接，輕量協定簡單的伺服器資料推送的場景，使用伺服器推送事件， SSE技術是基于單工通信模式，隻是單純的用戶端向服務端發送請求，服務端不會主動發送給用戶端。服務端采取的政策是抓住這個請求不放，等資料更新的時候才傳回給用戶端，當用戶端接收到消息後，再向服務端發送請求，周而複始。
這篇文章介紹Springboot中使用SseEmitter實作消息推送。
1、服務端：
package com.iscas.biz.test.sse;
import org.springframework.http.MediaType;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.servlet.mvc.method.annotation.SseEmitter;
import java.io.IOException;
import java.util.Map;
import java.util.concurrent.ConcurrentHashMap;
/**
* 測試SSE推送消息
*
* @author zhuquanwen
* @vesion 1.0
* @date 2021/9/11 21:01
* @since jdk1.8
*/
@RestController
@RequestMapping(path = "sse/test")
public class SseControllerTest {
private static Map<String, SseEmitter> sseCache = new ConcurrentHashMap<>();
@GetMapping(path = "subscribe", produces = {MediaType.TEXT_EVENT_STREAM_VALUE})
public SseEmitter push(String id) throws IOException {
// 逾時時間設定為3s，用于示範用戶端自動重連
SseEmitter sseEmitter = new SseEmitter(30000L);
// 設定前端的重試時間為1s
sseEmitter.send(SseEmitter.event().reconnectTime(1000).data("連接配接成功"));
sseCache.put(id, sseEmitter);
System.out.println("add " + id);
sseEmitter.onTimeout(() -> {
System.out.println(id + "逾時");
sseCache.remove(id);
});
sseEmitter.onCompletion(() -> System.out.println("完成！！！"));
return sseEmitter;
}
@GetMapping(path = "push")
public String push(String id, String content) throws IOException {
SseEmitter sseEmitter = sseCache.get(id);
if (sseEmitter != null) {
sseEmitter.send(SseEmitter.event().name("msg").data("後端發送消息：" + content));
}
return "over";
}
@GetMapping(path = "over")
public String over(String id) {
SseEmitter sseEmitter = sseCache.get(id);
if (sseEmitter != null) {
sseEmitter.complete();
sseCache.remove(id);
}
return "over";
}
}
其中
subscribe
是開啟并訂閱消息，
push
是模拟觸發後端推送，
over
是模拟斷開sse連接配接。
2、用戶端：
<!doctype html>
<html lang="en">
<head>
<title>Sse測試</title>
<meta charset="utf-8"/>
</head>
<body>
<div>sse測試</div>
<div id="result"></div>
</body>
</html>
<script>
var source = new EventSource('http://localhost:7901/demo/sse/test/subscribe?id=qwe');
//source.onmessage = function (event) {
// text = document.getElementById('result').innerText;
// text += '\n' + event.data;
// document.getElementById('result').innerText = text;
//};
source.addEventListener("msg", function(e) {
text = document.getElementById('result').innerText;
text += '\n' + e.data;
console.log(e);
document.getElementById('result').innerText = text;
//source.close();
})
source.onerror = function(e) {
if (e.readyState == EventSource.CLOSE) {
text = document.getElementById('result').innerText;
text += '\n' + "連接配接關閉";
}
}
<!-- 添加一個開啟回調 -->
source.onopen = function (event) {
text = document.getElementById('result').innerText;
text += '\n 開啟: ';
console.log(event);
document.getElementById('result').innerText = text;
};
</script>
3、測試
![Java小案例——随機數猜測随機數猜測[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)