A WebSocket frame was sent with an unrecognised opCode of [7]] Angular | Spring boot

WebSocket Frame with Unrecognised opCode of [7] When Connecting from Angular to Spring Boot WebSocket Server


I'm trying to connect an Angular application to a Spring Boot WebSocket server, but I am encountering an error with the following message:

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


Here is the Spring Boot WebSocket configuration I'm using:

@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();
}

}


And this is the Angular code I’m using to connect to the WebSocket:

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();
}
}

Dependencies in 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"
}


Dependencies in 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>


This seems to be related to the WebSocket frame sent from the client-side. I have tried using SockJS with the @stomp/stompjs library, but the error persists.

Has anyone encountered this issue or knows how to fix this error? Any help would be greatly appreciated!

Steps I've tried so far:

1. Verified the WebSocket server endpoint /chess-websocket is correctly configured and accessible on http://localhost:8080, Postman is able to connect.
2. Checked CORS settings.
3. Updated all relevant dependencies, including @stomp/stompjs and sockjs-client.

Continue reading...