jHipster Websocket return 1006

Question

I am using jHipster to build my backend java app with kwycloak oauth2 authentication, and now, and I want to add websocket support with stomp client. What I did is add WebsocketConfiguration.java file:

@Configuration
@EnableWebSocketMessageBroker
public class WebsocketConfiguration implements WebSocketMessageBrokerConfigurer 
{
    @Override
    public void configureMessageBroker(MessageBrokerRegistry config) {
        config.enableSimpleBroker("/topic", "/queue");
    }

    @Override
    public void registerStompEndpoints(StompEndpointRegistry registry) {
        registry
            .addEndpoint("/tracker")
            .setAllowedOriginPatterns("*")
            .withSockJS();
        registry.addEndpoint("/stock-ticks").setAllowedOriginPatterns("*").withSockJS();
        registry.addEndpoint("/stock-ticks").setAllowedOriginPatterns("*");
    }
}

and in frontend js file I would like to call:

function connect() {
    let socket = new SockJS('/stock-ticks');
    stompClient = Stomp.over(socket);
    stompClient.connect({}, function (frame) {
         stompClient.subscribe('/topic/ticks', function (ticks) {
             ...
         });
    });
}

However, it always return 1006 error.

I tried the same thing using this Baeldung Example, it works fine without any issue.

Is there any configuration I missed? I am confused