无法连接ws://localhost:8080/websocket，Angular与后端WebSocket对接求助

核心原因 #

你后端配置了withSockJS()，这个端点是SockJS兼容的HTTP升级端点，不是标准WebSocket端点。直接用Angular的WebSocketSubject（原生WebSocket封装）去连ws://localhost:8080/websocket肯定失败——SockJS需要先通过HTTP握手协商传输方式，原生WebSocket不支持这套流程。

具体修复步骤 #

1. Angular端安装依赖 #

先装STOMP客户端和SockJS：

npm install @stomp/stompjs sockjs-client

2. 重写Angular的WebSocketService #

换成STOMP+SockJS的实现：

import { Injectable } from '@angular/core';
import { Client, Stomp } from '@stomp/stompjs';
import SockJS from 'sockjs-client';

@Injectable({ providedIn: 'root' })
export class WebSocketService {
  private stompClient: Client | null = null;

  constructor() {}

  connectToSocket() {
    // 用SockJS创建连接，指向后端SockJS端点
    const socket = new SockJS('http://localhost:8080/websocket');
    this.stompClient = Stomp.over(socket);

    // 连接配置（关闭调试日志可以去掉debug参数）
    this.stompClient.connect({}, (frame) => {
      console.log('连接成功:', frame);

      // 订阅后端@SendTo指定的目标/wallet/test
      this.stompClient?.subscribe('/wallet/test', (message) => {
        console.log('收到响应:', message.body);
      });

      // 发送消息到后端@MessageMapping("/test")，要加/app前缀（后端配置的ApplicationDestinationPrefixes）
      this.stompClient?.send('/app/test', {}, 'Test message');
    }, (error) => {
      console.error('连接失败:', error);
    });
  }

  disconnect() {
    if (this.stompClient) {
      this.stompClient.disconnect();
      console.log('已断开连接');
    }
  }
}

3. 后端配置微调 #

• 允许跨域的origin可以简化，去掉斜杠：

registry.addEndpoint("/websocket")
        .setAllowedOrigins("http://localhost:4200")
        .withSockJS();

• 如果还是有跨域问题，测试环境可以临时用setAllowedOriginPatterns("*")（生产环境严格控制origin）。

4. 测试验证 #

1. 启动Spring后端，访问http://localhost:8080/websocket，能看到"Welcome to SocketJS"说明后端正常。
2. Angular组件里调用webSocketService.connectToSocket()，看控制台是否输出"连接成功"，后端控制台是否打印"TEST MESSAGE - SUCCESSFUL"，前端是否收到"Received message: Test message"。

额外注意点 #

• 后端@MessageMapping("/test")接收String类型的话，前端发送的消息内容要是纯文本（不要传JSON对象，除非后端改成接收DTO）。
• 不要混用不同的WebSocket库，既然后端用了Spring的STOMP+SockJS，前端就对应用STOMP客户端，别用nxg-socket-io这类不兼容的库。

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