【大模型统一集成项目】让 AI 聊天更丝滑：WebSocket 实现流式对话！

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

系列目录规划：

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

---

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

在上一章中，我们使用 SSE (Server-Sent Events) 实现了 AI 生成式流式对话，但是 SSE 只能 单向推送数据，无法支持 用户在对话过程中发送控制指令（如 停止响应、调整模型、动态修改参数）。

SSE vs WebSocket 对比

对比项	SSE (Server-Sent Events)	WebSocket
通信方向	单向 (Server → Client)	双向 (Server ↔ Client)
协议	HTTP/1.1 + EventSource	WebSocket 协议
连接方式	基于 HTTP 长连接	需要单独 升级协议
消息格式	纯文本（也支持 JSON）	二进制 / JSON / 文本
断线重连	浏览器自动重连	需要手动实现重连逻辑
服务器推送	天然支持（适合 AI 生成式内容）	需要额外实现
服务器压力	轻量级（基于 HTTP/1.1）	服务器需要维护更多连接
浏览器支持	所有现代浏览器支持	需要 支持 WebSocket
适用场景	AI 流式输出、日志推送、股票行情	实时聊天、双向交互、多人协作

📌 核心区别：

• SSE：适合 服务器推送数据，例如 AI 流式回复、日志推送、订阅通知。
• WebSocket：适合 双向交互，例如 聊天、多人协作、在线游戏。

本章，我们将升级方案，使用 WebSocket 实现 双向通信，使 AI 对话更智能、更可交互。（上一节回顾）

🌟 为什么要用 WebSocket？

与 SSE 相比，WebSocket 具有以下优点：

1. 支持双向通信 🔄 —— 客户端可以随时向服务器发送消息，而不仅仅是等待 AI 回复。
2. 更低的连接开销 🚀 —— WebSocket 连接后，数据传输比 SSE 高效，适用于高并发场景。
3. 支持二进制数据 📡 —— 可以更灵活地发送 JSON、二进制流，适配 AI 复杂交互。
4. 连接状态可控 🛠 —— 可以手动 断开连接、重连、主动停止 AI 生成。

---

📌 WebSocket 实现思路

1. 后端：使用 Spring Boot 搭建 WebSocket 服务器，实现 AI 对话流式返回。

2. 前端：用 WebSocket 对接服务器，实现 用户消息发送 & AI 流式回复。

3. 增强功能：

   • 支持多轮对话 🗣
   • 支持手动终止 AI 响应 ⏹
   • 支持 JSON 格式通信 🔄

---

🚀 后端实现 WebSocket 服务

1️⃣ 引入 WebSocket 依赖

在 pom.xml 添加 WebSocket 依赖：

<dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-websocket</artifactId>
</dependency>

---

2️⃣ 创建 WebSocket 服务器

在 WebSocketChatHandler.java 实现 双向通信逻辑：

