frontend/test-websocket.html at main · Everykitchen/frontend · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>STOMP WebSocket Chat Test (with SockJS)</title>
    <script src="https://cdn.jsdelivr.net/npm/sockjs-client@1/dist/sockjs.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/stompjs@2.3.3/lib/stomp.min.js"></script>
  </head>
  <body>
    <h2>STOMP WebSocket Chat - 연결 테스트</h2>
    <textarea id="log" cols="100" rows="10" readonly></textarea><br />

    <script>
      const token =
        "eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJwanM5ODExMTRAbmF2ZXIuY29tIiwicm9sZSI6IlVTRVIiLCJpYXQiOjE3NDcyOTgyMDUsImV4cCI6MTc0NzQ3ODIwNX0.Y0IEmASy1IFC6z7bt2ZpUeJSXCQtFYdkS1uTi4Pv5EI";

      let stompClient = null;

      function connect() {
        const socket = new SockJS("http://localhost:8080/ws/chat"); // SockJS 사용
        stompClient = Stomp.over(socket);

        stompClient.connect(
          {
            Authorization: "Bearer " + token, // STOMP native header로 전달
          },
          (frame) => {
            log("✅ Connected: " + frame);

            stompClient.subscribe("/sub/chat/room/1", (message) => {
              log("📩 Received: " + message.body);
            });

            stompClient.send("/pub/chat.connect", {}, {});
          },
          (error) => {
            log("🚨 Connection error: " + error);
          }
        );
      }

      function log(message) {
        const logArea = document.getElementById("log");
        logArea.value += message + "\n";
        logArea.scrollTop = logArea.scrollHeight;
      }

      connect();
    </script>
  </body>
</html>