当前位置：首页 > news >正文

SSE与Websocket详解，SSE实现对话框流式输出

news 来源：原创 2025/6/9 20:08:52

SSE详解

SSE（Server-Sent Events）是一种在Web应用中实现单向实时通信的技术，它允许服务器主动向客户端发送更新，而无需客户端不断发起请求。SSE基于HTTP协议，利用HTTP的长连接特性，通过浏览器向服务器发送一个HTTP请求，建立一条持久化的连接，然后服务器可以通过这条连接持续地向客户端发送数据流。以下是SSE实现流式输出的详解：

一、SSE的主要特点

单向通信：数据从服务器流向客户端，客户端不能直接向服务器发送数据。
基于HTTP：SSE使用HTTP协议，简单易用，支持浏览器。
自动重连：如果连接丢失，浏览器会自动尝试重连。
文本格式：数据以文本流的形式发送，通常是UTF-8编码。

二、SSE的实现流程

前端实现
- 创建EventSource对象：通过指定服务器端的SSE URL，创建一个EventSource实例。例如：
```
const eventSource = new EventSource('http://localhost:8080/sse/chat');
```
- 处理接收到的信息：使用onmessage事件处理程序接收服务器发送的消息。例如：
```
eventSource.onmessage = function(event) {
     
	console.log('Received:', event.data);
	// 在这里处理接收到的数据，比如更新UI
};
```
- 处理特定事件：如果服务器发送了不同类型的事件，可以使用addEventListener方法处理特定事件。例如：
```
eventSource.addEventListener('customEvent', function(event) {
     
	console.log('Custom event received:', event.data);
});
```
- 处理连接错误问题：使用onerror事件处理程序来处理连接错误。例如：
```
eventSource.onerror = function(event) {
     
	console.error('EventSource failed:', event);
};
```
- 关闭连接：如果不再需要接收消息，可以通过调用close方法来关闭连接。例如：
```
eventSource.close();
```

后端实现（以Java Spring Boot为例）

导入web依赖：在Spring Boot项目的pom.xml文件中添加spring-boot-starter-web依赖。
创建Controller类：在Spring Boot项目中创建一个Controller类，用于处理SSE请求。例如：

@RestController
@RequestMapping("/sse")
public class SSEController {
     
	@GetMapping(value = "/chat", produces = MediaType.TEXT_EVENT_STREAM_VALUE)
	public SseEmitter sseChat() {
     
		SseEmitter emitter = new SseEmitter<