本篇博客将带领你使用 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 { @Autowired private SimpMessagingTemplate messagingTemplate; @Autowired private 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 API private 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 { @Override public void configureMessageBroker(MessageBrokerRegistry config) { config.enableSimpleBroker("/topic"); config.setApplicationDestinationPrefixes("/app"); } @Override public 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> // 连接 WebSocket var 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 应用，为用户带来全新的体验。
