当前位置：首页 > news >正文

打造聊天流式回复效果：Spring Boot+WebSocket + JS实战

news 2025/7/7 17:36:06

本篇博客将带领你使用 Spring Boot、WebSocket 和 JavaScript 实现一个类似 ChatGPT 的流式回复效果。前端发送消息后，后端接收消息并请求 AI API，并将 AI 返回的流式响应实时推送到前端，最终在聊天界面呈现出逐字出现的打字效果。

技术原理

WebSocket 全双工通信: WebSocket 协议提供全双工通信通道，允许服务器和客户端之间进行双向实时数据传输，非常适合实现流式数据传输。
Spring WebFlux 响应式编程: Spring WebFlux 基于 Reactor 库，支持响应式流处理，可以处理 AI API 返回的流式数据。
SSE（Server-Sent Events）： SSE 是一种基于 HTTP 的单向服务器推送技术，可以将 AI 返回的流式数据实时推送到前端。

实现步骤

一、后端实现 (Spring Boot)

添加依赖

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

创建 WebSocket 处理器

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.messaging.handler.annotation.MessageMapping;
import org.springframework.messaging.handler.annotation.Payload;
import org.springframework.messaging.simp.SimpMessagingTemplate;
import org.springframework.stereotype.Controller;
import org.springframework.web.reactive.function.client.WebClient;
import reactor.core.publisher.Flux;import java.time.Duration;@Controller
public class ChatController {@Autowiredprivate SimpMessagingTemplate messagingTemplate;@Autowiredprivate WebClient webClient; // 用于调用 AI API@MessageMapping("/chat.sendMessage") // 接收来自客户端的消息public void sendMessage(@Payload Message message) throws Exception {// 构造 AI API 请求ApiRequest apiRequest = new ApiRequest(message.getContent()); // 假设 AI API 接受 ApiRequest 对象// 调用 AI API，获取流式响应Flux<String> apiResponse = callAiApi(apiRequest);// 处理 AI API 响应，并逐条发送给前端apiResponse.delayElements(Duration.ofMillis(50)) // 模拟打字延迟.subscribe(chunk -> {Message responseMessage = new Message("AI", chunk);messagingTemplate.convertAndSend("/topic/chat", responseMessage);});}// 调用 AI APIprivate Flux<String> callAiApi(ApiRequest request) {// 将 ApiRequest 对象转换为 JSON 字符串// ...// 发送 POST 请求，并指定返回数据类型为 Flux<String>return webClient.post().uri("https://api.example.com/ai-api") // 替换为实际的 AI API 地址.bodyValue(request).retrieve().bodyToFlux(String.class);}// 消息类public static class Message {private String sender;private String content;// 构造函数，getter 和 setter}// AI API 请求类public static class ApiRequest {private String prompt;// 构造函数，getter 和 setter}
}

WebSocket 配置

import org.springframework.context.annotation.Configuration;
import org.springframework.messaging.simp.config.MessageBrokerRegistry;
import org.springframework.web.socket.config.annotation.EnableWebSocketMessageBroker;
import org.springframework.web.socket.config.annotation.StompEndpointRegistry;
import org.springframework.web.socket.config.annotation.WebSocketMessageBrokerConfigurer;@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {@Overridepublic void configureMessageBroker(MessageBrokerRegistry config) {config.enableSimpleBroker("/topic");config.setApplicationDestinationPrefixes("/app");}@Overridepublic void registerStompEndpoints(StompEndpointRegistry registry) {registry.addEndpoint("/ws").withSockJS();}
}

二、前端实现 (JavaScript)

<!DOCTYPE html>
<html>
<head><title>Chat Application</title><script src="https://cdnjs.cloudflare.com/ajax/libs/sockjs-client/1.5.1/sockjs.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/stomp.js/2.3.3/stomp.min.js"></script>
</head>
<body><div id="chat-container"><div id="chat-output"></div><input type="text" id="message-input" placeholder="Enter message..."><button onclick="sendMessage()">Send</button></div><script>// 连接 WebSocketvar socket = new SockJS('/ws');var stompClient = Stomp.over(socket);stompClient.connect({}, function(frame) {console.log('Connected: ' + frame);// 订阅聊天频道stompClient.subscribe('/topic/chat', function(message) {showMessage(JSON.parse(message.body));});});// 发送消息function sendMessage() {var message = document.getElementById('message-input').value;stompClient.send("/app/chat.sendMessage", {}, JSON.stringify({'sender': 'user', // 可替换为实际用户名'content': message}));}// 显示消息function showMessage(message) {var chatOutput = document.getElementById('chat-output');var messageElement = document.createElement('div');if (message.sender === 'AI') {// AI 回复逐字显示typeWriter(messageElement, message.content, 0);} else {messageElement.innerHTML = '<strong>' + message.sender + ':</strong> ' + message.content;chatOutput.appendChild(messageElement);}}// 模拟打字效果function typeWriter(element, text, i) {if (i < text.length) {element.innerHTML += text.charAt(i);setTimeout(function() {typeWriter(element, text, i + 1);}, 50); // 调整打字速度} else {document.getElementById('chat-output').appendChild(element);}}</script>
</body>
</html>

总结

本文介绍了如何使用 Spring Boot 和 WebSocket 实现类似 ChatGPT 的流式回复效果，并详细讲解了每个步骤的技术原理和代码实现。通过这种方式，我们可以构建更加 engaging 和 interactive 的 Web 应用，为用户带来全新的体验。

打造聊天流式回复效果：Spring Boot+WebSocket + JS实战

技术原理

实现步骤

一、后端实现 (Spring Boot)

二、前端实现 (JavaScript)

总结

相关文章：

打造聊天流式回复效果：Spring Boot+WebSocket + JS实战

202年版最新Python下载安装+PyCharm下载安装激活和使用教程！（附安装包+激活码）

【面试宝典】spring常见面试题总结[上]

NC单链表的排序

阿里云部署open-webui实现openai代理服务(持续更新)

Vue3简介和快速体验

LeetCode98 验证二叉搜索树

llama的神经网络结构；llama的神经网络结构中没有MLP吗；nanogpt的神经网络结构；残差是什么；残差连接：主要梯度消失

函数的常量引用入参const saclass sdf，可否传入一个指向saclass对象的指针 shared_ptr＜saclass＞

数据库：SQL——数据库操作的核心语言

Unity + HybridCLR 从零开始

C++小总结

从快到慢学习Git指令

传奇游戏发布渠道

如何有效阅读科研论文【方法论】

【揭秘】层层加码，竟能加速渠道营销数字化？-eBest

基于WAMP环境的简单用户登录系统实现（v3版）（持续迭代）

大语言模型与多模态大模型loss计算

线上研讨会 | CATIA助力AI提升汽车造型设计

Unity新输入系统之 InputAction（输入配置文件最基本的单位）

19c补丁后oracle属主变化，导致不能识别磁盘组

CTF show Web 红包题第六弹

Spark 之入门讲解详细版（1）

智能在线客服平台：数字化时代企业连接用户的 AI 中枢

MVC 数据库

SpringBoot+uniapp 的 Champion 俱乐部微信小程序设计与实现，论文初版实现

TRS收益互换：跨境资本流动的金融创新工具与系统化解决方案

WordPress插件：AI多语言写作与智能配图、免费AI模型、SEO文章生成

鱼香ros docker配置镜像报错：https://registry-1.docker.io/v2/

NFT模式：数字资产确权与链游经济系统构建