SpringBoot-模拟SSE对话交互
SpringBoot-模拟SSE对话交互
后端使用SSE进行会话，前端使用Html模拟大模型的问答交互->【前端】+【后端】
1-学习目的
本项目代码仓库：https://gitee.com/enzoism/springboot_sse
1-核心知识点
- 1）什么是SSE协议->客户端发起一次请求，服务器保持该连接打开，并在有新数据时主动向客户端推送
- 2）后端-开发SSE控制器
- 3）前端-如何与SSE协议交互
2-附带知识点
- 1）什么是请求跨域-后端如何解决跨域问题
2-动手实践
1-什么是SSE协议
SSE（Server-Sent Events）协议是一种用于在 Web 浏览器和服务器之间实现服务器向客户端单向实时通信的技术。下面将从多个方面详细介绍 SSE 协议：
1-基本概念
SSE 允许服务器在建立连接后，持续向客户端发送更新信息。与传统的请求 - 响应模式不同，在 SSE 中，客户端发起一次请求，服务器保持该连接打开，并在有新数据时主动向客户端推送。
2-工作原理
- 建立连接：客户端通过创建一个
EventSource对象来向服务器发起 HTTP 请求，请求的响应头中包含Content-Type: text/event-stream，表明这是一个 SSE 连接。 - 服务器推送数据：服务器保持连接打开，并在有新数据时，以特定的格式将数据发送给客户端。数据以文本流的形式传输，每条消息以两个换行符
\n\n分隔。 - 客户端接收数据：客户端的
EventSource对象会监听服务器发送的消息，并在接收到消息时触发相应的事件。
3-消息格式
SSE 消息由多个字段组成，每个字段以键值对的形式表示，字段之间用换行符分隔。常见的字段有：
data：表示消息的实际内容。如果消息内容较长，可以分成多行，每行以data:开头。event：可选字段，用于指定事件类型。如果指定了事件类型，客户端可以针对不同的事件类型进行不同的处理。id：可选字段，用于为消息指定一个唯一的标识符。客户端可以使用这个标识符来实现消息的断点续传。retry：可选字段，用于指定客户端在连接中断后重试连接的时间间隔（以毫秒为单位）。
4-优点和缺点
- 优点
- 简单易用：客户端只需要创建一个
EventSource对象，服务器端只需要按照特定的格式发送数据即可。 - 自动重连：当连接中断时，客户端会自动尝试重新连接，并且可以使用
id字段实现消息的断点续传。 - 浏览器原生支持：现代浏览器都原生支持
EventSource对象，无需额外的库或插件。
- 简单易用：客户端只需要创建一个
- 缺点
- 单向通信：SSE 只支持服务器向客户端单向通信，客户端不能向服务器发送消息。
- 兼容性问题：虽然现代浏览器都支持 SSE，但在一些旧版本的浏览器中可能不支持。
- 连接数量限制：浏览器对每个域名的 SSE 连接数量有一定的限制，通常为 6 个。
5-应用场景
- 实时新闻推送：服务器可以实时向客户端推送最新的新闻消息。
- 股票行情更新：服务器可以实时向客户端推送股票价格的变化。
- 在线聊天系统：服务器可以实时向客户端推送新的聊天消息。
2-后端-开发SSE控制器-Java版本
1. 编写SSE控制器
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.servlet.mvc.method.annotation.SseEmitter;
import java.util.concurrent.ExecutorService;
import java.util.concurrent.Executors;
@RestController
public class ChatController {
private final DeepSeekService deepSeekService;
public ChatController(DeepSeekService deepSeekService) {
this.deepSeekService = deepSeekService;
}
@GetMapping("/chat")
public SseEmitter chat(@RequestParam String message) {
SseEmitter emitter = new SseEmitter();
ExecutorService executorService = Executors.newSingleThreadExecutor();
executorService.submit(() -> {
try {
// 调用DeepSeek的chat模型
deepSeekService.streamChatResponse(message, emitter);
} catch (Exception e) {
emitter.completeWithError(e);
} finally {
executorService.shutdown();
}
});
return emitter;
}
}
2. 模拟DeepSeek服务
import org.springframework.stereotype.Service;
@Service
public class DeepSeekService {
public void streamChatResponse(String message, SseEmitter emitter) {
// 调用DeepSeek的API并流式输出
try {
// 模拟流式输出
String[] responses = {"Hello! ", "How can I help you? ", "I'm an AI assistant."};
for (String response : responses) {
emitter.send(SseEmitter.event().data(response));
Thread.sleep(1000); // 模拟延迟
}
} catch (Exception e) {
emitter.completeWithError(e);
}
}
}
3-前端：简单的HTML/JavaScript界面
1. 创建一个前端页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DeepSeek Chat</title>
<style>
body { font-family: Arial, sans-serif; margin: 20px; }
#messageInput { width: 300px; padding: 5px; }
#response { width: 400px; height: 200px; border: 1px solid #ccc; padding: 10px; }
</style>
</head>
<body>
<h1>DeepSeek Chat</h1>
<input type="text" id="messageInput" placeholder="Enter your message">
<button onclick="sendMessage()">Send</button>
<div id="response"></div>
<script>
let eventSource;
function sendMessage() {
const messageInput = document.getElementById('messageInput');
const responseDiv = document.getElementById('response');
const message = messageInput.value;
if (message.trim() === '') return;
responseDiv.innerHTML = '';
// 创建一个新的EventSource
eventSource = new EventSource(`/chat?message=${encodeURIComponent(message)}`);
eventSource.onmessage = function (event) {
responseDiv.innerHTML += event.data;
};
eventSource.onerror = function (error) {
console.error('EventSource error:', error);
eventSource.close();
};
}
</script>
</body>
</html>
3-其他版本SSE-NodeJs
1-服务器端代码示例（Node.js + Express）
const express = require('express');
const app = express();
app.get('/sse', (req, res) => {
res.setHeader('Content-Type', 'text/event-stream');
res.setHeader('Cache-Control', 'no-cache');
res.setHeader('Connection', 'keep-alive');
res.flushHeaders();
let counter = 0;
const intervalId = setInterval(() => {
res.write(`data: Message ${counter}\n\n`);
counter++;
}, 1000);
req.on('close', () => {
clearInterval(intervalId);
});
});
const port = 3000;
app.listen(port, () => {
console.log(`Server running on port ${port}`);
});
2-客户端代码示例（JavaScript）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<div id="messages"></div>
<script>
const eventSource = new EventSource('/sse');
eventSource.onmessage = function (event) {
const messagesDiv = document.getElementById('messages');
const newMessage = document.createElement('p');
newMessage.textContent = event.data;
messagesDiv.appendChild(newMessage);
};
eventSource.onerror = function (error) {
console.error('EventSource failed:', error);
};
</script>
</body>
</html>