脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 软件编程 → java → SpringAI DeepSeek流式对话

基于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流式对话内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • SpringBoot+Mybatis分页插件PageHelper实现分页效果

    SpringBoot+Mybatis分页插件PageHelper实现分页效果

    这篇文章主要介绍了SpringBoot+Mybatis实现分页效果,本案例是采用Mybatis分页插件PageHelper实现，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2021-11-11
  • 基于Java实现双向链表

    基于Java实现双向链表

    这篇文章主要为大家详细介绍了基于Java实现双向链表，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-05-05
  • Java中Dijkstra算法求解最短路径的实现

    Java中Dijkstra算法求解最短路径的实现

    Dijkstra算法是一种解决最短路径问题的常用算法,本文主要介绍了Java中Dijkstra算法求解最短路径的实现,具有一定的参考价值,感兴趣的可以了解一下
    2023-09-09
  • 浅谈一下Java的双亲委派模式

    浅谈一下Java的双亲委派模式

    这篇文章主要介绍了一下Java的双亲委派模式,双亲委派指得是，JVM在加载类时，会委派给ExtClassLoader和BootstrapClassLoader进⾏加载，如果没加载到才由⾃⼰进⾏加载,需要的朋友可以参考下
    2023-04-04
  • PostMan post请求发送Json数据的方法

    PostMan post请求发送Json数据的方法

    下面小编就为大家分享一篇PostMan post请求发送Json数据的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03
  • 如何用JAVA判断当前时间是否为节假日、周末、工作日及调休日(不报错:IOException!)

    如何用JAVA判断当前时间是否为节假日、周末、工作日及调休日(不报错:IOException!)

    最近公司有个业务需要判断工作日,但是每年的节假日不一样,下面这篇文章主要给大家介绍了关于如何用JAVA判断当前时间是否为节假日、周末、工作日及调休日的相关资料,且不报错:IOException!,需要的朋友可以参考下
    2023-12-12
  • Spring MVC映射HTTP请求到Controller的处理方法

    Spring MVC映射HTTP请求到Controller的处理方法

    我们来详细分析一下如何在 Spring MVC 中将 HTTP 请求映射到 Controller 的处理方法（Handler Methods）上,以及 @RequestMapping 注解的使用方法,需要的朋友可以参考下
    2025-05-05
  • Spring-cloud Feign 的深入理解

    Spring-cloud Feign 的深入理解

    这篇文章主要介绍了Spring-cloud Feign 的深入理解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2019-02-02
  • Java设计模式之java桥接模式详解

    Java设计模式之java桥接模式详解

    这篇文章主要介绍了Java设计模式之桥接模式,结合实例形式详细分析了桥接模式的概念、功能、Java实现方法及相关注意事项,需要的朋友可以参考下
    2021-09-09
  • springCloud项目搭建流程步骤分解

    springCloud项目搭建流程步骤分解

    SpringCloud 作为当下最为流行的微服务框架，也越来越多的人去学习和使用这个框架。下面，我将带大家简单地认识一下 SpringCloud 框架，以及如何来搭建一个 SpringCloud 项目环境的教程
    2022-05-05

最新评论