Angular中使用stompjs建立WebSocket连接失败问题排查

后端配置排查 #

1. WebSocket端点与跨域配置

   • 确认WebSocketConfig中正确启用SockJS并配置跨域：

     @Override
     public void registerStompEndpoints(StompEndpointRegistry registry) {
         registry.addEndpoint("/ws-endpoint")
                 .setAllowedOriginPatterns("http://localhost:4200") // 匹配你的Angular端口
                 .withSockJS();
     }
     

     注意：Spring Boot 2.4+ 推荐用setAllowedOriginPatterns而非setAllowedOrigins，避免通配符跨域限制。
   • 检查消息代理配置是否正确启用/topic前缀：

     @Override
     public void configureMessageBroker(MessageBrokerRegistry config) {
         config.enableSimpleBroker("/topic"); // 确保订阅前缀被代理支持
         config.setApplicationDestinationPrefixes("/app");
     }
     

2. 定时消息发送验证

   • 在消息发送代码中添加日志，确认消息确实被推送：

     @Scheduled(fixedRate = 5000)
     public void sendTimedMessage() {
         CustomMessage message = new CustomMessage("定时消息", LocalDateTime.now());
         log.info("推送消息至/topic: {}", message);
         simpMessagingTemplate.convertAndSend("/topic", message);
     }
     

   • 查看后端日志，确认定时任务正常执行且无序列化错误。

前端@stomp/stompjs v7.x 配置排查 #

1. 连接地址与WebSocket工厂配置

   • 若后端启用SockJS，前端需通过SockJS实例创建连接，而非直接使用ws://地址：

     import { Client } from '@stomp/stompjs';
     import SockJS from 'sockjs-client';
     
     // 初始化STOMP客户端
     this.stompClient = new Client({
       webSocketFactory: () => new SockJS('http://localhost:8090/ws-endpoint'),
       reconnectDelay: 3000,
       heartbeatIncoming: 0, // 按需配置，0表示关闭心跳
       heartbeatOutgoing: 0,
     });
     

   • 若使用原生WebSocket连接，地址需改为ws://localhost:8090/ws-endpoint/websocket（Spring Boot SockJS端点的原生WS路径）。

2. 订阅时机与回调设置

   • 必须在连接成功回调中执行订阅操作，避免提前订阅失效：

     this.stompClient.onConnect = (frame) => {
       console.log('STOMP连接成功:', frame);
       // 订阅/topic主题
       this.subscription = this.stompClient.subscribe('/topic', (message) => {
         console.log('收到消息:', JSON.parse(message.body));
         // 处理消息逻辑
       });
     };
     

   • 补充错误回调，捕获连接或订阅失败细节：

     this.stompClient.onStompError = (frame) => {
       console.error('STOMP协议错误:', frame.headers['message']);
       console.error('错误详情:', frame.body);
     };
     
     this.stompClient.onWebSocketError = (error) => {
       console.error('WebSocket连接错误:', error);
     };
     

3. API版本兼容性

   • 确认使用@stomp/stompjs v7.x的正确API：废弃了旧版Stomp.client()，改用new Client()构造实例；避免混用旧版方法导致连接异常。

跨域与格式匹配问题 #

1. 跨域验证
   • 确保Angular运行端口（默认4200）被后端跨域配置允许，可临时用setAllowedOriginPatterns("*")测试是否为跨域问题。
2. 消息序列化/反序列化
   • 后端自定义消息类需具备getter/setter，或添加@JsonProperty注解确保JSON序列化正常：

     public class CustomMessage {
         @JsonProperty("content")
         private String content;
         @JsonProperty("sendTime")
         private LocalDateTime sendTime;
     
         // 构造方法、getter/setter
     }
     

   • 前端需根据后端序列化格式解析消息，若为JSON则用JSON.parse(message.body)，避免直接使用原始字符串。

额外验证步骤 #

1. 用浏览器DevTools的Network面板，查看WebSocket连接请求的状态码，是否有403/404错误；查看请求头中的Origin是否与后端跨域配置匹配。
2. 确认前端未启用代理配置导致请求转发错误（Angular的proxy.conf.json若配置不当，会干扰WebSocket连接）。

内容的提问来源于stack exchange，提问作者Fuzail