聊聊大模型"打字机"效果的背后技术——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!

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

相关推荐
Fzuim8 小时前
用 Vue 3 重构 Dify 聊天前端(上篇):项目搭建与基础架构
vue.js·sse·dify·ai聊天前端
木斯佳3 天前
前端八股文面经大全:bilibili生态技术方向二面 (2026-03-25)·面经深度解析
前端·ai·ssd·sse·rag
哆啦code梦4 天前
SSE与WebSocket:实时通信选型指南与实现示例
websocket·sse·ws·wss
赵丙双5 天前
Server-sent events (SSE)
spring·sse·sseemitter
蜡台5 天前
SSE WebSocket Socket.IO 三者使用及区别
websocket·网络协议·uniapp·sse·socket.io·eventsource
Pu_Nine_99 天前
前端SSE(Server-Sent Events)实现详解:从原理到前端AI对话应用
前端·langchain·sse·ai对话
带娃的IT创业者11 天前
Weclaw 混合通讯架构实战:HTTP+SSE+WebSocket的三元融合如何支撑起整个 AI 助手的实时对话?
websocket·http·fastapi·sse·流式响应·实时通讯·混合架构
木斯佳11 天前
前端八股文面经大全:Bilibili 前端实习面(2026-03-20)·深度解析
前端·sse·ssr·rag
融化的雪15 天前
vue2.6访问sse不能流式返回的问题
sse·前端调用sse请求
gs801401 个月前
从零到一:构建高可用分布式 Server-Sent Events (SSE) 实时推送系统
分布式·sse