做药的常用网站,深圳营销型网站建站,北京 酒店 企业 网站建设,wordpress微信朋友圈本篇博客将带领你使用 Spring Boot、WebSocket 和 JavaScript 实现一个类似 ChatGPT 的流式回复效果。前端发送消息后#xff0c;后端接收消息并请求 AI API#xff0c;并将 AI 返回的流式响应实时推送到前端#xff0c;最终在聊天界面呈现出逐字出现的打字效果。
技术原理…本篇博客将带领你使用 Spring Boot、WebSocket 和 JavaScript 实现一个类似 ChatGPT 的流式回复效果。前端发送消息后后端接收消息并请求 AI API并将 AI 返回的流式响应实时推送到前端最终在聊天界面呈现出逐字出现的打字效果。
技术原理 WebSocket 全双工通信: WebSocket 协议提供全双工通信通道允许服务器和客户端之间进行双向实时数据传输非常适合实现流式数据传输。 Spring WebFlux 响应式编程: Spring WebFlux 基于 Reactor 库支持响应式流处理可以处理 AI API 返回的流式数据。 SSEServer-Sent Events SSE 是一种基于 HTTP 的单向服务器推送技术可以将 AI 返回的流式数据实时推送到前端。
实现步骤
一、后端实现 (Spring Boot)
添加依赖
dependencygroupIdorg.springframework.boot/groupIdartifactIdspring-boot-starter-websocket/artifactId
/dependency
dependencygroupIdorg.springframework.boot/groupIdartifactIdspring-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 APIMessageMapping(/chat.sendMessage) // 接收来自客户端的消息public void sendMessage(Payload Message message) throws Exception {// 构造 AI API 请求ApiRequest apiRequest new ApiRequest(message.getContent()); // 假设 AI API 接受 ApiRequest 对象// 调用 AI API获取流式响应FluxString 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 FluxString callAiApi(ApiRequest request) {// 将 ApiRequest 对象转换为 JSON 字符串// ...// 发送 POST 请求并指定返回数据类型为 FluxStringreturn 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
headtitleChat Application/titlescript srchttps://cdnjs.cloudflare.com/ajax/libs/sockjs-client/1.5.1/sockjs.min.js/scriptscript srchttps://cdnjs.cloudflare.com/ajax/libs/stomp.js/2.3.3/stomp.min.js/script
/head
bodydiv idchat-containerdiv idchat-output/divinput typetext idmessage-input placeholderEnter message...button onclicksendMessage()Send/button/divscript// 连接 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 应用为用户带来全新的体验。
