`SseEmitter` 是 Spring Framework 提供的一个工具类，用于在 Spring MVC 或 Spring Boot 应用程序中实现 Server-Sent Events (SSE) 协议。SSE 允许服务器端以单向、长连接的方式将实时数据主动推送给客户端（通常是浏览器），而无需客户端频繁发起请求。以下是如何使用 `SseEmitter` 实现前后端交互的步骤：
### **服务端（后端）实现**
1. **创建 SseEmitter 对象**：
在处理 HTTP 请求的方法中，创建一个 `SseEmitter` 实例。通常，您会将该实例与某个客户端标识（如用户 ID 或特定资源 ID）关联起来，以便针对特定客户端推送消息。
```java
@GetMapping("/stream")
public SseEmitter handleStreamRequest() {
SseEmitter sseEmitter = new SseEmitter(); // 可以设置超时时间，如 new SseEmitter(30_000L);
return sseEmitter;
}
```
2. **配置 SseEmitter**：
可以设置 `SseEmitter` 的超时时间、心跳间隔等属性，以保持连接活跃或在必要时关闭连接。
3. **处理数据推送**：
当有新数据需要发送给客户端时，调用 `SseEmitter` 的 `send()` 方法。可以发送普通文本消息、数据对象（序列化为 JSON 等格式）、甚至自定义事件类型。
```java
public void onNewDataAvailable(String data) {
try {
(().data(data));
} catch (IOException e) {
// 处理异常，可能需要清理资源并通知其他系统连接已断开
(e);
}
}
```
4. **管理连接生命周期**：
需要确保在连接断开、异常发生或应用程序逻辑要求关闭连接时，正确地清理资源并通知客户端。通常，这包括注册一个监听器来监听 `SseEmitter` 的 `onError()` 和 `onCompletion()` 事件。
```java
(() -> {
// 清理与该客户端相关的资源
SSE_EMITTER_MAP.remove(clientId);
});
((ex) -> {
// 处理错误，如重试或记录日志
(ex);
SSE_EMITTER_MAP.remove(clientId);
});
```
5. **存储和管理 SseEmitter 实例**：
如果需要向多个客户端推送数据，可能需要将 `SseEmitter` 实例存储在一个集合（如 `Map`）中，以便后续找到对应的客户端并发送消息。这通常与客户端的唯一标识符关联。
```java
private static final Map<String, SseEmitter> SSE_EMITTER_MAP = new ConcurrentHashMap<>();
@GetMapping("/subscribe/{clientId}")
public SseEmitter subscribe(@PathVariable String clientId) {
SseEmitter sseEmitter = new SseEmitter();
SSE_EMITTER_MAP.put(clientId, sseEmitter);
// 添加生命周期监听器和处理数据推送的逻辑
return sseEmitter;
}
```
### **客户端（前端）实现**
1. **创建 EventSource 对象**：
使用 JavaScript 在浏览器中创建一个 `EventSource` 对象，指定服务器端提供的 SSE 资源 URL。
```javascript
const source = new EventSource('/stream');
```
2. **处理接收到的事件**：
注册事件处理器来处理从服务器端推送过来的不同类型的事件。SSE 通常使用 `message` 事件来传递数据，但也可以自定义事件类型。
```javascript
('message', function(event) {
const data = ; // 接收的数据
('Received:', data);
// 更新 UI 或执行其他业务逻辑
});
// 可选：处理其他自定义事件
('customEvent', function(event) {
const data = ;
// ...
});
```
3. **处理连接状态变化**：
SSE 自动处理断线重连，但也可以监听 `open`、`error` 事件以应对连接状态的变化。
```javascript
('open', function(event) {
('Connection opened');
});
('error', function(event) {
if ( === ) {
('Connection closed');
// 可能需要手动重连或其他恢复策略
}
});
```
综上所述，`SseEmitter` 通过在服务端创建并管理连接，结合前端 `EventSource` 对象监听和处理推送事件，实现了前后端之间的实时数据交互。这种方式适用于需要服务器端主动推送更新，且实时性要求不是特别严格的场景，如股票价格更新、新闻推送、简单监控数据等。对于更复杂的双向通信或对延迟敏感的应用，可能需要考虑使用 WebSocket 协议。