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

【NexLM 开源系列】让 AI 聊天更丝滑：SSE 实现流式对话！

news 来源：原创 2025/8/21 18:54:11

🌟 在这系列文章中，我们将一起探索如何搭建一个支持大模型集成项目 NexLM 的开发过程，从 架构设计 到 代码实战，逐步搭建一个支持 多种大模型（GPT-4、DeepSeek 等） 的 一站式大模型集成与管理平台，并集成 认证中心、微服务、流式对话 等核心功能。

系列目录规划：

NexLM：从零开始打造你的专属大模型集成平台 ✅
Spring Boot + OpenAI/DeepSeek：如何封装多个大模型 API 调用 ✅
支持流式对话 SSE & WebSocket：让 AI 互动更丝滑 ✅
微服务 + 认证中心：如何保障大模型 API 的安全调用
缓存与性能优化：提高 LLM API 响应速度
NexLM 开源部署指南（Docker）

第三篇：让 AI 聊天更丝滑：SSE 实现流式对话！

上一篇中，我们探讨了如何封装多个大模型 API 调用。

然而，传统的请求-响应模式在与 AI 模型交互时，往往需要等待模型生成完整的回复后才能返回给用户，这可能导致用户体验不佳。为提升交互的实时性，我们可以引入流式对话技术，使 AI 的回复能够逐步呈现，带来更流畅的用户体验。

在这里插入图片描述

为什么选择流式对话？

在传统的同步通信中，客户端发送请求，服务器处理后返回完整的响应。然而，对于大型语言模型（LLM），生成完整的回复可能需要一定时间。如果用户需要等待整个回复生成完毕，可能会感到延迟，影响体验。通过流式对话，服务器可以在生成回复的过程中，逐步将内容发送给客户端，客户端也能实时呈现这些内容，提升交互的即时性。

SSE 实现流式对话的方式

Server-Sent Events（SSE）

SSE 是一种基于 HTTP 协议的服务器向客户端推送数据的技术。它使用简单，适合服务器向客户端发送实时更新的场景。在 SSE 中，客户端通过建立一个持久的 HTTP 连接，服务器可以持续地向客户端发送数据。

优点：

实现简单，使用标准的 HTTP 协议。
浏览器兼容性好，支持自动重连。

缺点：

仅支持服务器向客户端的单向通信。

实战：在 Spring Boot 中实现流式对话

接下来，我们将展示如何在 Spring Boot 项目中，使用 SSE 和 WebSocket 实现与 AI 模型的流式对话。代码仓库地址：https://github.com/pitt1997/NexLM

在这里插入图片描述

使用 SSE 实现流式对话

1. Controller 层：

我们需要在控制器中定义一个使用 SSE 的端点。

@RestController
@RequestMapping("/api/ai")
public class ChatApiController {@Autowiredprivate ChatService chatService;@GetMapping(value = "/chat/stream", produces = MediaType.TEXT_EVENT_STREAM_VALUE)public SseEmitter streamChat(@RequestParam String prompt) {SseEmitter emitter = new SseEmitter();executor.execute(() -> {try {deepSeekClient.streamChat(prompt, emitter);emitter.complete();} catch (IOException e) {emitter.completeWithError(e);}});return emitter;}
}

2. Service 层：

在服务层，我们需要实现 callAIModel 方法，根据不同的模型类型，调用对应的客户端进行流式对话。

@Service
public class ChatService {@Autowiredprivate OpenAIClient openAIClient;@Autowiredprivate DeepSeekClient deepSeekClient;@Autowiredprivate LocalLLMClient localLLMClient;public String callAIModel(String prompt, String modelType) {if ("chatgpt".equalsIgnoreCase(modelType)) {return openAIClient.chat(prompt);} else if ("deepseek".equalsIgnoreCase(modelType)) {return deepSeekClient.chat(prompt);} else if ("local".equalsIgnoreCase(modelType)) {return localLLMClient.chat(prompt);}return "Invalid Model Type";}
}

3. 调用大模型接口 API：

以 DeepSeek 为例，我们需要实现 streamChat 方法，逐步将 AI 模型的回复发送给客户端。

