SpringAI实践-SSE实现AI消息打字机效果

下面的步骤,奔着实现一个简单的AI聊天的目的进行编写

首先通过deepseek等大模型,生成AI聊天的前端页面:

 

image

使用sse进行前后端的通信

在agent业务场景中,使用SSE(Server-Sent-Events,服务发送事件)进行通信已成为行业标准,之所以选择SSE,而不是http和websocket,主要是因为: 1、传统的HTTP是长连接,连接断了不会重连,所以有什么回复,只能在一个长连接中就传输成功,用户问了一个问题,可能需要等待很长时间才能一次性获得回复,体验不好,并且由于大模型回答生成的过程天然是流式的,因为大模型的回复是根据概率一个词一个词的生成的,在一个词生成后,这个时候已经可以把生成的词推送到前端展示了,而没必要等全部生成一下子全部推给用户,这段时间,用户都可以读不少内容了。2、SSE和WebSocket的特性是服务端可以主动推送内容到客户端的,由于Agent内部笼统来说都会循环这三个过程 思考-行动-观察,即ReAct模式,当然SpringAI框架并不完全是这种模式,使用SSE,就可以在这三个过程中,主动把agent做了什么通过SSE主动推送到前端告知用户,用户就可以清晰的感知到Agent的工作进度。3、SSE比WebSocket更轻量更可靠,websocket是全双工的,即服务端和客户端可以互相推送信息,SSE只能服务端往客户端推送,虽然websocket更强大,但消耗资源更多。

 1、后端编写一个connect接口,作用是给前端也给SSE连接,之后前端拿到SSE的连接后,监听到里面有消息,做下一步处理。

image

 上述代码的作用是返回给前端一个SseEmitter对象,也就是一个Sse连接

前端拿到连接之后,还需要配置一些监听,如下

image

 上述的监听操作,一个stream_chunk监听有数据传过来,实时显示在消息栏中,stream_end监听数据传递结束,表示一个回复内容结束了,做一些属性重置操作,为下一条消息的展示做准备。

 2、后端编写问答接口,前端把问题传给这个接口,然后这个接口通过sseEmitter对象把模型回复的内容发送给前端展示

image

 3、最终效果如下:

最终的效果如下:

 

image

posted @ 2026-01-10 13:15  hotMemo  阅读(23)  评论(0)    收藏  举报