前面一篇文章我们实现了《spring ai集成deepseek:三步搞定java智能应用》,大模型的响应速度是很慢的,为了提升用户体验,我们通常会使用流式输出一点点将结果输出给用户。先看下效果:
在 springboot 中实现流式输出可以使用 sse(server-sentevents,服务器发送事件)技术来实现,它是一种服务器推送技术,适合单向实时数据流,我们使用 springmvc(基于servlet)中的sseemitter对象来实现流式输出。
一、后端代码
/** * 流式调用 */ @getmapping("/generatestream") public sseemitter streamchat(@requestparam string message) { // 创建 sse 发射器,设置超时时间(例如 1 分钟) sseemitter emitter = new sseemitter(60_000l); // 创建 prompt 对象 prompt prompt = new prompt(new usermessage(message)); // 订阅流式响应 // 完成处理 // 异常处理 openaichatmodel.stream(prompt).subscribe(response -> { try { string content = response.getresult().getoutput().getcontent(); system.out.print(content); // 发送 sse 事件 emitter.send(sseemitter.event() .data(content) .id(string.valueof(system.currenttimemillis())) .build()); } catch (exception e) { emitter.completewitherror(e); } }, emitter::completewitherror, emitter::complete ); // 处理客户端断开连接 emitter.oncompletion(() -> { // 可在此处释放资源 system.out.println("sse connection completed"); }); emitter.ontimeout(() -> { emitter.complete(); system.out.println("sse connection timed out"); }); return emitter; }
二、前端代码
前端接受数据流也比较简单,不需要在使用传统 ajax 技术了,只需要创建一个 eventsource 对象,监听后端 sse 接口,然后将接收到的数据流展示出来即可,如下代码所示:
$('#send-button').click(function () { const message = $('#chat-input').val(); // 立即清空输入框 $('#chat-input').val(''); // 用户消息(保持原有样式) var usermessage = $('<div class="message user"></div>'); usermessage.append('<img class="avatar" src="/images/user.png" alt="用户头像">'); usermessage.append(`<div class="content"><span class="nickname">你</span><div class="text">${message}</div></div>`); // 机器人消息容器(先创建空容器) var botmessage = $('<div class="message bot"></div>'); botmessage.append('<img class="avatar" src="/images/robot.png" alt="助手头像">'); botmessage.append('<div class="content"><span class="nickname">助手</span><div class="text"></div></div>'); // 按顺序添加消息 $('#chat-messages').append(usermessage, botmessage); // 流式处理 const eventsource = new eventsource(`/ai/generatestream?message=` + message); eventsource.onmessage = function (event) { botmessage.find('.text').append(event.data); // 追加到机器人消息内容区 }; // 错误处理 eventsource.onerror = function (err) { $('#chat-input').val(''); // 确保网络异常时也清空 console.error("连接错误:", err); eventsource.close(); }; });
完整代码可查看:
gitee:https://gitee.com/tyronchen/spring-boot-learn/tree/master/spring-ai
github:https://github.com/tyronczt/spring-boot-learning/tree/master/spring-ai
三、运行项目
运行项目测试结果:
- 启动 spring boot 项目。
- 在浏览器中访问地址 http://localhost:8888/index.html,即可看到流式输出的内容逐渐显示在页面上。
小天有话说
此文参考居多,html页面是使用idea中的通义插件所写,demo之作,样式相对粗糙,如页面的markdown样式显示支持不完善,显示屏幕较小等。样式并非重点,后续将继续学习spring ai相关技术;
题外话
ai技术的应用早已突破简单的api调用阶段,唯有深耕深度学习领域,方能在技术迭代的浪潮中保持竞争力。这一规律不仅适用于个人发展,更是企业生存的必然选择。deepseek的崛起犹如一剂强心针,彻底激活了开源大模型领域的竞争格局——据不完全统计,已有超过200家头部企业完成deepseek技术接口的集成部署,涵盖华为、腾讯、百度、阿里、京东、字节等科技巨头,以及微软、英伟达、aws等国际厂商。
对于开发者而言,**spring ai alibaba **作为阿里云推出的ai应用开发框架,提供了从模型部署到智能体开发的完整解决方案。该框架支持40+插件集成,可实现rag增强生成与工具调用等核心功能,显著降低ai应用开发门槛。接下来也会更新一些学习文章:如deepseek接入spring cloud alibaba ai完成智能化实战等,尽情期待!
参考资料
磊哥聊编程:https://segmentfault.com/a/1190000046109605
spring ai alibaba:https://java2ai.com/
到此这篇关于spring ai集成deepseek实现流式输出的操作方法的文章就介绍到这了,更多相关spring ai deepseek流式输出内容请搜索代码网以前的文章或继续浏览下面的相关文章希望大家以后多多支持代码网!
发表评论