웹소켓 통신 인터페이스 만들기

요즘 간단하게 주식관련 사이트를 만들어보려고했는데용.
흠 친구들도 간간히 주식얘기를 하다보니 퇴근해서 개발을 시작하게 되었습니다. 
흠 ...
 
일단 한국투자증권 open api를 이용을 했고요.
 
현재는 대략적으로 실시간으로 소켓통신을 개발을 했습니다. 
머 간략히 얘기해서 소켓통신에 관해서 개발했던게 대학생때 했던거라 기억이 가물가물하기도 해서  간단하게 정리를 해봤습니다. 
대략적인 아이디어는 아래 그림과 같습니다.
 

번호 순대로 일단 가져오고요.
 
예시코드를 간단히 설명하고 끝내겠습니다. 
아래는 코드고 함수 설명은 아래 코드 밑에 작성하겠습니다.
백엔드 코드 : 

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.messaging.simp.SimpMessagingTemplate;
import org.java_websocket.client.WebSocketClient;
import org.java_websocket.handshake.ServerHandshake;
import org.springframework.http.HttpStatus;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;

import java.net.URI;

@RestController
public class WebSocketController {

    @Autowired
    private SimpMessagingTemplate messagingTemplate;

    @GetMapping("/connect")
    public ResponseEntity<String> connectToWebSocket() {
        try {
            URI uri = new URI("ws://external-websocket-url");

            WebSocketClient webSocketClient = new WebSocketClient(uri) {
                @Override
                public void onOpen(ServerHandshake handshake) {
                    System.out.println("WebSocket connected to external server");

                    // WebSocket으로 데이터를 전송
                    send("{\"input\":{\"tr_id\":\"HDFSASP0\",\"tr_key\":\"DNASAAPL\"}}");
                }

                @Override
                public void onMessage(String message) {
                    System.out.println("Received from WebSocket: " + message);  // 받은 데이터 로그 출력

                    // 메시지가 JSON 형식인지 확인
                    if (message.trim().startsWith("{")) {
                        System.out.println("Message is a JSON object");
                    } else {
                        System.out.println("Message is not a JSON object");
                    }

                    // 받은 메시지를 프론트엔드로 전달
                    messagingTemplate.convertAndSend("/topic/stock-data", message);
                }

                @Override
                public void onClose(int code, String reason, boolean remote) {
                    System.out.println("WebSocket connection closed: " + reason);
                }

                @Override
                public void onError(Exception ex) {
                    ex.printStackTrace();
                }
            };

            webSocketClient.connect();

        } catch (Exception e) {
            e.printStackTrace();
            return new ResponseEntity<>("Error occurred while connecting to WebSocket", HttpStatus.INTERNAL_SERVER_ERROR);
        }

        return new ResponseEntity<>("WebSocket connection initiated", HttpStatus.OK);
    }
}

 
onOpen은 WebSocket 연결이 성공적으로 이루어졌을 때 호출되는 콜백 함수입니다. WebSocket 클라이언트나 STOMP 클라이언트에서 WebSocket 핸드셰이크가 성공하고 연결이 열렸을 때, onOpen 함수가 실행됩니다. 이 시점에서 클라이언트는 서버와 WebSocket 통신을 할 준비가 된 상태
 
onMessage는 WebSocket 서버로부터 메시지를 수신할 때 호출됩니다. WebSocket을 통해 실시간으로 데이터를 주고받는 데 있어 가장 중요한 이벤트 핸들러 중 하나입니다.
(여기 함수를 통해서 받고 아래 코드에 ws url message를 수신합니다.)

messagingTemplate.convertAndSend("/topic/stock-data", message);

 
 
onClose: WebSocket 연결이 닫힐 때 호출.
 
onError: WebSocket 통신 중 오류가 발생할 때 호출.
 
그렇다면 /topic/stock-data는 어디서 url을 맵핑해주는지 알아야겠죠 

WebSocketMessageBrokerConfigurer

클래스를 사용해서 

@Override
public void configureMessageBroker(MessageBrokerRegistry config) {
    // 클라이언트가 구독할 수 있는 경로 설정
    config.enableSimpleBroker("/topic", "/queue"); // /topic 경로로 구독
    config.setApplicationDestinationPrefixes("/app"); // 클라이언트가 서버에 메시지 전송 시 경로
}

@Override
public void registerStompEndpoints(StompEndpointRegistry registry) {
    // 클라이언트가 연결할 엔드포인트 설정
    registry.addEndpoint("/ws")
            .setAllowedOriginPatterns("http://localhost:*")  // 포트가 다른 로컬 호스트 허용
            .withSockJS();  // SockJS 사용
}

여기 configure 에 등록해주면 됩니다.
 
프론트 : stompClient에서 커넥트를 하고 subscibe를 통해서 데이터를 받아오면 끝~~ 

const socket = new SockJS('/ws');  // 백엔드에서 설정한 WebSocket 엔드포인트
const stompClient = Stomp.over(socket);

stompClient.connect({}, function (frame) {
    console.log('Connected: ' + frame);

    stompClient.subscribe('/topic/stock-data', function (message) {
        console.log('Received: ', message.body);
    });
}, function (error) {
    console.error('Error in STOMP connection: ', error);
});

 
제가 만든 데이터들을 
가져온 결과물 :