1. 브랜치 생성

branch (websocket-tap5)

2. 양방향 연결된 친구 → 핸들러를통해서 브로커로 요청 → 스프링 @MessageMapping 호출 → ConvertToSend()

    // /pub/room
   @MessageMapping("/room")
   public void pubTest1(String number){
       System.out.println("나 요청돼? : "+ number);
       sms.convertAndSend("/sub/"+number, "hello world "+number);
   }

image.png

3. 파일생성

socket-test-tap5.html

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Document</title>
    <script src="<https://cdnjs.cloudflare.com/ajax/libs/stomp.js/2.3.3/stomp.min.js>"></script>
</head>
<body>
    
    <div>
        <input type="text" id="roomNumber" placeholder="방 번호 입력 (예: 1, 2)">
        <button onclick="subscribeRoom()">구독하기</button>
    </div>
    <br>
    <button onclick="send()">메시지전송</button>
    <hr>

<script>
    // 1. 웹소켓 연결 세팅
    let socket = new WebSocket('ws://192.168.0.99:8080/connect');
    let stompClient = Stomp.over(socket);
    
    // 현재 구독 상태를 관리할 변수
    let currentSubscription = null;

    stompClient.connect({}, (frame)=>{
        console.log("1. Connected");
        // 연결 직후에는 아무것도 구독하지 않고 대기합니다.
    });

    // 2. 동적 구독 함수
    function subscribeRoom() {
        // input 창에서 입력한 방 번호 가져오기
        let roomNum = document.getElementById("roomNumber").value;
        
        if(!roomNum) {
            roomNum = 1;
        }

        // 새로운 방 구독
        currentSubscription = stompClient.subscribe("/sub/" + roomNum, (response) => {
            console.log("[" + topic + "] 메시지 수신: ", response.body);
        });

    }

    // 3. 메시지 전송 함수
    function send(){
        // pub 주소도 필요에 따라 입력받은 방 번호로 동적으로 바꿀 수 있습니다.
        // 일단 기존 코드대로 /pub/room 으로 고정해두었습니다.
        stompClient.send("/pub/room", {}, JSON.stringify({ message: "Hello!" }));
    }

</script>

</body>
</html>