SSE使用

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";
  }