java springboot deepseek流式对话集成示例-CSDN博客

本文链接：https://blog.csdn.net/ShanMengChi/article/details/147745454

1.直接上代码-后端：

@RestController
@CrossOrigin(origins = "*")
public class DeepSeekController {

    private static final String API_URL = "https://api.deepseek.com/v1/chat/completions";
    private final ObjectMapper objectMapper = new ObjectMapper();

    @GetMapping(value = "/stream", produces = "text/event-stream")
    public SseEmitter streamChat(@RequestParam String message) {
        SseEmitter emitter = new SseEmitter(60_000L); // 超时60秒

        OkHttpClient client = new OkHttpClient.Builder()
                .connectTimeout(200, TimeUnit.SECONDS)  // 连接超时
                .readTimeout(200, TimeUnit.SECONDS)    // 读取超时（需大于流式响应生成时间）
                .build();

        String jsonBody = buildRequestJson(message); // 构建请求体

        Request request = new Request.Builder()
                .url(API_URL)
                .header("Authorization", "XXXXXXX")
                .post(RequestBody.create(jsonBody, MediaType.get("application/json")))
                .build();

        client.newCall(request).enqueue(new Callback() {
            @Override
            public void onResponse(Call call, Response response) throws IOException {
                try (BufferedReader reader = new BufferedReader(new InputStreamReader(response.body().byteStream()))) {
                    String line;
                    while ((line = reader.readLine()) != null) {

                        if (line.startsWith("data: ")) {
                            String content = parseContent(line.substring(6));
                            emitter.send(SseEmitter.event().data(content));
                        }
                    }
                    emitter.complete();
                }
            }

            @Override
            public void onFailure(Call call, IOException e) {
                emitter.completeWithError(e);
            }
        });
        return emitter;
    }

    // 安全解析JSON内容
    private String parseContent(String jsonLine) {
        try {
            System.out.println(jsonLine);
            JsonNode node = objectMapper.readTree(jsonLine);
            return node.path("choices").get(0).path("delta").path("content").asText();
        } catch (Exception e) {
            return "[解析错误]";
        }
    }

    // 构建请求体
    private String buildRequestJson(String message) {
        return String.format("{\"model\":\"deepseek-chat\",\"stream\":true,\"messages\":[{\"role\":\"user\",\"content\":\"%s\"}]}",
                message.replace("\"", "\\\""));
    }
}

        <!-- OkHttp用于SSE通信 -->
        <dependency>
            <groupId>com.squareup.okhttp3</groupId>
            <artifactId>okhttp</artifactId>
            <version>4.10.0</version>
        </dependency>
                <!-- JSON处理 -->
        <dependency>
            <groupId>com.fasterxml.jackson.core</groupId>
            <artifactId>jackson-databind</artifactId>
            <version>2.10.3</version>
        </dependency>

2.前端

<!DOCTYPE html>
<meta charset="UTF-8"/>
<html>
<head>
    <title>DeepSeek流式对话</title>
    <link href="https://cdn.jsdelivr.net/npm/@mdi/font@6.9.96/css/materialdesignicons.min.css" rel="stylesheet">
    <style>
        /* 样式见下方CSS部分 */
        .chat-container {
            max-width: 800px;
            margin: 20px auto;
            background: #F9FAFB;
            border-radius: 12px;
            box-shadow: 0 8px 30px rgba(0,0,0,0.1);
        }

        .chat-messages {
            height: 70vh;
            padding: 20px;
            overflow-y: auto;
        }

        .message {
            margin: 12px 0;
            padding: 14px 20px;
            border-radius: 12px;
            max-width: 80%;
            animation: fadeIn 0.3s ease;
        }

        .user-message {
            background: #E3F2FD;
            margin-left: auto;
            border-bottom-right-radius: 4px;
        }

        .ai-message {
            background: #FFFFFF;
            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
            border-bottom-left-radius: 4px;
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }

    </style>
</head>
<body>
<div class="chat-container">
    <div class="chat-messages" id="chatMessages">
        <!-- 消息动态插入 -->
    </div>
    <div class="input-area">
        <input type="text" id="inputField" placeholder="输入您的问题...">
        <button id="sendBtn">
            <i class="mdi mdi-send"></i>
        </button>
    </div>
</div>
<script>
    // 脚本见下方JS部分
    document.getElementById('sendBtn').addEventListener('click', () => {
        const input = document.getElementById('inputField').value.trim();
        if (!input) return;

        // 清空输入框
        document.getElementById('inputField').value = '';

        // 显示用户消息
        appendMessage(input, 'user');

        // 创建AI消息容器
        const aiMessageDiv = appendMessage('', 'ai');

        // 建立SSE连接
        const eventSource = new EventSource(`/stream?message=${encodeURIComponent(input)}`);

        eventSource.onmessage = (e) => {
            aiMessageDiv.textContent += e.data;
            aiMessageDiv.scrollIntoView({ behavior: 'smooth' });
        };

        eventSource.onerror = () => {
            eventSource.close();
            aiMessageDiv.textContent += '（对话结束）';
        };
    });

    function appendMessage(content, type) {
        const container = document.getElementById('chatMessages');
        const div = document.createElement('div');
        div.className = `message ${type}-message`;
        div.textContent = content;
        container.appendChild(div);
        return div;
    }

</script>
</body>
</html>