I want to make my JavaScript application be able to listen to a specific web socket channel, but failed.

Here is my JavaScript :

async function callLogin() {
    ...

    const destination = '/app/cards/1';
    console.log("destination : " + destination)

    // Initialize WebSocket connection
    const socket = new WebSocket('ws://localhost:8080/gs-guide-websocket');

    socket.onopen = function() {
        showGreeting("WebSocket onopen.");
        console.log('WebSocket onopen');

        // Initialize Stomp Client
        const stompClient = new StompJs.Client({
            brokerURL: 'ws://localhost:8080/gs-guide-websocket'
        });
//        const stompClient = Stomp.Client(socket); // Correct initialization method
//        const stompClient = Stomp.over(socket);

        // Subscribe to the WebSocket channel
        stompClient.activate();
        stompClient.onConnect = function(frame) {
//        stompClient.connect = function(frame) {
//        stompClient.connect({}, function(frame) {
            showGreeting("stompClient connect.");
            console.log('stompClient connect: ' + frame);

            stompClient.subscribe(destination, function(message) {
                console.log("Received message : " + message.body);
                showGreeting("Receive message from : " + destination);
                // Process incoming cards data here
            });
        };

        stompClient.onmessage = function(event) {
            console.log("message" + event);
            const message = event.data;
        };

        socket.onmessage = function(event) {
            console.log("message" + event);
            const message = event.data;
        };

    };

    socket.onerror = function(error) {
        console.error('WebSocket Error:', error);
        showGreeting("WebSocket Error: " + error.message);
    };

    socket.onclose = function(event) {
        console.log('WebSocket closed:', event);
        showGreeting("WebSocket closed.");
    };

}

On the other hand, I send message to the web socket channel by Java web service, here’s my Web socket configuration in Java :

@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("/gs-guide-websocket");
    }
}

And here is the method to send web socket to specific channel, I created a API so that I can test repeatedly :

@PostMapping("/login")
public ResponseEntity<Object> send() {
    String destination = "/app/cards/1";
    messagingTemplate.convertAndSend(destination, "Let's play! Here's your cards:");
    return new ResponseEntity<>(destination, HttpStatus.OK);
}

And here is the current result,

It seems that the connect was created successfully, but it couldn’t receive the message which sent from my Java service.

I have some experience in Java, but I’m a totally novice of JavaScript and web socket, and I’ve asked ChatGPT for dozens of times, it gave me some other methods, but there’re some other issues.(The commented code in my code is the “other methods”)

What I want to achieve is that my JavaScript can obtain an id from a RESTful API, then subscribe to specific channel, let’s say 'ws://localhost:8080/gs-guide-websocket/app/user/12345', and then it can receive messages through that channel afterwards.

Can anyone help me to find where might be wrong? Thanks in advance!