@Component
public class WebSocketChatHandler extends TextWebSocketHandler {private final DeepSeekClient deepSeekClient;public WebSocketChatHandler(DeepSeekClient deepSeekClient) {this.deepSeekClient = deepSeekClient;}@Overridepublic void afterConnectionEstablished(WebSocketSession session) throws Exception {System.out.println("WebSocket 连接成功：" + session.getId());}@Overrideprotected void handleTextMessage(WebSocketSession session, TextMessage message) throws Exception {String userMessage = message.getPayload();System.out.println("用户发送消息：" + userMessage);try {// 调用 AI 大模型接口，并流式返回消息deepSeekClient.streamChatWs(userMessage, session);} catch (Exception e) {session.sendMessage(new TextMessage("AI 服务异常，请稍后重试。"));e.printStackTrace();}}@Overridepublic void afterConnectionClosed(WebSocketSession session, CloseStatus status) {System.out.println("WebSocket 连接关闭：" + session.getId());}
}

---

3️⃣ 配置 WebSocket 路由

在 WebSocketConfig.java 里开启 WebSocket 并配置路由：

@Configuration
@EnableWebSocket
public class WebSocketConfig implements WebSocketConfigurer {@Autowiredprivate DeepSeekClient deepSeekClient;@Overridepublic void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {registry.addHandler(new WebSocketChatHandler(deepSeekClient), "/api/ai/chat/websocket").setAllowedOrigins("*");}
}

📌 路由说明：

• WebSocket 连接地址为 ws://localhost:8080/api/ai/chat/websocket
• 允许 所有前端域名 访问 (setAllowedOrigins("*"))

---

🚀 前端实现 WebSocket 交互

1️⃣ 创建 WebSocket 连接

<script>let ws;let isStreaming = false; // 是否正在接收 AI 回复function initWebSocket() {ws = new WebSocket("ws://localhost:8080/web/api/ai/chat/websocket");ws.onopen = function() {console.log("WebSocket 连接成功！");document.getElementById("stopButton").disabled = false; // 允许停止};ws.onmessage = function(event) {if (!isStreaming) return; // 如果停止了，就不处理新消息appendBotMessage(event.data);};ws.onerror = function(error) {console.error("WebSocket 错误: ", error);};ws.onclose = function() {console.log("WebSocket 连接关闭");document.getElementById("stopButton").disabled = true; // 禁用停止按钮};}function sendMessage() {let input = document.getElementById("userInput");let message = input.value.trim();if (message === "") return;let modelType = document.getElementById("modelType").value;appendUserMessage(message);// 如果 WebSocket 关闭了，重新连接if (!ws || ws.readyState === WebSocket.CLOSED) {initWebSocket();setTimeout(() => ws.send(JSON.stringify({ modelType: modelType, message: message })), 500);} else {ws.send(JSON.stringify({ modelType: modelType, message: message }));}isStreaming = true; // 允许接收 AI 回复input.value = "";document.getElementById("stopButton").disabled = false; // 启用“停止”按钮}function stopStreaming() {isStreaming = false; // 停止接收数据if (ws) {ws.close(); // 关闭 WebSocket 连接}document.getElementById("stopButton").disabled = true; // 禁用“停止”按钮}function appendUserMessage(text) {let chatBox = document.getElementById("chatBox");let userMessage = document.createElement("div");userMessage.className = "message user-message";userMessage.innerText = text;chatBox.appendChild(userMessage);chatBox.scrollTop = chatBox.scrollHeight;}function appendBotMessage(text) {let chatBox = document.getElementById("chatBox");let lastMessage = chatBox.lastElementChild;if (lastMessage && lastMessage.classList.contains("bot-message")) {lastMessage.innerText += text;} else {let botMessage = document.createElement("div");botMessage.className = "message bot-message";botMessage.innerText = text;chatBox.appendChild(botMessage);}chatBox.scrollTop = chatBox.scrollHeight;}// 初始化 WebSocket 连接initWebSocket();
</script>

---

2️⃣ 添加 HTML 交互界面

新增一个"停止回答"按钮可随时停止。

<div class="chat-container"><h1>AI 双向流式聊天</h1><div class="chat-box" id="chatBox"></div><div class="input-area"><input type="text" id="userInput" placeholder="请输入问题..."><select id="modelType"><option value="chatgpt">ChatGPT</option><option value="deepseek">DeepSeek</option><option value="local">本地模型</option></select><button onclick="sendMessage()">发送</button><button id="stopButton" onclick="stopStreaming()" disabled>停止回答</button></div>
</div>

---

✅ 功能测试&效果展示

1. 启动 Spring Boot WebSocket 服务

2. 访问 chat 页面，测试 WebSocket 交互

   • 发送消息
   • AI 回复流式返回
   • 支持手动终止连接（关闭 WebSocket）

---

📌 进阶优化

✅ 支持 AI 生成式内容

• 可以用 OpenAI API 或 大模型 生成 流式 AI 响应
• 结合 WebSocket 分块返回，提升体验

✅ 支持会话上下文

• 维护 WebSocket 连接的 Session，实现多轮对话

✅ 实现重连机制

• WebSocket 断开时 自动重连，避免用户体验中断

---

🎯 总结

方案	SSE (Server-Sent Events)	WebSocket
通信方向	单向 (Server → Client)	双向 (Server ↔ Client)
适用场景	AI 生成式流式返回、订阅推送	实时对话、交互式 AI
断线重连	浏览器自动重连	需要手动实现
性能	适合中等并发	高并发更优

🎯 WebSocket 适用于：

• 实时 AI 聊天
• 流式 AI 交互
• 多轮会话管理

🎯 下一步优化：

• 结合大模型 API，让 WebSocket 支持 AI 生成式对话
• 实现 JSON 通信协议，支持更复杂交互

💡 你已经掌握 SSE + WebSocket 让你的 AI 聊天更智能！后续我们将探索 AI 生成内容的优化技巧！🔥

---

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