分享SSE的实现

什么是 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 事件：如果连接断开或出现错误时触发，可以用来处理错误并进行重连。

分享SSE的实现