Angular连接Spring Boot WebSocket时出现未知opCode[7]错误

错误信息 #

A WebSocket frame was sent with an unrecognised opCode of [7]

Spring Boot WebSocket 配置 #

@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("/chess-websocket").setAllowedOrigins("http://localhost:4200").withSockJS();
    }

}

Angular 连接代码 #

import { Component, OnInit } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { Client } from '@stomp/stompjs';
import SockJS from 'sockjs-client';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css',
})
export class AppComponent implements OnInit {
  title = 'client';
  
  ngOnInit(): void {
    const socket = new SockJS('http://localhost:8080/chess-websocket');
    const stompClient = new Client({
      webSocketFactory: () => socket,
      debug: (msg) => console.log(msg),
      onConnect: () => console.log('Connected'),
      onStompError: (frame) => console.error('STOMP Error:', frame),
    });
    stompClient.activate();
  }
}

package.json 依赖 #

"dependencies": {
  "@angular/animations": "^18.2.0",
  "@angular/common": "^18.2.0",
  "@angular/compiler": "^18.2.0",
  "@angular/core": "^18.2.0",
  "@angular/forms": "^18.2.0",
  "@angular/platform-browser": "^18.2.0",
  "@angular/platform-browser-dynamic": "^18.2.0",
  "@angular/router": "^18.2.0",
  "@stomp/stompjs": "^7.0.0",
  "rxjs": "~7.8.0",
  "sockjs-client": "^1.6.1",
  "tslib": "^2.3.0",
  "zone.js": "~0.14.10"
}

pom.xml 依赖 #

<dependencies>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-websocket</artifactId>
    </dependency>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter</artifactId>
    </dependency>

    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-test</artifactId>
        <scope>test</scope>
    </dependency>
</dependencies>

问题说明 #

我正尝试将 Angular 应用连接到 Spring Boot WebSocket 服务器，但遇到上述错误。问题似乎和客户端发送的 WebSocket 帧有关，我已经尝试结合使用 SockJS 和 @stomp/stompjs 库，但错误仍未解决。有人遇到过这个问题或知道修复方法吗？

已尝试的步骤 #

• 验证 WebSocket 服务器端点 /chess-websocket 在 http://localhost:8080 上配置正确且可访问，Postman 能够正常连接。
• 检查了 CORS 设置。
• 更新了所有相关依赖，包括 @stomp/stompjs 和 sockjs-client。

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