基于SpringAI+DeepSeek实现流式对话功能
更新时间：2025年02月13日 09:31:19 作者：Java中文社群
一般来说大模型的响应速度通常是很慢的,为了避免用户用户能够耐心等待输出的结果,我们通常会使用流式输出一点点将结果输出给用户,那么问题来了,想要实现流式结果输出,后端和前端要如何配合？下来本文给出具体的实现代码,需要的朋友可以参考下
引言
前面一篇文章我们实现了《Spring AI内置DeepSeek的详细步骤》，但是大模型的响应速度通常是很慢的，为了避免用户用户能够耐心等待输出的结果，我们通常会使用流式输出一点点将结果输出给用户。
那么问题来了，想要实现流式结果输出，后端和前端要如何配合？后端要使用什么技术实现流式输出呢？接下来本文给出具体的实现代码，先看最终实现效果：
解决方案
在 Spring Boot 中实现流式输出可以使用 Sse（Server-Sent Events，服务器发送事件）技术来实现，它是一种服务器推送技术，适合单向实时数据流，我们使用 Spring MVC（基于 Servlet）中的 SseEmitter 对象来实现流式输出。
具体实现如下。
1.后端代码
Spring Boot 程序使用 SseEmitter 对象提供的 send 方法发送数据，具体实现代码如下：
import org.springframework.http.MediaType;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.servlet.mvc.method.annotation.SseEmitter;
@RestController
public class StreamController {
@GetMapping(value = "/stream", produces = MediaType.TEXT_EVENT_STREAM_VALUE)
public SseEmitter streamData() {
// 创建 SSE 发射器，设置超时时间（例如 1 分钟）
SseEmitter emitter = new SseEmitter(60_000L);
// 创建新线程，防止主程序阻塞
new Thread(() -> {
try {
for (int i = 1; i <= 5; i++) {
Thread.sleep(1000); // 模拟延迟
// 发送数据
emitter.send("time=" + System.currentTimeMillis());
}
// 发送完毕
emitter.complete();
} catch (Exception e) {
emitter.completeWithError(e);
}
}).start();
return emitter;
}
}
2.前端代码
前端接受数据流也比较简单，不需要在使用传统 Ajax 技术了，只需要创建一个 EventSource 对象，监听后端 SSE 接口，然后将接收到的数据流展示出来即可，如下代码所示：
<!DOCTYPE html>
<html>
<head>
<title>流式输出示例</title>
</head>
<body>
<h2>流式数据接收演示</h2>
<button onclick="startStream()">开始接收数据</button>
<div id="output" style="margin-top: 20px; border: 1px solid #ccc; padding: 10px;"></div>
<script>
function startStream() {
const output = document.getElementById('output');
output.innerHTML = ''; // 清空之前的内容
const eventSource = new EventSource('/stream');
eventSource.onmessage = function(e) {
const newElement = document.createElement('div');
newElement.textContent = "print -> " + e.data;
output.appendChild(newElement);
};
eventSource.onerror = function(e) {
console.error('EventSource 错误:', e);
eventSource.close();
const newElement = document.createElement('div');
newElement.textContent = "连接关闭";
output.appendChild(newElement);
};
}
</script>
</body>
</html>
3.运行项目
运行项目测试结果：
- 启动 Spring Boot 项目。
- 在浏览器中访问地址 http://localhost:8080/index.html，即可看到流式输出的内容逐渐显示在页面上。
4.最终版：流式输出
后端代码如下：
import org.springframework.ai.chat.messages.UserMessage;
import org.springframework.ai.chat.prompt.Prompt;
import org.springframework.ai.openai.OpenAiChatModel;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.servlet.mvc.method.annotation.SseEmitter;
import java.util.Map;
@RestController
public class ChatController {
private final OpenAiChatModel chatModel;
@Autowired
public ChatController(OpenAiChatModel chatModel) {
this.chatModel = chatModel;
}
@GetMapping("/ai/generate")
public Map generate(@RequestParam(value = "message", defaultValue = "你是谁？") String message) {
return Map.of("generation", this.chatModel.call(message));
}
@GetMapping("/ai/generateStream")
public SseEmitter streamChat(@RequestParam String message) {
// 创建 SSE 发射器，设置超时时间（例如 1 分钟）
SseEmitter emitter = new SseEmitter(60_000L);
// 创建 Prompt 对象
Prompt prompt = new Prompt(new UserMessage(message));
// 订阅流式响应
chatModel.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);
}
},
error -> { // 异常处理
emitter.completeWithError(error);
},
() -> { // 完成处理
emitter.complete();
}
);
// 处理客户端断开连接
emitter.onCompletion(() -> {
// 可在此处释放资源
System.out.println("SSE connection completed");
});
emitter.onTimeout(() -> {
emitter.complete();
System.out.println("SSE connection timed out");
});
return emitter;
}
}
前端核心 JS 代码如下：
$('#send-button').click(function () {
const message = $('#chat-input').val();
const eventSource = new EventSource(`/ai/generateStream?message=` + message);
// 构建动态结果
var chatMessages = $('#chat-messages');
var newMessage = $('<div class="message user"></div>');
newMessage.append('<img class="avatar" src="/imgs/user.png" alt="用户头像">');
newMessage.append(`<span class="nickname">${message}</span>`);
chatMessages.prepend(newMessage);
var botMessage = $('<div class="message bot"></div>');
botMessage.append('<img class="avatar" src="/imgs/robot.png" alt="助手头像">');
// 流式输出
eventSource.onmessage = function (event) {
botMessage.append(`${event.data}`);
};
chatMessages.prepend(botMessage);
$('#chat-input').val('');
eventSource.onerror = function (err) {
console.error("EventSource failed:", err);
eventSource.close();
};
});
以上代码中的“$”代表的是 jQuery。
到此这篇关于基于Spring AI+DeepSeek实现流式对话功能的文章就介绍到这了,更多相关Spring AI DeepSeek流式对话内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要为大家详细介绍了Java双色球系统的开发，超级简单的逻辑，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-09-09
文本替换几乎是所有文本编辑器都支持的功能，但是要限制在编辑其中才可以执行该功能。本实例实现了制定文本文件的内容替换，并且不需要再编辑其中打开文本文件2014-02-02
SpringBoot中Elasticsearch的连接配置原理与使用详解
Elasticsearch是一种开源的分布式搜索和数据分析引擎,它可用于全文搜索、结构化搜索、分析等应用场景,本文主要介绍了SpringBoot中Elasticsearch的连接配置原理与使用详解,感兴趣的可以了解一下2023-09-09
这篇文章主要介绍了MyBatis-Plus 如何实现连表查询的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-08-08
在本文中,我们使用SpringBoot演示了如何将PDF文件转换为一张或多张图片,这些示例演示了如何使用Java编程语言与其他开源技术集成,以实现各种文件格式之间的转换,感兴趣的小伙伴跟着小编一起来看看吧2024-08-08
java json字符串转JSONObject和JSONArray以及取值的实例
这篇文章主要介绍了java json字符串转JSONObject和JSONArray以及取值的实例的相关资料,需要的朋友可以参考下2017-05-05
这篇文章主要介绍了Mybatis基于xml配置实现单表的增删改查,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2021-04-04
这篇文章对Java编程语言的基础知识作了一个较为全面的汇总，在这里给大家分享一下。需要的朋友可以参考，希望能给你带来帮助2021-08-08
这篇文章主要介绍了使用JavaIO流和网络制作一个简单的图片爬虫,通过关键字爬取百度图片，这个和我们使用搜索引擎搜索百度图片是一样的，只是通过爬虫可以学习技术的使用,需要的朋友可以参考下2023-04-04
在我们的代码中，经常会遇到一些数字&数学问题、随机数问题、日期问题和系统设置问题等，为了解决这些问题，Java给我们提供了多个处理相关问题的类，比如Number类、Math类、Random类等等，本篇文章我们先从Number数字类和Math数学类学起2023-05-05
最新评论