实战SpringBoot SSE服务端主动推送消息给前端

2023-01-21 20:34:46

在 Spring Boot 中拥抱 SSE：轻松实现服务器端主动推送

简介

准备迎接令人着迷的 SSE（Server-Sent Events），一种服务器端推送技术，它将彻底改变你的应用程序，让它们实时且高效。准备好踏上激动人心的旅程，我们将深入探讨如何巧妙地利用 SSE，让你的 Spring Boot 应用程序脱颖而出。

什么是 SSE？

SSE 是一种服务器端推送技术，它允许服务器在客户端不断轮询时将事件主动发送给客户端。服务器和客户端之间建立的持续 HTTP 长连接，允许服务器随时向客户端发送事件，而客户端持续监听这些事件，就像一个始终保持联系的朋友。

在 Spring Boot 中集成 SSE

整合 SSE 就像在厨房里制作你最喜欢的菜一样简单。让我们创建 SSE 控制器，负责处理 SSE 请求并向客户端发送令人兴奋的事件。

@RestController
public class SSEController {

    private final SseEmitter emitter;

    public SSEController() {
        this.emitter = new SseEmitter();
    }

    @GetMapping("/sse")
    public SseEmitter handleSSE() {
        // 处理 SSE 请求，向客户端推送事件
        return emitter;
    }

    public void sendEvent(String event) {
        // 向客户端发送事件
        emitter.send(SseEmitter.event().data(event));
    }
}

前端拥抱 SSE

现在，让我们为我们的前端穿戴 SSE 的魔法。它可以轻松监听服务器推送的事件。

const eventSource = new EventSource('/sse');

eventSource.onmessage = (event) => {
    // 当接收到事件时处理
};

eventSource.onerror = (error) => {
    // 当出现错误时处理
};

eventSource.onclose = () => {
    // 当连接关闭时处理
};

实战案例：实时聊天室

现在是时候将理论付诸实践了。让我们构建一个实时聊天室，让用户可以无缝地交流。

服务端 SSE 控制器

@RestController
public class ChatController {

    private final SseEmitter emitter;
    private final List<String> messages;

    public ChatController() {
        this.emitter = new SseEmitter();
        this.messages = new ArrayList<>();
    }

    @GetMapping("/chat")
    public SseEmitter handleSSE() {
        // 处理 SSE 请求，向客户端推送消息
        return emitter;
    }

    @PostMapping("/chat")
    public void sendMessage(@RequestBody String message) {
        // 处理传入的消息，向所有连接的客户端广播
        messages.add(message);
        emitter.send(SseEmitter.event().data(message));
    }
}

前端聊天室

<!DOCTYPE html>
<html>
<head>
  <script src="/sse.js"></script>
</head>
<body>
  <div id="chat-room">
    <ul id="messages"></ul>
    <form id="send-message">
      <input type="text" id="message-input">
      <button type="submit">发送</button>
    </form>
  </div>
</body>
</html>

const eventSource = new EventSource('/chat');

eventSource.onmessage = (event) => {
    // 接收并显示新消息
};

const sendMessageForm = document.getElementById('send-message');

sendMessageForm.addEventListener('submit', (event) => {
    // 处理表单提交，发送消息
});