无法从前端访问 websocket 端点

Question

我正在编写已在后端部分使用下面给定的代码配置的 websocket 端点。我在控制器中创建了一个端点。现在我从前端点击 url，但控制器方法没有被调用。

WebSocketConfig.java

package com.learn.example.demo.Configs;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.messaging.simp.config.MessageBrokerRegistry;
import org.springframework.web.socket.WebSocketSession;
import org.springframework.web.socket.config.annotation.EnableWebSocketMessageBroker;
import org.springframework.web.socket.config.annotation.StompEndpointRegistry;
import org.springframework.web.socket.config.annotation.WebSocketMessageBrokerConfigurer;
import org.springframework.web.socket.server.support.DefaultHandshakeHandler;

@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {
    @Override
    public void registerStompEndpoints(StompEndpointRegistry registry) {
        registry.addEndpoint("/stomp-endpoint")
                .setAllowedOriginPatterns("*");
//                .withSockJS();
    }

    @Override
    public void configureMessageBroker(MessageBrokerRegistry registry) {
        // to send message - hit /app/url endpoint
        // to subscribe - hit topic/url
        registry.enableSimpleBroker("/topic");
        registry.setApplicationDestinationPrefixes("/app");
    }

    @Bean
    public CustomWebSocketHandler customWebSocketHandler(){
        return new CustomWebSocketHandler();
    }


    @Bean
    public DefaultHandshakeHandler handshakeHandler() {
        return new DefaultHandshakeHandler();
    }
}

我创建的端点是：

 @MessageMapping("/app/sendMessage/{id}/{chatId}")
    @SendTo("/topic/chat/{chatId}")
    public Chat saveMessage(@RequestHeader("auth-token") String authToken, @PathVariable String chatId, @PathVariable String id, @RequestBody Chat chat){
        return sendMessage(authToken, chatId, id, chat);
    }

    public Chat sendMessage(String authToken, String chatId, String id, Chat chat) {
        System.out.println("Hello");
        return service.saveChat(authToken, chat, id, chatId);
    }

我从前端调用后端并连接即将到来，但此端点未命中

const configureStompEndpoint = async () => {
    const stomp = new Client();

    await stomp.configure({
      brokerURL: 'ws://localhost:3030/stomp-endpoint',
      debug: (str) => {
        console.log(str);
      },
      reconnectDelay: 5000,
      heartbeatIncoming: 4000,
      heartbeatOutgoing: 4000,
    });

    // Use a Promise to wait for the STOMP connection to be established
    const connectPromise = new Promise((resolve) => {
      stomp.onConnect = () => {
        console.log('Connected to WebSocket');
        resolve();
      };
    });

    try {
      // Connect to the WebSocket server
      stomp.activate();
    } catch (error) {
      console.error('Error connecting to WebSocket:', error);
    }

    // Wait for the STOMP connection to be established
    await connectPromise;

    // Subscribe to the STOMP destination
    const subscription = stomp.subscribe(``, (message) => {
      const chat = JSON.parse(message.body);
      // Handle incoming messages
      setPreviousMessages((prevMessage) => [...prevMessage, chat]);
    });

    // Save the STOMP client and subscription in state
    setStompClient(stomp);

    // Clean up the subscription on component unmount
    return () => {
      console.log('Unsubscribing from WebSocket');
      subscription.unsubscribe();
    };
  };

请帮我解决这个问题！

Answer 1

Spring boot 会自动检测 /app/send 端点，因此不用点击 /app/send 而是点击 /send 端点，它就会起作用。