AI流式接口背后的SSEServer-Sent Events服务器推送事件技术就像一个可以让服务器主动向网页“单向广播”消息的通道。它特别适合那些需要“边生成边显示”的场景比如AI对话中的“打字机”效果。SSEServer-Sent Events是一项让AI应用能像真人聊天一样一个字一个字往外蹦回复的核心技术。它就像一根从服务器连到你浏览器的数据水管服务器可以随时通过这根管子往你这边浇水推送数据。 什么是SSE为什么AI用它你可以把SSE简单理解为一种单向的、持续的服务器推送技术。告别转圈等待传统HTTP请求像你问-我答必须等AI把整个回答想完一次性全给你。而SSE是你问一句AI边想边说想好一个字就先送一个字你就能看到实时的打字机效果。天生适合大模型大模型生成回答需要时间SSE的流式传输完美匹配了这个一边生成一边输出的过程极大提升了用户体验。它和经常被一起比较的WebSocket有啥区别最关键的一点是SSE是单向的服务器→客户端而WebSocket是双向的服务器↔客户端。对于我问AI答这种场景单向的SSE更轻量、实现更简单。WebSocket则更适合聊天室、在线游戏等需要频繁双向交互的场景。 怎么用SSE前后端配合使用SSE通常需要前端客户端和后端服务端配合。核心要点速览我把SSE的关键知识点整理成了下面这个表格方便你快速掌握它的全貌方面关键点技术本质基于HTTP的单向通信协议允许服务器主动向客户端推送数据建立了一个“客户端监听服务器广播”的连接。核心优势轻量、简单基于HTTP支持自动重连非常适合服务器到客户端的单向数据流场景。典型应用AI大模型流式对话实现逐字显示、实时通知、股票行情、新闻推送等。与WebSocket对比SSE是单向的仅服务器推送到客户端WebSocket是双向全双工。聊天、在线游戏等需要双向交互的场景用WebSocket更合适。数据格式数据以data: 内容\n\n的格式传输以两个换行符分隔不同消息。标准结束标记通常是data: [DONE][citation:1][citation:4]。关键概念与使用场景1. 什么是SSE如何工作SSEServer-Sent Events是一种让服务器能通过HTTP协议向浏览器持续推送数据的技术。它的工作流程很简单客户端如浏览器通过普通的HTTP请求向服务器发起一个连接。服务器接收到请求后保持这个连接不断开并设置响应头Content-Type: text/event-stream。之后服务器就可以随时通过这个连接把数据片段如AI生成的下一个词推送给客户端。2. 为什么AI流式接口青睐SSE在AI对话中我们追求的是用户提问后答案能一个字一个字地“蹦”出来而不是等很久后一次性显示一整段话。SSE天然支持这种流式传输能让服务器在生成内容的同时就推送给用户极大地降低了首字延迟提升了交互体验。3. SSE与WebSocket如何选择这是开发者最常遇到的问题。简单来说如果只需要服务器单向推送数据比如AI流式回复、股票行情SSE是更轻量、更简单的选择。如果需要客户端和服务器双向实时通信比如聊天应用、在线游戏那就需要WebSocket。详细代码示例下面我们通过前端JavaScript和几种主流后端语言的代码来看如何实现一个完整的SSE流式交互。前端实现 (JavaScript)前端通过EventSourceAPI可以非常简单地“订阅”服务器的消息流。html!DOCTYPE html html body div idoutput/div script // 1. 建立SSE连接监听服务端的 /stream 接口 const eventSource new EventSource(/stream); // 2. 监听服务器发来的消息 (默认事件) eventSource.onmessage function(event) { // 如果接收到结束标记关闭连接 if (event.data [DONE]) { eventSource.close(); return; } // 将接收到的数据片段追加到页面 const outputDiv document.getElementById(output); const newSpan document.createElement(span); newSpan.textContent event.data; outputDiv.appendChild(newSpan); // 自动滚动到底部模拟打字效果 window.scrollTo(0, document.body.scrollHeight); }; // 监听连接打开 eventSource.onopen function(e) { console.log(SSE连接已建立); }; // 监听错误事件含自动重连 eventSource.onerror function(e) { if (e.target.readyState EventSource.CLOSED) { console.log(SSE连接已关闭); } else { console.log(SSE连接出错即将自动重连...); } }; /script /body /html后端实现 (Node.js - Express)后端需要设置正确的响应头并分块写入数据。javascriptconst express require(express); const app express(); // 模拟一个流式响应的接口 app.get(/stream, (req, res) { // 1. 设置SSE必需的响应头 res.writeHead(200, { Content-Type: text/event-stream, // 声明这是SSE流 Cache-Control: no-cache, // 禁用缓存 Connection: keep-alive // 保持长连接 }); // 要返回的完整消息 const fullMessage 你好世界这是一个流式响应的例子。; let index 0; // 2. 模拟逐字推送数据 const intervalId setInterval(() { if (index fullMessage.length) { // 按照SSE协议格式 data: 内容\n\n res.write(data: ${fullMessage[index]}\n\n); index; } else { // 3. 发送完毕发送结束标记并关闭连接 res.write(data: [DONE]\n\n); clearInterval(intervalId); res.end(); } }, 100); // 每100ms发送一个字模拟打字效果 }); app.listen(3000, () { console.log(Server is running on port 3000); });后端实现 (Python - Flask)使用Flask实现SSE可以通过生成器函数Generator来yield数据。pythonfrom flask import Flask, Response, stream_with_context import time app Flask(__name__) app.route(/stream) def stream(): # 流式响应生成器 def generate(): full_message 你好世界这是一个Flask实现的流式响应。 for char in full_message: # 按照SSE协议格式 data: 内容\n\n yield fdata: {char}\n\n time.sleep(0.1) # 模拟思考或生成延迟 # 发送结束标记 yield data: [DONE]\n\n # 返回一个流式响应对象并设置正确的响应头 return Response(stream_with_context(generate()), mimetypetext/event-stream, headers{ Cache-Control: no-cache, Connection: keep-alive }) if __name__ __main__: app.run(debugTrue, threadedTrue)后端实现 (Java - Spring Boot)Spring Boot提供了SseEmitter来简化SSE的实现。javaimport org.springframework.web.bind.annotation.GetMapping; import org.springframework.web.bind.annotation.RestController; import org.springframework.web.servlet.mvc.method.annotation.SseEmitter; import java.io.IOException; import java.util.concurrent.Executors; import java.util.concurrent.ScheduledExecutorService; import java.util.concurrent.TimeUnit; RestController public class SSEController { GetMapping(/stream) public SseEmitter stream() { // 1. 创建一个SseEmitter设置超时时间为0表示不超时 SseEmitter emitter new SseEmitter(0L); // 使用一个线程池来异步执行发送任务 ScheduledExecutorService executor Executors.newSingleThreadScheduledExecutor(); executor.schedule(() - { try { String fullMessage 你好世界这是一个Spring Boot实现的流式响应。; for (char c : fullMessage.toCharArray()) { // 2. 发送每个字符并指定事件名称为 message emitter.send(SseEmitter.event().name(message).data(String.valueOf(c))); Thread.sleep(100); // 模拟延迟 } // 3. 发送完成事件告知前端流结束 emitter.send(SseEmitter.event().name(message).data([DONE])); emitter.complete(); // 标记完成 } catch (IOException | InterruptedException e) { emitter.completeWithError(e); } }, 0, TimeUnit.MILLISECONDS); // 设置连接关闭和超时的回调 emitter.onTimeout(() - System.out.println(SSE连接超时)); emitter.onCompletion(() - System.out.println(SSE连接完成)); return emitter; } }小结SSE是一项基础但非常重要的技术特别是在AI应用开发中。你可以把它看作一个实现了“打字机效果”的简单、可靠的后端推送工具在只需要服务器单向推送数据的场景下它是一个比WebSocket更轻量、更容易上手的选择。 AI“打字机“背后的秘密——SSE
AI流式接口背后的SSEServer-Sent Events服务器推送事件技术就像一个可以让服务器主动向网页“单向广播”消息的通道。它特别适合那些需要“边生成边显示”的场景比如AI对话中的“打字机”效果。SSEServer-Sent Events是一项让AI应用能像真人聊天一样一个字一个字往外蹦回复的核心技术。它就像一根从服务器连到你浏览器的数据水管服务器可以随时通过这根管子往你这边浇水推送数据。 什么是SSE为什么AI用它你可以把SSE简单理解为一种单向的、持续的服务器推送技术。告别转圈等待传统HTTP请求像你问-我答必须等AI把整个回答想完一次性全给你。而SSE是你问一句AI边想边说想好一个字就先送一个字你就能看到实时的打字机效果。天生适合大模型大模型生成回答需要时间SSE的流式传输完美匹配了这个一边生成一边输出的过程极大提升了用户体验。它和经常被一起比较的WebSocket有啥区别最关键的一点是SSE是单向的服务器→客户端而WebSocket是双向的服务器↔客户端。对于我问AI答这种场景单向的SSE更轻量、实现更简单。WebSocket则更适合聊天室、在线游戏等需要频繁双向交互的场景。 怎么用SSE前后端配合使用SSE通常需要前端客户端和后端服务端配合。核心要点速览我把SSE的关键知识点整理成了下面这个表格方便你快速掌握它的全貌方面关键点技术本质基于HTTP的单向通信协议允许服务器主动向客户端推送数据建立了一个“客户端监听服务器广播”的连接。核心优势轻量、简单基于HTTP支持自动重连非常适合服务器到客户端的单向数据流场景。典型应用AI大模型流式对话实现逐字显示、实时通知、股票行情、新闻推送等。与WebSocket对比SSE是单向的仅服务器推送到客户端WebSocket是双向全双工。聊天、在线游戏等需要双向交互的场景用WebSocket更合适。数据格式数据以data: 内容\n\n的格式传输以两个换行符分隔不同消息。标准结束标记通常是data: [DONE][citation:1][citation:4]。关键概念与使用场景1. 什么是SSE如何工作SSEServer-Sent Events是一种让服务器能通过HTTP协议向浏览器持续推送数据的技术。它的工作流程很简单客户端如浏览器通过普通的HTTP请求向服务器发起一个连接。服务器接收到请求后保持这个连接不断开并设置响应头Content-Type: text/event-stream。之后服务器就可以随时通过这个连接把数据片段如AI生成的下一个词推送给客户端。2. 为什么AI流式接口青睐SSE在AI对话中我们追求的是用户提问后答案能一个字一个字地“蹦”出来而不是等很久后一次性显示一整段话。SSE天然支持这种流式传输能让服务器在生成内容的同时就推送给用户极大地降低了首字延迟提升了交互体验。3. SSE与WebSocket如何选择这是开发者最常遇到的问题。简单来说如果只需要服务器单向推送数据比如AI流式回复、股票行情SSE是更轻量、更简单的选择。如果需要客户端和服务器双向实时通信比如聊天应用、在线游戏那就需要WebSocket。详细代码示例下面我们通过前端JavaScript和几种主流后端语言的代码来看如何实现一个完整的SSE流式交互。前端实现 (JavaScript)前端通过EventSourceAPI可以非常简单地“订阅”服务器的消息流。html!DOCTYPE html html body div idoutput/div script // 1. 建立SSE连接监听服务端的 /stream 接口 const eventSource new EventSource(/stream); // 2. 监听服务器发来的消息 (默认事件) eventSource.onmessage function(event) { // 如果接收到结束标记关闭连接 if (event.data [DONE]) { eventSource.close(); return; } // 将接收到的数据片段追加到页面 const outputDiv document.getElementById(output); const newSpan document.createElement(span); newSpan.textContent event.data; outputDiv.appendChild(newSpan); // 自动滚动到底部模拟打字效果 window.scrollTo(0, document.body.scrollHeight); }; // 监听连接打开 eventSource.onopen function(e) { console.log(SSE连接已建立); }; // 监听错误事件含自动重连 eventSource.onerror function(e) { if (e.target.readyState EventSource.CLOSED) { console.log(SSE连接已关闭); } else { console.log(SSE连接出错即将自动重连...); } }; /script /body /html后端实现 (Node.js - Express)后端需要设置正确的响应头并分块写入数据。javascriptconst express require(express); const app express(); // 模拟一个流式响应的接口 app.get(/stream, (req, res) { // 1. 设置SSE必需的响应头 res.writeHead(200, { Content-Type: text/event-stream, // 声明这是SSE流 Cache-Control: no-cache, // 禁用缓存 Connection: keep-alive // 保持长连接 }); // 要返回的完整消息 const fullMessage 你好世界这是一个流式响应的例子。; let index 0; // 2. 模拟逐字推送数据 const intervalId setInterval(() { if (index fullMessage.length) { // 按照SSE协议格式 data: 内容\n\n res.write(data: ${fullMessage[index]}\n\n); index; } else { // 3. 发送完毕发送结束标记并关闭连接 res.write(data: [DONE]\n\n); clearInterval(intervalId); res.end(); } }, 100); // 每100ms发送一个字模拟打字效果 }); app.listen(3000, () { console.log(Server is running on port 3000); });后端实现 (Python - Flask)使用Flask实现SSE可以通过生成器函数Generator来yield数据。pythonfrom flask import Flask, Response, stream_with_context import time app Flask(__name__) app.route(/stream) def stream(): # 流式响应生成器 def generate(): full_message 你好世界这是一个Flask实现的流式响应。 for char in full_message: # 按照SSE协议格式 data: 内容\n\n yield fdata: {char}\n\n time.sleep(0.1) # 模拟思考或生成延迟 # 发送结束标记 yield data: [DONE]\n\n # 返回一个流式响应对象并设置正确的响应头 return Response(stream_with_context(generate()), mimetypetext/event-stream, headers{ Cache-Control: no-cache, Connection: keep-alive }) if __name__ __main__: app.run(debugTrue, threadedTrue)后端实现 (Java - Spring Boot)Spring Boot提供了SseEmitter来简化SSE的实现。javaimport org.springframework.web.bind.annotation.GetMapping; import org.springframework.web.bind.annotation.RestController; import org.springframework.web.servlet.mvc.method.annotation.SseEmitter; import java.io.IOException; import java.util.concurrent.Executors; import java.util.concurrent.ScheduledExecutorService; import java.util.concurrent.TimeUnit; RestController public class SSEController { GetMapping(/stream) public SseEmitter stream() { // 1. 创建一个SseEmitter设置超时时间为0表示不超时 SseEmitter emitter new SseEmitter(0L); // 使用一个线程池来异步执行发送任务 ScheduledExecutorService executor Executors.newSingleThreadScheduledExecutor(); executor.schedule(() - { try { String fullMessage 你好世界这是一个Spring Boot实现的流式响应。; for (char c : fullMessage.toCharArray()) { // 2. 发送每个字符并指定事件名称为 message emitter.send(SseEmitter.event().name(message).data(String.valueOf(c))); Thread.sleep(100); // 模拟延迟 } // 3. 发送完成事件告知前端流结束 emitter.send(SseEmitter.event().name(message).data([DONE])); emitter.complete(); // 标记完成 } catch (IOException | InterruptedException e) { emitter.completeWithError(e); } }, 0, TimeUnit.MILLISECONDS); // 设置连接关闭和超时的回调 emitter.onTimeout(() - System.out.println(SSE连接超时)); emitter.onCompletion(() - System.out.println(SSE连接完成)); return emitter; } }小结SSE是一项基础但非常重要的技术特别是在AI应用开发中。你可以把它看作一个实现了“打字机效果”的简单、可靠的后端推送工具在只需要服务器单向推送数据的场景下它是一个比WebSocket更轻量、更容易上手的选择。