Spring?AI集成DeepSeek實現(xiàn)流式輸出的操作方法

更新時間：2025年03月06日 14:37:32 作者：小天努力學java

本文介紹了如何在SpringBoot中使用Sse（Server-SentEvents）技術實現(xiàn)流式輸出,后端使用SpringMVC中的SseEmitter對象,前端使用EventSource對象監(jiān)聽SSE接口并展示數(shù)據(jù)流,通過這種方式可以提升用戶體驗,避免大模型響應速度慢的問題,感興趣的朋友一起看看吧

在 SpringBoot 中實現(xiàn)流式輸出可以使用 Sse（Server-SentEvents，服務器發(fā)送事件）技術來實現(xiàn)，它是一種服務器推送技術，適合單向實時數(shù)據(jù)流，我們使用 SpringMVC（基于Servlet）中的SseEmitter對象來實現(xiàn)流式輸出。

一、后端代碼

/**
 * 流式調用
 */
@GetMapping("/generateStream")
public SseEmitter streamChat(@RequestParam String message) {
    // 創(chuàng)建 SSE 發(fā)射器，設置超時時間（例如 1 分鐘）
    SseEmitter emitter = new SseEmitter(60_000L);
    // 創(chuàng)建 Prompt 對象
    Prompt prompt = new Prompt(new UserMessage(message));
    // 訂閱流式響應
    // 完成處理
    // 異常處理
    openAiChatModel.stream(prompt).subscribe(response -> {
                try {
                    String content = response.getResult().getOutput().getContent();
                    System.out.print(content);
                    // 發(fā)送 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;
}

二、前端代碼

前端接受數(shù)據(jù)流也比較簡單，不需要在使用傳統(tǒng) Ajax 技術了，只需要創(chuàng)建一個 EventSource 對象，監(jiān)聽后端 SSE 接口，然后將接收到的數(shù)據(jù)流展示出來即可，如下代碼所示：

$('#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>`);
  // 機器人消息容器（先創(chuàng)建空容器）
  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);  // 追加到機器人消息內容區(qū)
  };
  // 錯誤處理
  eventSource.onerror = function (err) {
  $('#chat-input').val(''); // 確保網(wǎng)絡異常時也清空
  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樣式顯示支持不完善，顯示屏幕較小等。樣式并非重點，后續(xù)將繼續(xù)學習Spring Ai相關技術；

題外話

AI技術的應用早已突破簡單的API調用階段，唯有深耕深度學習領域，方能在技術迭代的浪潮中保持競爭力。這一規(guī)律不僅適用于個人發(fā)展，更是企業(yè)生存的必然選擇。DeepSeek的崛起猶如一劑強心針，徹底激活了開源大模型領域的競爭格局——據(jù)不完全統(tǒng)計，已有超過200家頭部企業(yè)完成DeepSeek技術接口的集成部署，涵蓋華為、騰訊、百度、阿里、京東、字節(jié)等科技巨頭，以及微軟、英偉達、AWS等國際廠商。

對于開發(fā)者而言，**Spring AI Alibaba **作為阿里云推出的AI應用開發(fā)框架，提供了從模型部署到智能體開發(fā)的完整解決方案。該框架支持40+插件集成，可實現(xiàn)RAG增強生成與工具調用等核心功能，顯著降低AI應用開發(fā)門檻。接下來也會更新一些學習文章：如DeepSeek接入Spring Cloud Alibaba AI完成智能化實戰(zhàn)等，盡情期待！