当前位置：首页 > article >正文

DeepSeek+SpringAI实现流式对话

article 2025/8/24 21:10:25

大模型的响应速度通常是很慢的，为了避免用户用户能够耐心等待输出的结果，我们通常会使用流式输出一点点将结果输出给用户。

那么问题来了，想要实现流式结果输出，后端和前端要如何配合？后端要使用什么技术实现流式输出呢？接下来本文给出具体的实现代码，先看最终实现效果：

解决方案
在 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;@Autowiredpublic 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();};
});

DeepSeek+SpringAI实现流式对话

相关文章：

DeepSeek+SpringAI实现流式对话

【Spark征服之路-2.1-安装部署Spark（一）】

VS代码生成工具ReSharper v2025.1——支持.NET 10和C# 14预览功能

【Godot】如何导出 Release 版本的安卓项目

VSCode 工作区配置文件通用模板（CMake + Ninja + MinGW/GCC 编译器的 C++ 或 Qt 项目）

js鼠标事件大全

Java八股文——Redis篇

爬虫接口类型判断与表单需求识别全解析

Photoshop智能图层 vs 普通图层：核心差异与适用场景对比

Chainlink：连接 Web2 与 Web3 的去中心化桥梁

[Java 基础]面向对象-继承

编译一个Mac M系列可以用的yuview

LeetCode - 876. 链表的中间结点

概率单纯形（Probability Simplex）

Go语言爬虫系列教程4：使用正则表达式解析HTML内容

6.4 C++作业

rabbitmq Topic交换机简介

网络交换机：构建高效、安全、灵活局域网的基石

【ArcGIS微课1000例】0148：Geographic Imager6.2使用教程

【Oracle】存储过程

CppCon 2015 学习A Few Good Types

winrm登录失败，指定的凭据被服务器拒绝

单元测试-断言常见注解

TDengine 在电力行业如何使用 AI ?

Java抽象工厂模式详解

matlab实现高斯烟羽模型算法

SpringBoot parent依赖高版本覆盖低版本问题

OpenCV C/C++ 视频播放器 (支持调速和进度控制)

【Linux庖丁解牛】—自定义shell的编写！

C++抽象类与多态实战解析