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

SSE详解

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

一、SSE的主要特点

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

二、SSE的实现流程

1. 前端实现

   • 创建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();
   

2. 后端实现（以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<