干货:DeepSeek+SpringAI实现流式对话!

前面一篇文章我们实现了《炸裂:SpringAI内置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。

本文已收录到我的面试小站 www.javacn.site,其中包含的内容有:DeepSeek、场景题、并发编程、MySQL、Redis、Spring、Spring MVC、Spring Boot、Spring Cloud、MyBatis、JVM、设计模式、消息队列等模块。

### 关于 SpringAIDeepSeek 的数据库集成 SpringAI 提供了一个灵活的框架来实现人工智能功能,尤其是在 Java 应用程序中的集成。DeepSeek 是一种先进的大型语言模型,在自然语言理解和生成方面表现出色。当两者结合时,可以通过数据库技术进一步增强其能力。 #### 数据库集成的关键点 1. **配置管理** 在 `application.properties` 或 `application.yml` 中完成 API 配置后,可以利用这些设置连接外部服务或本地存储的数据源。例如,如果需要将用户的查询历史记录保存到关系型数据库中,则可以在应用程序中定义 JPA 实体类并与之交互[^3]。 2. **数据持久化** 对于基于 RAG(检索增强生成)的知识库构建场景,通常会涉及以下几个部分: - 文档索引:使用 Elasticsearch 等搜索引擎对文档进行向量化处理。 - 查询解析:通过 DeepSeek 解析用户输入并返回结构化的语义表示。 - 结果缓存:为了提高性能,可采用 Redis 缓存机制存储频繁访问的结果集[^1]。 3. **测试接口设计** 创建 RESTful 接口用于验证整个流程是否正常工作。假设我们有一个简单的 GET 请求 `/search?q={query}` 来触发后台逻辑链路运行,具体实现如下所示: ```java @RestController @RequestMapping("/api/search") public class SearchController { @Autowired private AiService aiService; @GetMapping public ResponseEntity<String> search(@RequestParam String q) { try { String result = aiService.query(q); return new ResponseEntity<>(result, HttpStatus.OK); } catch (Exception e) { return new ResponseEntity<>("Error processing request", HttpStatus.INTERNAL_SERVER_ERROR); } } } ``` 上述代码片段展示了如何封装调用 AI 模型的服务层方法,并对外暴露 HTTP 协议下的资源路径。 --- ### 示例应用场景分析 考虑一个实际案例——企业内部知识管理系统。该平台允许员工提交问题并通过机器学习算法自动匹配最佳答案。以下是主要步骤概述: 1. 收集公司资料作为训练素材; 2. 将原始文件转换成适合 NLP 处理的形式; 3. 调用 DeepSeek 执行推理操作获取候选回复列表; 4. 把最终选定的内容写入 MySQL 表格以便后续审计追踪用途。 这种架构不仅简化了传统方式下繁琐的手动编辑过程,而且显著提升了用户体验满意度水平[^2]。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

sufu1065

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值