技术博客
首页 所有文章 标签 分类 关于
技术博客

目录

NexLM-开源系列让-AI-聊天更丝滑SSE-实现流式对话

 收录于 未分类
   约 1957 字   预计阅读 4 分钟 
https://bing.ee123.net/img/rand?artid=146185831

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

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

系列目录规划：

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

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

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

https://i-blog.csdnimg.cn/direct/bdad9cba78c4458291cd65b57929c34e.gif

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

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

优点：

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

缺点：

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

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

https://i-blog.csdnimg.cn/direct/aef022efe9f04eeda3ca4b9635bce03b.png

1. Controller 层：

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

@RestController
@RequestMapping("/api/ai")
public class ChatApiController {

    @Autowired
    private 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 {

    @Autowired
    private OpenAIClient openAIClient;

    @Autowired
    private DeepSeekClient deepSeekClient;

    @Autowired
    private 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-r1
        body.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>

https://i-blog.csdnimg.cn/direct/cbbc5e3b99ce4031b11e8d3a45df92f2.gif

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

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

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

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

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

更新于 2025-03-11
 大模型集成, Deepseek, Chatgpt
返回 | 主页