Spring Boot集成WebSocket后Angular客户端无法连接问题咨询

一、正确的WebSocket连接URL获取 #

你连接失败的核心原因是配置中启用了withSockJS()适配，需要分场景使用对应连接地址：

• 场景1：Angular端使用SockJS+StompJS组合（和你现有配置匹配，推荐）
  不要使用ws://开头的地址，连接地址填http://localhost:8080/ws-on即可，SockJS会自动完成WebSocket协议升级，还兼容低版本环境的降级方案。
  Angular端参考连接代码：

  import SockJS from 'sockjs-client';
  import { Stomp } from '@stomp/stompjs';
  
  // 初始化连接
  const sock = new SockJS('http://localhost:8080/ws-on');
  const stompClient = Stomp.over(sock);
  stompClient.connect({}, frame => {
    console.log('连接成功：' + frame);
    // 订阅服务端推送的消息
    stompClient.subscribe('/ws-on/greetings', msg => {
      console.log('收到消息：', JSON.parse(msg.body));
    });
  });
  

  注意：发送消息到服务端@MessageMapping接口时，需要加上Spring默认的应用前缀/app，也就是发送地址为/app/ws-on/hello，才能匹配到你写的greeting方法。
• 场景2：使用原生WebSocket连接（比如用Smart WebSocket Client插件测试）
  现有配置加了withSockJS()后不支持原生WebSocket直连，需要修改WebsocketConfig的端点注册代码，新增原生支持的端点：

  @Override
  public void registerStompEndpoints(StompEndpointRegistry registry) {
      // 原有支持SockJS的端点
      registry.addEndpoint("/ws-on")
              .setAllowedOrigins("http://localhost:4200")
              .withSockJS();
      // 新增原生WebSocket端点
      registry.addEndpoint("/ws-on/native")
              .setAllowedOrigins("*");
  }
  

  此时原生WebSocket连接地址为ws://localhost:8080/ws-on/native，可直接用插件测试连通性。

二、确认Spring Boot服务端WebSocket正常运行的方法 #

• 1、启动服务后查看控制台日志，若出现日志Mapped URL path [/ws-on/**] onto handler of type [class org.springframework.web.socket.sockjs.support.SockJsHttpRequestHandler]，说明端点已注册成功。
• 2、直接在浏览器访问http://localhost:8080/ws-on/info，若返回类似{"entropy":123456,"origins":["*"],"cookie_needed":true,"websocket":true}的JSON结果，说明SockJS端点运行正常。
• 3、添加连接事件监听器，实时感知客户端连接状态：

  @Component
  public class WebSocketEventListener {
      private static final Logger log = LoggerFactory.getLogger(WebSocketEventListener.class);
  
      @EventListener
      public void handleSocketConnect(SessionConnectedEvent event) {
          log.info("客户端连接成功，会话ID：{}", event.getMessage().getHeaders().get("simpSessionId"));
      }
  
      @EventListener
      public void handleSocketDisconnect(SessionDisconnectEvent event) {
          log.info("客户端断开连接，会话ID：{}", event.getSessionId());
      }
  }
  

  只要有客户端成功连接，控制台就会打印对应日志，可直接确认服务端运行状态。

额外配置优化建议 #

如果需要自定义应用前缀，可在configureMessageBroker方法中添加config.setApplicationDestinationPrefixes("/app");，明确指定消息发送前缀，避免路径匹配问题。测试阶段可将setAllowedOrigins的值临时改为"*"，排除跨域配置导致的连接失败问题。

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