index.js

let stompClient = null;

function setConnected(connected) {
    $("#connect").prop("disabled", connected);
    $("#disconnect").prop("disabled", !connected);
    if (connected) {
        $("#conversation").show();
    }
    else {
        $("#conversation").hide();
    }
    $("#greetings").html("");
}

function connect() {
    let socket = new SockJS('/email');
    stompClient = Stomp.over(socket);
    stompClient.connect({}, function (frame) {
        setConnected(true);
        console.log('Connected: ' + frame);
        stompClient.subscribe('/topic/email/updates', function (message) {
            displayEmail(JSON.parse(message.body));
        });
        stompClient.send('/app/emails');
    });
}

function disconnect() {
    if (stompClient !== null) {
        stompClient.disconnect();
    }
    setConnected(false);
    console.log("Disconnected");
}

function sendEmail() {
    const message = {
        'content': $("#message").val()
    };
    stompClient.send('/app/email', {}, JSON.stringify(message));
    $("#message").val("");
}

function displayEmail(message) {
    $("#emails").prepend(
        "<tr id='" + message.id + "'><td>" + message.content + "</td></tr>"
    );
}

$(function () {
    $("form").on('submit', function (e) {
        e.preventDefault();
    });

    connect();

    $("#send").click(function () {
        sendEmail();
    });
});