SSE同WebScoket的区别
sse 是单通道,只能服务端向客户端发消息,webscoket 是双通道
SSE使用
前端通过id订阅
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Sse测试文档</title>
</head>
<body>
<div>sse测试</div>
<div id="result"></div>
</body>
<script>
let source = new EventSource('http://localhost:8080/sse/subscribe2?id=test');
source.onmessage = function (event) {
text = document.getElementById('result').innerText;
text += '\n' + event.data;
document.getElementById('result').innerText = text;
};
<!-- 添加一个开启回调 -->
source.onopen = function (event) {
text = document.getElementById('result').innerText;
text += '\n 开启: ';
console.log(event);
document.getElementById('result').innerText = text;
};
</script>
</html>
后端提供订阅的接口
@ResponseBody
@GetMapping(path = "subscribe", produces = {MediaType.TEXT_EVENT_STREAM_VALUE})
public SseEmitter subscribe(String id) throws IOException {
// 超时时间设置为3s,用于演示客户端自动重连
SseEmitter sseEmitter = new SseEmitter(1_000L);
// 设置前端的重试时间为1s
sseEmitter.send(SseEmitter.event().reconnectTime(1000).data("连接成功"));
sseCache.put(id, sseEmitter);
sseEmitter.onTimeout(() -> {
log.info(id + "超时");
sseCache.remove(id);
});
sseEmitter.onCompletion(() -> log.info("完成!!!"));
return sseEmitter;
}
后端提供发送消息的接口(通过订阅的id发送消息)
@GetMapping("/push")
public String push(String id, String content) throws IOException {
SseEmitter sseEmitter = sseCache.get(id);
if (sseEmitter != null) {
sseEmitter.send(content);
}
return "finish";
}
前端接收到后段发送的消息显示在页面上
最后修改:2019-01-22 17:09:24
© 著作权归作者所有