Java and React WebSocket - Error Connection

Question

Hello! After scouring the internet for a solution, I need some help! I have a Java backend that is supposed to process information and send it to the React frontend via WebSocket. However, I'm having trouble establishing a connection. Can anyone help me identify what I'm doing wrong?

Código do WebSocket no Java:

package com.fatec.dsm.tharseo.config;

import org.springframework.context.annotation.Configuration;
import org.springframework.messaging.simp.config.MessageBrokerRegistry;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.socket.config.annotation.EnableWebSocketMessageBroker;
import org.springframework.web.socket.config.annotation.StompEndpointRegistry;
import org.springframework.web.socket.config.annotation.WebSocketMessageBrokerConfigurer;

@Configuration
@EnableWebSocketMessageBroker
@CrossOrigin(origins = "http://localhost:3000", allowCredentials = "true")
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {

@Override
public void registerStompEndpoints(StompEndpointRegistry registry) {
    registry.addEndpoint("/websocket").withSockJS();
}

@Override
public void configureMessageBroker(MessageBrokerRegistry config) {
    config.enableSimpleBroker("/topic");
    config.setApplicationDestinationPrefixes("/app");
}

}   

Código do Controller:

package com.fatec.dsm.tharseo.controllers;

import org.springframework.messaging.handler.annotation.MessageMapping;
import org.springframework.messaging.handler.annotation.SendTo;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.CrossOrigin;

@Controller
@CrossOrigin(origins = "http://localhost:3000", allowCredentials = "true")
public class TharseoWsController {

@MessageMapping("/chat")
@SendTo("/topic/messages")
public String sendMsg(String message) {
    return "teste de msg" + message;
}

}   

Código do React:

import "./assets/css/App.css";
import React, { useState, useEffect } from "react";
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
import Chart from "./Components/Chart";
import OrdersSetup from "./Pages/OrdersSetup";
import Accountinfo from "./Pages/AccountInfo";
import Home from "./Pages/Home";
import useWebSocket from "react-use-websocket";

function App() {
const \[user, setUser\] = useState(\[\]);
const \[data, setData\] = useState(\[\]);
const \[symbol, setSymbol\] = useState("BTCUSDT");
const \[interval, setInterval\] = useState("1m");
const \[addressServerTharseo, setAddressServerTharseo\] = useState("http://localhost:8080");

useEffect(() => {
    const getUser = async () => {
        try {
            const res = await fetch("http://localhost:8080/tharseo/updatedatauser/1");
            if (!res.ok) {
                throw new Error("Error when get user");
            }
            const userData = await res.json();
            setUser(userData);
            console.log("Return by Variable: ", userData);
        } catch (error) {
            console.error("Error User Resquest", error);
        }
    };

    getUser();
}, []);

const { lastJsonMessage } = useWebSocket(
    "ws://localhost:8080/websocket",
    {
        onOpen: () => console.log("Conectado ao servidor WebSocket"),
        onError: (err) => console.log(err),
        shouldReconnect: () => true,
        reconnectInterval: 3000,
        onMessage: (msg) => {
            console.log(msg);
        },
    }
);

return (
    <Router>
        <div className="App">
            <Routes>
                <Route
                    exact
                    path="/"
                    element={
                        <Home
                            chart={data}
                            user={user}
                            addressServer={addressServerTharseo}
                        />
                    }
                />
                <Route path="/chart" element={<Chart data={data} />} />
                <Route path="/accountinfo" element={<Accountinfo user={user} />} />
                <Route path="/orderssetup" element={<OrdersSetup />} />
            </Routes>
        </div>
    </Router>
);

}

export default App;

Erro no Console:

create-or-join.ts:97  WebSocket connection to 'ws://localhost:8080/websocket' failed:         createOrJoinSocket    @    create-or-join.ts:97    (anônimo)    @    use-websocket.ts:120 step    @       use-socket-io.ts:39     (anônimo)    @    use-socket-io.ts:39 fulfilled    @    use-socket-    io.ts:39`

Console do Servidor Java:

2024-03-31T08:49:22.961-03:00  INFO 14992 --- [com.fatec.dsm.tharseo] [nio-8080-exec-3]   o.a.c.c.C.[Tomcat].[localhost].[/]       : Initializing Spring DispatcherServlet   'dispatcherServlet' 2024-03-31T08:49:22.961-03:00  INFO 14992 --- [com.fatec.dsm.tharseo] [nio- 8080-exec-3] o.s.web.servlet.DispatcherServlet        : Initializing Servlet 'dispatcherServlet'  2024-03-31T08:49:22.963-03:00  INFO 14992 --- [com.fatec.dsm.tharseo] [nio-8080-exec-3]  o.s.web.servlet.DispatcherServlet        : Completed initialization in 1 ms 2024-03- 31T08:50:07.005-03:00  INFO 14992 --- [com.fatec.dsm.tharseo] [MessageBroker-1]  o.s.w.s.c.WebSocketMessageBrokerStats    : WebSocketSession[0 current WS(0)-HttpStream(0)- HttpPoll(0), 0 total, 0 closed abnormally (0 connect failure, 0 send limit, 0 transport error)],  stompSubProtocol[processed CONNECT(0)-CONNECTED(0)-DISCONNECT(0)], stompBrokerRelay[null],  inboundChannel[pool size = 0, active threads = 0, queued tasks = 0, completed tasks = 0],  outboundChannel[pool size = 0, active threads = 0, queued tasks = 0, completed tasks = 0],  sockJsScheduler[pool size = 1, active threads = 1, queued tasks = 0, completed tasks = 0]`

Eu tentei várias soluções encontradas na internet, mas até agora não consegui resolver. Qual abordagem você costuma usar? Você já enfrentou uma situação semelhante?