How could connect WebSocket Server(STOMP)

I’m using Stomp WebSocket and can’t connect to Server

package study.withkbo.config;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.context.annotation.Lazy;
import org.springframework.messaging.Message;
import org.springframework.messaging.MessageChannel;
import org.springframework.messaging.simp.config.ChannelRegistration;
import org.springframework.messaging.simp.config.MessageBrokerRegistry;
import org.springframework.messaging.simp.stomp.StompCommand;
import org.springframework.messaging.simp.stomp.StompHeaderAccessor;
import org.springframework.messaging.support.ChannelInterceptor;
import org.springframework.messaging.support.MessageHeaderAccessor;
import org.springframework.scheduling.TaskScheduler;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
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.config.annotation.WebSocketTransportRegistration;
import org.springframework.web.socket.server.standard.ServletServerContainerFactoryBean;

@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfiguration implements WebSocketMessageBrokerConfigurer {
    // https://docs.spring.io/spring-framework/reference/web/websocket/stomp/overview.html
    // https://www.toptal.com/java/stomp-spring-boot-websocket

    private TaskScheduler messageBrokerTaskScheduler; 

    @Autowired
    public void setMessageBrokerTaskScheduler(@Lazy TaskScheduler taskScheduler) {
        this.messageBrokerTaskScheduler = taskScheduler;
    }

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

    @Override
    public void configureMessageBroker(MessageBrokerRegistry config) {
        config.setApplicationDestinationPrefixes("/app");
        config.enableSimpleBroker("/topic", "/queue") 
                .setHeartbeatValue(new long[] {10000, 20000}) 
                .setTaskScheduler(this.messageBrokerTaskScheduler);
    }
    @Bean
    public ServletServerContainerFactoryBean createWebSocketContainer() {
        ServletServerContainerFactoryBean container = new ServletServerContainerFactoryBean();
        container.setMaxTextMessageBufferSize(8192); // 8KB
        container.setMaxBinaryMessageBufferSize(8192);
        return container;
    }

    @Override
    public void configureWebSocketTransport(WebSocketTransportRegistration registry) {
        registry.setTimeToFirstMessage(30000); 
        registry.setSendTimeLimit(15 * 1000).setSendBufferSizeLimit(512 * 1024);
        registry.setMessageSizeLimit(128 * 1024); 
    }

    @Override
    public void configureClientInboundChannel(ChannelRegistration registration) {
        registration.interceptors(new ChannelInterceptor() {
            @Override
            public Message<?> preSend(Message<?> message, MessageChannel channel) { 
                StompHeaderAccessor accessor = MessageHeaderAccessor.getAccessor(message, StompHeaderAccessor.class);
                if (StompCommand.CONNECT.equals(accessor.getCommand())) {
                    // Access authentication header(s) and invoke accessor.setUser(user)
                }
                return message;
            }
        });
    }
}

client service

package study.withkbo.client.service;

import org.springframework.beans.factory.annotation.Value;
import org.springframework.messaging.converter.StringMessageConverter;
import org.springframework.messaging.simp.stomp.StompSessionHandler;
import org.springframework.web.socket.client.WebSocketClient;
import org.springframework.web.socket.client.standard.StandardWebSocketClient;
import org.springframework.web.socket.messaging.WebSocketStompClient;
import study.withkbo.client.handler.MyStompSessionHandler;

public class ClientService {

    private WebSocketStompClient stompClient;

    @Value("${websocket.server.url}")
    private String serverUrl;

    public ClientService() {
        WebSocketClient webSocketClient = new StandardWebSocketClient(); 
        WebSocketStompClient stompClient = new WebSocketStompClient(webSocketClient); 
        stompClient.setMessageConverter(new StringMessageConverter()); 
        stompClient.setDefaultHeartbeat(new long[]{10000, 20000}); 
        connect();
    }

    public void connect() {
        StompSessionHandler sessionHandler = new MyStompSessionHandler(); 
        stompClient.connect(serverUrl, sessionHandler);
    }
}

application.yaml

jwt:
  secret:
    key: +==
  access:
    expiration: 3600000

spring:
  datasource:
    url: jdbc:mysql://localhost:3306/
    username: root
    password: 
    driver-class-name: com.mysql.cj.jdbc.Driver
  profiles:
    active: aws
  jpa:
    hibernate:
      ddl-auto: update
      naming:
        physical-strategy: org.hibernate.boot.model.naming.PhysicalNamingStrategyStandardImpl
    show-sql: true
    properties:
      hibernate.format_sql: true

websocket:
  server:
    url: ws://127.0.0.1:8080/portfolio

this is vscode to connect front

import React, { useEffect, useState } from "react";
import { Client } from "@stomp/stompjs";
import SockJS from "sockjs-client";
import styled from "styled-components";

const WebSocket = () => {
  const [connected, setConnected] = useState(false);

  useEffect(() => {
    const stompClient = new Client({
      webSocketFactory: () => new SockJS("https://127.0.0.1:8080/portfolio"),
      heartbeatIncoming: 20000,
      heartbeatOutgoing: 10000,
      debug: (str) => console.log("STOMP Debug:", str),
      onConnect: () => {
        setConnected(true);
        console.log("WebSocket connected");
      },
      onDisconnect: () => {
        setConnected(false);
        console.log("WebSocket disconnected");
      },
      onStompError: (frame) => {
        console.error("STOMP error:", frame);
        setConnected(false);
      },
      onWebSocketClose: (event) => {
        console.error("WebSocket close:", event);
      },
    });

    stompClient.activate();

    return () => {
      if (stompClient) stompClient.deactivate();
    };
  }, []);
};

export default WebSocket;

const Container = styled.div`
  display: flex;
  justify-content: center;
  align-items: center;
`;

Intellij code terminal

2024-11-22T17:44:11.442+09:00  INFO 13888 --- [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 = 8, active threads = 1, queued tasks = 3, completed tasks = 6]
2024-11-22T17:47:50.814+09:00  WARN 13888 --- [l-1 housekeeper] com.zaxxer.hikari.pool.HikariPool        : HikariPool-1 - Thread starvation or clock leap detected (housekeeper delta=2m12s994ms61µs200ns).

It’s still [https://i.sstatic.net/JfV7ZH2C.png] repeated

I want to make Chatting and solve until this week
It is teamproject so I have to solve quickly
sorry for not good english
I can’t find trobleshooter around me
Using Intellj and VsCode