聊聊大模型"打字机"效果的背后技术——SSE

SSE:Server Sent Event;服务器发送事件。

Server-Sent Events(SSE)是一种由服务器向客户端推送实时数据的技术。它是构建基于事件的、服务器到客户端的通信的一种方法,特别适用于需要实时更新和推送信息的应用场景,如实时通知、股票交易、实时游戏状态更新等。

SSE的工作原理是,一旦客户端(通常是浏览器)与服务器建立连接,该连接会保持开放状态,服务器就可以推送事件给客户端,直到客户端或服务器决定关闭它,而无需客户端不断地询问服务器是否有新消息。这大大减少了网络通信量,提高了应用程序的性能和响应速度。

从技术原理来看,其实就是事件的发布订阅。客户端订阅服务器端的事件数据;一旦服务器端数据就绪,封装成事件推送到客户端。

但从底层来分析,其实现依赖于底层协议与浏览器的支持。SSE的底层协议还是HTTP协议,以ChatGLM的请求为例,请求头中设置Accept:

返回的响应只有响应头:

此时只是建立了连接;一旦服务端数据准备好了,将会推送事件消息给客户端,基本的消息由以下几部分组成:

  • data:实际的消息数据;
  • id:可选,消息的唯一标识符,用于在连接重新建立时同步消息;
  • event:可选,定义事件类型,用于客户端区分消息的类型;
  • retry:可选,自动重连的时间(毫秒),如果连接中断,客户端在自动重新连接之前,需要等待多长时间;

每个消息要以两个换行符(\n\n)结束。SSE返回示例数据如下:

复制代码
id: 110
event: foo
data: Hello, 

id: 111
event: foo
data: , 

id: 112
event: foo
data: world

id: 113
event: foo
data: !

标准的SSE返回内容是增量生成返回的,因此客户端需要单独处理合并内容块。

ChatGPT等AI模型回复消息时的 打字机 效果,其原理就是基于SSE协议实现的,只是在服务端做了处理,拼接了SSE每次返回的内容;前端直接展示效果就行。返回内容:

复制代码
id: 110
event: foo
data: Hello, 

id: 111
event: foo
data: Hello, world!

后端可以处理为全量返回,如上,客户端可以直接展示,不需要多余的处理。

相关推荐
青啊青斯8 天前
Django实现SSE流
django·sse
破烂pan16 天前
Python 长连接实现方式全景解析
python·websocket·sse
weixin79893765432...18 天前
主流 AI 应用的“流式技术”的探索交流
websocket·sse·ai的流式技术·llm token·http chunked·async generator·message stream
SunnyRivers22 天前
为什么 MCP 弃用 SSE,转而采用可流式 HTTP(Streamable HTTP)?
sse·mcp·stdio·传输方式·streamable
特立独行的猫a25 天前
SSE技术详解及在MCP协议中的应用和优势
ai·sse·mcp
大佐不会说日语~1 个月前
SSE 流式输出 Markdown 实时渲染问题解决方案
java·vue.js·sse·spring ai·前端实时渲染
sg_knight1 个月前
Spring 框架中的 SseEmitter 使用详解
java·spring boot·后端·spring·spring cloud·sse·sseemitter
sg_knight1 个月前
SSE 技术实现前后端实时数据同步
java·前端·spring boot·spring·web·sse·数据同步
超级种码1 个月前
SSE字符串以及Flux<String>中文乱码问题
java-ee·flux·sse
unclecss1 个月前
从 0 到 1 落地 SSE:Spring Boot 3 实战 Server-Sent Events 推送全链路
java·spring boot·后端·http·sse