打造聊天流式回复效果：Spring Boot+WebSocket + JS实战_webclient 流式返回到前端

作者：爱喝兽奶帝天荒 | 2024-08-20 16:22:08

踩

webclient 流式返回到前端

本篇博客将带领你使用 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 应用，为用户带来全新的体验。

声明：本文内容由网友自发贡献，转载请注明出处：【wpsshop博客】