A-level_homework/HW 13/main.js

let chatMessageTemplate = document.querySelector("#chat__message-template").content.querySelector(".chat__message-wrap");
let chatMessageBox      = document.querySelector(".chat__messages-box");
let chatInputNick       = document.querySelector(".chat__input--nick");
let chatInputMessage    = document.querySelector(".chat__input--message");
let chatSendButton      = document.querySelector(".chat__send-button");

let messageId = 0;

async function jsonPost(url, data) {
    const res = await fetch(url, {
        method: "POST",
        body: JSON.stringify(data)
    });

    return await res.json();
};

let delay = function(ms) {
    return new Promise((resolve, reject) => {
        setTimeout(() => resolve(ms), ms);
    });
};

let drawAllMessage = async function() {  // Отрисовка всех сообщений, функция вызывается один раз и после не используется
    let data = await jsonPost("http://students.a-level.com.ua:10012", {func: "getMessages", messageId: 0});

    messageId = data["nextMessageId"]; // Получаю id последнего сообщения

    for(let item of data["data"]) { // Рисую все сообщения
        let chatMessage = chatMessageTemplate.cloneNode(true);
        let timespan = new Date(item["timestamp"]);

        chatMessage.querySelector(".chat__user-nick").textContent    = item["nick"];
        chatMessage.querySelector(".chat__user-message").textContent = item["message"];
        chatMessage.querySelector(".chat__timespan").textContent     = `${timespan.getHours()}:${timespan.getMinutes()}`;

        chatMessageBox.appendChild(chatMessage);
        chatMessageBox.scrollTo(0, chatMessageBox.scrollHeight);
    }
}

drawAllMessage(); 

async function sendMessage(nick, message) {
    let nextMessageId = await jsonPost("http://students.a-level.com.ua:10012", {func: 'addMessage', nick: nick, message: message});

    messageId = nextMessageId["nextMessageId"]; // После отправки сообщения переприсваиваю новый id
    chatInputMessage.value = "";                // Удаляю все что написал пользователь из поля сообщения после нажатия "Отправить"
}

async function getMessages(data) { // Отрисовка одного последнего сообщения
    let chatMessage = chatMessageTemplate.cloneNode(true); // Копирую уже заверстаный в HTML шаблон сообщения в переменную chatMessage
    let timespan = new Date(data["data"][0]["timestamp"]);

    chatMessage.querySelector(".chat__user-nick").textContent    = data["data"][0]["nick"];
    chatMessage.querySelector(".chat__user-message").textContent = data["data"][0]["message"];
    chatMessage.querySelector(".chat__timespan").textContent     = `${timespan.getHours()}:${timespan.getMinutes()}`;

    chatMessageBox.appendChild(chatMessage);
    chatMessageBox.scrollTo(0, chatMessageBox.scrollHeight); // Скрол в самый низ
}

async function sendAndCheck() {
    await sendMessage(chatInputNick.value, chatInputMessage.value);

    let data = await jsonPost("http://students.a-level.com.ua:10012", {func: "getMessages", messageId: messageId - 1});

    await getMessages(data);
}

async function checkLoop() {
    while(true) {
        await delay(3000);

        let data = await jsonPost("http://students.a-level.com.ua:10012", {func: "getMessages", messageId: messageId});

        if(messageId != data["nextMessageId"]) { // Если id не совпадают то было написано новое сообщение
            messageId = data["nextMessageId"];

            getMessages(data);
        }
    }
}

checkLoop();

chatSendButton.addEventListener("click", sendAndCheck);