Failed to connect to websocket server in my spring boot application using Angular

I'm trying to make a WebSocket connection in my application using angular and springboot, I have 2 configuration classes, one called UploadSocketHandler and WebSocketConfig. And I'm getting the following error:



I will pass on the three files that I believe are of utmost importance for this connection.

First UploadSocketHandler

package com.pixpro.upload.core.websocket;

import org.springframework.stereotype.Component;
import org.springframework.web.socket.TextMessage;
import org.springframework.web.socket.WebSocketSession;
import org.springframework.web.socket.handler.TextWebSocketHandler;

import java.io.IOException;

@Component
public class UploadSocketHandler extends TextWebSocketHandler {
@Override
public void handleTextMessage(WebSocketSession session, TextMessage message) throws IOException {
System.out.print("Mensagem recebida: " + message.getPayload());
session.sendMessage(new TextMessage("Echo: " + message.getPayload()));
}
}


Second WebSocketConfig

package com.pixpro.upload.core.websocket;

import org.springframework.context.annotation.Configuration;
import org.springframework.web.socket.config.annotation.EnableWebSocket;
import org.springframework.web.socket.config.annotation.WebSocketConfigurer;
import org.springframework.web.socket.config.annotation.WebSocketHandlerRegistry;

@Configuration
@EnableWebSocket
public class WebSocketConfig implements WebSocketConfigurer {

private final UploadSocketHandler uploadSocketHandler;

public WebSocketConfig(UploadSocketHandler uploadSocketHandler) {
this.uploadSocketHandler = uploadSocketHandler;
}

@Override
public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
registry.addHandler(uploadSocketHandler, "/ws/upload")
.setAllowedOrigins("*");
}
}


Now I show my upload-socket.service in Angular

import { Injectable } from "@angular/core";
import { Observable } from "rxjs";
import { webSocket, WebSocketSubject } from "rxjs/webSocket";

@Injectable({ providedIn: 'root' })
export class UploadSocketService {
private socket$!: WebSocketSubject<any>;

connect(): Observable<any> {
if (!this.socket$ || this.socket$.closed) {
this.socket$ = webSocket({
url: 'ws://localhost:8080/ws/upload',
openObserver: {
next: () => console.log('[WebSocket] ✅ Conectado ao servidor')
},
closeObserver: {
next: () => console.log('[WebSocket] ❌ Desconectado do servidor')
}
});
}

this.socket$.subscribe({
next: msg => console.log('[WebSocket] Mensagem recebida:', msg),
error: err => console.error('[WebSocket] ❗ Erro:', err)
});

return this.socket$.asObservable();
}

disconnect() {
if (this.socket$) {
console.log('[WebSocket] Desconectando...');
this.socket$.complete();
}
}
}

Continue reading...