震撼，小白博客接入Deepseek

最新推荐文章于 2025-07-03 21:30:26 发布

原创最新推荐文章于 2025-07-03 21:30:26 发布 · 981 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#spring boot #vue.js #java

Java全栈开发同时被 3 个专栏收录

105 篇文章

订阅专栏

系统源码

53 篇文章

订阅专栏

SpringBoot

50 篇文章

订阅专栏

唠嗑部分

小白博客开源一年了，目前的starred如下图

关于博客的详细介绍，请移步文档：小白博客

前段时间Deepseek火爆全球，出现了一股集成的热潮，小白也将deepseek对话介入了小白博客，那么这一节我们就来聊聊。

言归正传

用过大模型的小伙伴应该都知道，在跟大模型对话时，一般都是一个字一个字往出来蹦，那么这就是流式输出。

在本节中我们将会跟大家聊SpringBoot+Vue如何实现这种流式对话的功能，首先我们要用到一个类SseEmitter

SseEmitter 是 Spring Framework 提供的一个类，用于支持服务器发送事件（Server-Sent Events，SSE）。SSE 是一种基于 HTTP 的协议，允许服务器向客户端推送实时数据，而不需要客户端不断地轮询服务器。SSE 特别适用于需要实时更新数据的场景，例如实时通知、实时数据流等。

SseEmitter 的主要特点：

单向通信：SSE 是单向的，服务器可以向客户端推送数据，但客户端不能向服务器发送数据。
基于 HTTP：SSE 使用标准的 HTTP 协议，因此不需要额外的协议支持。
自动重连：如果连接中断，客户端会自动尝试重新连接服务器。
事件流格式：SSE 使用简单的文本格式来传输数据，每条消息以 data: 开头，并以两个换行符 \n\n 结束。

SseEmitter 的基本用法：

创建 SseEmitter 实例：在控制器中创建一个 SseEmitter 实例，并将其返回给客户端。
发送事件：通过 SseEmitter 实例的 send 方法向客户端发送事件。
处理连接关闭：通过 SseEmitter 的 onCompletion 和 onTimeout 方法处理连接关闭或超时的情况。

代码片段：

/*
 *
 * @Author:cxs
 * @since:2025/2/20
 * */
@RestController
public class ChatController {
    @Autowired
    private DeepSeekService deepSeekService;

    @Value("${deepseek.chat-url}")
    private String url;

    @GetMapping("/deepseek/stream")
    public SseEmitter streamData(String question) {
        SseEmitter emitter = new SseEmitter(60000L); // 60秒超时
        deepSeekService.streamDataFromDeepSeek(url, question, new Callback() {
            @Override
            public void onFailure(Call call, IOException e) {
                emitter.completeWithError(e);
            }

            @Override
            public void onResponse(Call call, Response apiResponse) throws IOException {
                if (apiResponse.isSuccessful()) {
                    deepSeekService.readStreamLineByLine(apiResponse, emitter);
                } else {
                    MessageVO vo = new MessageVO();
                    vo.setContent("系统繁忙，请稍后再试");
                    emitter.send(JSON.toJSONString(vo));
                }
            }
        });
        return emitter;
    }
}

在Vue前端，我们需要用到一个类EventSource，EventSource接口是HTML5规范的一部分，允许Web页面通过标准HTTP连接接收服务器推送的数据

EventSource() 构造函数：创建一个新的EventSource，从指定的URL接受服务器发送事件
EventSource.close(): 关闭连接(若存在)将readyState属性设置为CLOSED，若连接已关闭则该方法不执行任何操作
error: 在事件源连接未能打开时触发
message: 在事件源连接收到数据时触发
open: 在和事件源的连接打开时触发（事件源本身可发送具有event字段的消息，将创建一个以该值为key的特定事件

核心代码：

// 建立SSE连接
this.eventSource = new EventSource(`/ai-api/stream?question=${encodeURIComponent(userMessage)}`);

this.eventSource.onmessage = (event) => {
	const data = event.data
	if (data === '[DONE]') {
		this.eventSource.close()
		this.isLoading = false
		return
	}

let obj = JSON.parse(data)
console.log(obj)
// 更新系统回复内容
this.messages[systemMessageIndex].content += obj.content;
		this.$nextTick(() => {
		this.scrollToBottom();
	});
};

this.eventSource.onerror = () => {
	this.eventSource.close();
	this.isLoading = false;
};

this.eventSource.onclose = () => {
	this.isLoading = false;
};