什么是 SSE (Server-Sent Events)？
Server-Sent Events (SSE) 是一种基于 HTTP 协议的技术，允许服务器主动向客户端发送实时更新数据。与 WebSockets 和传统的 HTTP 请求不同，SSE 是单向通信：从服务器到客户端。服务器通过一个持续的连接推送数据到客户端，客户端只需要接收数据。
SSE 适用于需要从服务器实时推送数据到客户端的场景，比如实时通知、新闻更新、股市行情、社交网络消息等。
特点
- 单向通信：数据流从服务器到客户端，客户端不能向服务器发送数据。
- 基于 HTTP 协议：SSE 是基于 HTTP 协议的，使用标准的 HTTP 请求进行数据传输，不需要使用 WebSocket 或其他协议。
- 自动重连：如果连接断开，浏览器会自动重连服务器，确保实时数据的持续传输。
- 事件流格式：SSE 使用一种简单的文本格式来表示消息，包括数据、事件类型、ID 等信息。
- 兼容性好：SSE 广泛支持现代浏览器，适用于需要推送实时更新的 Web 应用。
SSE 工作原理
- 客户端发起连接：客户端（如浏览器）向服务器发起一个 HTTP 请求，要求建立 SSE 连接。
-
服务器响应：服务器返回一个
text/event-stream类型的响应，并开始持续不断地向客户端发送数据。 -
服务器推送数据：服务器以
text/event-stream格式将数据推送到客户端，数据通过流的方式发送，客户端每次接收到一个完整的消息。 - 自动重连：如果连接意外断开，浏览器会自动重新连接到服务器，确保数据流不中断。
SSE 消息格式
SSE 消息的格式非常简单，每条消息由以下部分组成：
- data: 消息内容。
- id: 消息的唯一标识符（可选，通常用于标记历史消息）。
- event: 消息类型（可选，用于区分不同类型的事件）。
- retry: 客户端重连的延迟时间（可选）。
消息格式示例：
event: messageType data: This is a message from server id: 1 retry: 10000
SSE 的优势
- 简单易用：基于 HTTP 协议的流数据，不需要复杂的配置或额外的库。
- 自动重连：浏览器在连接中断时会自动尝试重新连接。
- 低延迟：数据可以几乎即时地从服务器推送到客户端。
- 资源占用少：相比 WebSocket，SSE 使用 HTTP 协议，连接会比较轻量，且客户端自动管理连接。
- 广泛支持：大部分现代浏览器支持 SSE，使用时无需额外的插件。
SSE 的劣势
- 单向通信：SSE 只能用于从服务器到客户端的单向通信，无法处理客户端到服务器的请求。
- 浏览器兼容性问题：虽然大多数现代浏览器支持 SSE，但仍有一些老版本的浏览器不支持。
- 服务器负担：如果客户端数量很多，服务器需要维持很多长连接，可能对服务器性能产生压力。
- 不支持跨域：需要配置服务器以支持跨域请求，否则不同域名的 SSE 请求会被阻止。
SSE 的实现
1. 服务器端实现
以 Java 的 Spring Boot 为例，服务器端需要在响应中设置 Content-Type: text/event-stream，并通过持续的 HTTP 连接将数据推送到客户端。
示例代码：
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;
import java.io.IOException;
import java.io.PrintWriter;
import java.time.LocalDateTime;
@RestController
public class SSEController {
@GetMapping("/sse")
public void streamEvents(HttpServletResponse response) throws IOException {
response.setContentType("text/event-stream");
response.setCharacterEncoding("UTF-8");
PrintWriter writer = response.getWriter();
while (true) {
writer.write("data: " + "Current Time: " + LocalDateTime.now() + "\n\n");
writer.flush();
// 每隔一秒推送一次数据
try {
Thread.sleep(1000);
} catch (InterruptedException e) {
e.printStackTrace();
}
}
}
}
解释：
response.setContentType("text/event-stream")：设置响应的类型为 text/event-stream，这是 SSE 数据流的标准类型。
writer.write("data: " + data + "\n\n")：向客户端发送消息，SSE 消息的格式以 data: 开头，消息内容后跟两个换行符。
Thread.sleep(1000)：每秒推送一次当前时间。
- 客户端实现
在客户端，使用 JavaScript 中的 EventSource API 来接收服务器推送的消息。
示例代码：
<!DOCTYPE html>
<html>
<head>
<title>SSE Example</title>
</head>
<body>
<h1>SSE Demo</h1>
<div id="messages"></div>
<script type="text/javascript">
const eventSource = new EventSource('/sse');
eventSource.onmessage = function(event) {
// 当接收到事件时，更新页面
const messageDiv = document.getElementById('messages');
const newMessage = document.createElement('p');
newMessage.textContent = event.data; // event.data 是服务器发送的数据
messageDiv.appendChild(newMessage);
};
eventSource.onerror = function(error) {
console.error("Error occurred: ", error);
};
</script>
</body>
</html>
解释：
new EventSource('/sse')：创建一个新的 EventSource 实例，连接到服务器端的 /sse 路径。
onmessage 事件：每当服务器推送消息时，这个事件会被触发，客户端可以通过 event.data 获取到消息内容并进行处理。
onerror 事件：如果连接断开或出现错误时触发，可以用来处理错误并进行重连。
