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

Spring AI集成DeepSeek，实现流式输出

news 来源：原创 2025/5/4 5:58:00

前面一篇文章我们实现了《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完成智能化实战等，尽情期待！