chat

var token;
var username;
var roomId;
const connection = new signalR.HubConnectionBuilder()
    .withUrl("/chat", { accessTokenFactory: () => token })
    .build();

document.getElementById('rooms').addEventListener('click', function (e) {
    if (roomId != e.target.id) {
        roomId = e.target.id;
        console.log("click " + roomId);
    }
});

connection.on("AddToGroupList", function (roomname) {
    var a = document.createElement("a");
    a.setAttribute('class', 'nav-link');
    a.setAttribute('id', roomname);
    a.setAttribute('data-toggle', 'pill');
    a.setAttribute('href', '#' + roomname + '-tab');
    a.setAttribute('role', 'tab');
    a.setAttribute('aria-controls', roomname);
    a.setAttribute('aria-selected', 'true');
    a.innerHTML = roomname;
    document.getElementById("rooms").appendChild(a);

    var cr = document.createElement('div');
    cr.setAttribute('class', 'tab-pane fade');
    cr.setAttribute('id', roomname + '-tab');
    cr.setAttribute('role', 'tabpanel');
    cr.setAttribute('aria-labelledby', 'v-pills-' + roomname + '-tab');
    document.getElementById("v-pills-tabContent").appendChild(cr);

    var crCard = document.createElement('div');
    crCard.setAttribute('class', 'card');
    cr.appendChild(crCard);

    var crH = document.createElement('div');
    crH.setAttribute('class', 'card-header msg_head');
    crH.innerText = roomname;
    crCard.appendChild(crH);

    var crB = document.createElement('div');
    crB.setAttribute('class', 'card-body msg_card_body');
    crCard.appendChild(crB);

    var crBR = document.createElement('div');
    crBR.setAttribute('id', 'chatroom-' + roomname);
    crB.appendChild(crBR);

    var crF = document.createElement('div');
    crF.setAttribute('class', 'card-footer');
    crCard.appendChild(crF);

    var crFInp = document.createElement('div');
    crFInp.setAttribute('class', 'input-group-append');
    crF.appendChild(crFInp);

    var crFTA = document.createElement('textarea');
    crFTA.setAttribute('class', 'form-control type_msg');
    crFTA.setAttribute('id', 'message-text-' + roomname);
    crFTA.setAttribute('placeholder', 'Введите сообщение...');
    crFInp.appendChild(crFTA);

    var crFS = document.createElement('span');
    crFS.setAttribute('class', 'input-group-text send_btn');
    crFS.setAttribute('id', 'msg-' + roomname);
    crFS.setAttribute('style', 'display:block');
    crFInp.appendChild(crFS);

    var crFSI = document.createElement('i');
    crFSI.setAttribute('class', 'fa fa-location-arrow');
    crFS.appendChild(crFSI);
});

connection.on("Send", function (message) {
    var p = document.createElement("p");
    p.textContent = message;
    document.getElementById("chatroom-" + roomId).appendChild(p);
});

document.getElementById("msg-" + roomId).addEventListener("click", async (event) => {
    var msg = document.getElementById("message-text-" + roomId).value;
    try {
        await connection.invoke("SendMessageToGroup", roomId, msg);
    }
    catch (e) {
        console.error(e.toString());
    }
    event.preventDefault();
});

document.getElementById("loginBtn").addEventListener("click", function (e) {
    var request = new XMLHttpRequest();
    // посылаем запрос на адрес "/token", в ответ получим токен и имя пользователя
    request.open("POST", "/token", true);
    request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    request.addEventListener("load", function () {

        if (request.status < 400) { // если запрос успешный

            let data = JSON.parse(request.response);   // парсим ответ
            token = data.access_token;
            username = data.username;

            document.getElementById("authForm").style.display = "none";
            document.getElementById("sendMessageBlock").style.display = "block";

            (async () => {
                try {
                    await connection.start();
                    var userLogin = document.getElementById("userName").value;
                    var userPassword = document.getElementById("userPassword").value;
                    connection.invoke('Login', userLogin, userPassword);
                }
                catch (e) {
                    console.error(e.toString());
                }
            })();
        }
    });
    // отправляем запрос на аутентификацию
    request.send("username=" + document.getElementById("userName").value +
        "&password=" + document.getElementById("userPassword").value);
});

document.getElementById("regBtn").addEventListener("click", function (e) {

    userName = document.getElementById("rUserName").value;
    userLogin = document.getElementById("rUserLogin").value;
    userPassword = document.getElementById("rUserPassword").value;

    document.getElementById("authForm").style.display = "block";
    document.getElementById("regForm").style.display = "none";
    document.getElementById("sendMessageBlock").style.display = "none";

    connection.invoke('Register', userName, userLogin, userPassword);

    connection.stop();
});

document.getElementById("qweBtn").addEventListener("click", function (e) {
    document.getElementById("authForm").style.display = "none";
    document.getElementById("regForm").style.display = "block";
    document.getElementById("sendMessageBlock").style.display = "none";

    connection.start()       // начинаем соединение с хабом
        .catch(err => {
            console.error(err.toString());
        });
});