src/main/resources/static/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Hello WebSocket</title>
    <script src="/webjars/jquery/jquery.min.js"></script>
    <script src="/webjars/sockjs-client/sockjs.min.js"></script>
    <script src="/webjars/stomp-websocket/stomp.min.js"></script>
</head>
<body>

<button id="connect-btn" onclick="connect()">Connect Socket</button>
<button id="login-btn" onclick="login()">Login</button>
<button id="subscribe-notify-btn" onclick="subscribe_notify()">Subscribe Notify</button>
<button id="subscribe-post-btn" onclick="subscribe_post()">Subscribe Post</button>
<button id="disconnect" onclick="disconnect()">Disconnect</button>
<script type="text/javascript">
    let ws = null;
    let email = 'trinhvideo123@gmail.com';
    let password = 'trinhvideo123';
    let token = null;
    let notificationSubscription = null;

    // có thể gọi lúc bắt đầu load trang
    // kết nối đến socket server
    function connect() {

        const socket = new SockJS("http://localhost:8080/socket-server");

        ws = Stomp.over(socket);

        ws.connect({}, function (frame) {
            console.log(frame);
        }, function (error) {
            console.log(error);
        });
    }

    // đăng nhập để lấy token
    function login() {
        $.ajax({
            type: 'POST',
            url: 'http://localhost:8080/auth/login',
            data: {
                'email': email,
                'password': password
            },
            dataType: 'json',
        }).done(function (data) {
            token = data['token'];
            console.log(data);
        }).fail(function (error) {
            console.log(error);
        })
    }

    // subcribe để nhận thông báo mới nhất
    function subscribe_notify() {
        if (ws != null) {
            notificationSubscription = ws.subscribe(`/topic/notify/${email}`, function (notify) {
                // notify.body chính là thông báo mới nhất
                console.log(notify.body);
            }, {'Authorization': `Bearer ${token}`});
        }
    }

    // unsubsribe sau khi logout
    function unsubscribe_notify() {
        if (notificationSubscription != null) {
            notificationSubscription.unsubscribe();
        }
    }

    // đăng ký nhận comment mới nhất
    function subscribe_post() {
        if (ws != null) {
            ws.subscribe("/topic/post/1", function (comment) {
                // comment.body chính là comment mới nhất
                console.log(comment.body);
            })
        }
    }

    // có thể gọi cái này lúc thoát trang
    // disconnect thì có nghĩa là sẽ unsubcribe toàn bộ
    function disconnect() {
        if (ws != null) {
            ws.disconnect();
        }

    }
</script>
</body>
</html>