@Component
public class DeepSeekClient {private static final String API_URL = "https://api.deepseek.com/chat/completions";private static final String API_KEY = "你的 DeepSeek API Key";private static final String MODEL = "deepseek-chat";public void streamChat(String prompt, SseEmitter emitter) throws IOException {RestTemplate restTemplate = new RestTemplate();HttpHeaders headers = new HttpHeaders();headers.setContentType(MediaType.APPLICATION_JSON);headers.add("Authorization", "Bearer " + API_KEY);Map<String, Object> body = new HashMap<>();body.put("model", MODEL); // deepseek-v3 / deepseek-r1body.put("temperature", 0.7); // 可调整温度body.put("max_tokens", 2048); // 控制回复长度body.put("stream", true); // 启用流式响应List<Map<String, String>> messages = Arrays.asList(new HashMap<String, String>() {{put("role", "user");put("content", prompt);}});body.put("messages", messages);HttpEntity<Map<String, Object>> request = new HttpEntity<>(body, headers);// 使用 RequestCallback 处理请求RequestCallback requestCallback = clientHttpRequest -> {ObjectMapper objectMapper = new ObjectMapper();objectMapper.writeValue(clientHttpRequest.getBody(), body);clientHttpRequest.getHeaders().addAll(headers);};// 使用 ResponseExtractor 处理响应restTemplate.execute(API_URL, HttpMethod.POST, requestCallback, response -> {BufferedReader reader = new BufferedReader(new InputStreamReader(response.getBody()));String line;while ((line = reader.readLine()) != null) {if (line.startsWith("data: ")) {String json = line.substring(6).trim();if (!json.equals("[DONE]")) {String content = extractContentStream(json);if (!content.isEmpty()) { // 检查 content 是否为空// 发送数据到客户端emitter.send(SseEmitter.event().data(content));}}}}return null;});}private String extractContentStream(String json) {try {ObjectMapper objectMapper = new ObjectMapper();JsonNode root = objectMapper.readTree(json);JsonNode deltaNode = root.path("choices").get(0).path("delta");if (deltaNode.has("content")) {return deltaNode.path("content").asText();}return ""; // 如果 delta 中没有 content 字段，返回空字符串} catch (Exception e) {e.printStackTrace();return "Error parsing response";}}}

4. 前面通过 SSE 方式获取流式返回结果

<script>function sendMessage() {let input = document.getElementById("userInput");let message = input.value.trim();if (message === "") return;let modelType = document.getElementById("modelType").value;let chatBox = document.getElementById("chatBox");// 显示用户消息let userMessage = document.createElement("div");userMessage.className = "message user-message";userMessage.innerText = message;chatBox.appendChild(userMessage);// 显示 AI "正在输入..." 和加载动画let botMessage = document.createElement("div");botMessage.className = "message bot-message";botMessage.innerHTML = "AI 正在输入... <span class='loader'></span>";chatBox.appendChild(botMessage);input.value = "";// 滚动到最新消息chatBox.scrollTop = chatBox.scrollHeight;// 编码用户输入var encodedMessage = encodeURIComponent(message);console.log("URL Encoded message:", encodedMessage);// 通过 SSE 方式获取流式返回的 AI 结果let eventSource = new EventSource("/web/api/ai/chat/stream?modelType=" + modelType + "&prompt=" + encodedMessage);let isFirstChunk = true; // 标记是否是第一条消息eventSource.onmessage = function(event) {if (isFirstChunk) {// 如果是第一条消息，替换初始文案botMessage.innerHTML = event.data;isFirstChunk = false;} else {// 否则，追加内容botMessage.innerHTML += event.data;}// 滚动到最新消息chatBox.scrollTop = chatBox.scrollHeight;};eventSource.onerror = function() {eventSource.close();if (isFirstChunk) {// 如果流式请求出错，且没有收到任何数据，显示错误信息botMessage.innerHTML = "AI 响应失败，请重试。";}};}
</script>

SSE 实现流式对话效果演示

在这里插入图片描述

结语

在本篇我们成功实现了基于 SSE（Server-Sent Events） 的流式对话，让 AI 的回复能够逐步呈现，极大地提升了用户的交互体验。SSE 方案简单易用，特别适用于单向推送的场景，比如 AI 回复、系统日志推送等。然而，SSE 也存在一定的局限性，比如它是 单向通信 的，仅支持服务器向客户端推送数据，无法处理客户端的主动交互需求。

那么，如果我们希望实现 更复杂的实时双向通信（比如 AI 生成过程中用户可以中断对话、发送指令调整回复内容等），WebSocket 就是一个更优的选择！

在下一篇文章中，我们将深入探讨 WebSocket 如何实现流式对话，并对比 SSE 和 WebSocket 的适用场景，帮助你在实际应用中做出最佳选择。

📌 下一章预告：让 AI 聊天更丝滑：WebSocket 实现流式对话！

📢 你对这个项目感兴趣吗？欢迎 Star & 关注！ 📌 GitHub 项目地址 🌟 你的支持是我持续创作的动力，欢迎点赞、收藏、分享！

第三篇：让 AI 聊天更丝滑：SSE 实现流式对话！

为什么选择流式对话？

SSE 实现流式对话的方式

Server-Sent Events（SSE）

实战：在 Spring Boot 中实现流式对话

使用 SSE 实现流式对话

SSE 实现流式对话效果演示

结语

相关文章：