1. 브랜치 생성

branch (websocket-tap3)

2. 직접 브로커로 요청

브라우저가 웹소켓으로 연결되어있어해

image.png

3. 파일생성

image.png

socket-test-tap3.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>
<button onclick="send()">메시지전송</button>
<hr>

<script>
    // 1. 웹소켓 연결 세팅 및 연결 완료
    let socket = new WebSocket('ws://192.168.0.99:8080/connect');
    let stompClient = Stomp.over(socket);

    stompClient.connect({}, (frame)=>{
        console.log("1. Connected");

        // 2. 구독하기 /sub -> /pub/room 이런식으로 해야 발동함
        stompClient.subscribe("/sub/chat", (response)=>{
            console.log(response);
        });

    });

    function send(){
        stompClient.send("/sub/chat", {});
    }

</script>

</body>
</html>