SSE——一种服务器向浏览器推送消息的技术

2023-11-24 14:01:29

初识 SSE

SSE(Server-Sent Events) 是一种服务器向浏览器推送消息的技术，它可以通过创建和发送服务器端事件来实现。服务器端事件是通过 HTTP 服务器通过特定通道向浏览器发送消息，从而允许服务器在没有客户端请求的情况下更新浏览器页面。

SSE 的优势主要体现在以下几个方面：

服务器端事件是基于 HTTP 协议的，因此不需要额外的插件或库。
服务器端事件可以轻松地与其他服务器端技术集成。
服务器端事件允许服务器在没有客户端请求的情况下更新浏览器页面，这可以减少服务器和浏览器的通信开销。

SSE 的局限主要体现在以下几个方面：

SSE 不支持双向通信，即浏览器无法向服务器发送消息。
SSE 对浏览器兼容性有一定的要求，例如 IE 浏览器不支持 SSE。
SSE 需要服务器端有一定的支持，例如服务器端需要能够创建和发送服务器端事件。

SSE 的工作原理

SSE 的工作原理如下：

浏览器向服务器发送一个 HTTP 请求，并在请求头中指定 Accept: text/event-stream。
服务器端接收到请求后，创建一个服务器端事件源，并通过 HTTP 服务器将服务器端事件源发送给浏览器。
浏览器接收到服务器端事件源后，开始监听服务器端事件源。
服务器端每当有新的服务器端事件需要发送时，就会通过服务器端事件源将服务器端事件发送给浏览器。
浏览器接收到服务器端事件后，就会触发相应的事件监听器。

SSE 的应用场景

SSE 的应用场景非常广泛，例如：

实时消息推送：SSE 可以用于推送实时消息，例如聊天消息、新闻更新、股票价格等。
数据更新：SSE 可以用于推送数据更新，例如天气预报、体育比赛比分、航班信息等。
进度更新：SSE 可以用于推送进度更新，例如文件上传进度、任务执行进度等。

SSE 的示例

下面是一个使用 SSE 推送实时消息的示例：

// 服务器端代码
public class SSEController {

    @GetMapping("/sse")
    public String sse() {
        return "sse";
    }

    @PostMapping("/sse")
    public ResponseEntity<Flux<ServerSentEvent<String>>> sse(@RequestBody String message) {
        Flux<ServerSentEvent<String>> flux = Flux.generate(sink -> {
            sink.next(ServerSentEvent.builder().data(message).build());
        });
        return ResponseEntity.ok().contentType(MediaType.TEXT_EVENT_STREAM).body(flux);
    }

}

// 客户端代码
$(document).ready(function () {
    var source = new EventSource('/sse');
    source.addEventListener('message', function (event) {
        console.log(event.data);
    });
});

在这个示例中，服务器端代码使用 Spring Boot 框架开发，客户端代码使用 jQuery 框架开发。服务器端代码通过 @GetMapping 注解映射 /sse 路径，并返回一个简单的 HTML 页面。客户端代码通过 EventSource 对象连接到 /sse 路径，并在收到服务器端事件时触发相应的事件监听器。