ircabot/html/realtimechat.js

let objPath = document.getElementById("path");
let objPayload = document.getElementById("payload");
let objCurrentServerStatus = document.getElementById("serverStatus");
let objOnlineCounter = document.getElementById("online");
let objOnlineList = document.getElementById("onlineList");

const HTML_SERVER_ONLINE_MARKER = "✅";
const HTML_SERVER_OFFLINE_MARKER = "❌";

let ajaxUrl = document.getElementById("ajaxPath").innerText;
let lastMessageId = document.getElementById("LMId").innerText;
let reqIsFailed = false;

function appendMessage(nick /* if == "***", then system message */, message)
{
    let messageObject = document.createElement("div");
    messageObject.setAttribute("class", "main_payload__chat");
    const date = new Date;
    messageObject.setAttribute("title", date.toLocaleString());

    let nicknameContainer = document.createElement("div");
    nicknameContainer.setAttribute("class", "main_payload__chat_username");
    if (nick === "***") {
        nicknameContainer.setAttribute("style", "color: white; text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;");
        nicknameContainer.innerText = "IRCaBot";
    } else {
        nicknameContainer.innerText = nick;
        nicknameContainer.setAttribute("style", "color: #1b4af5")
    }

    let textContainer = document.createElement("div");
    textContainer.setAttribute("class", "main_payload__chat_mail");
    textContainer.innerHTML = message;

    messageObject.appendChild(nicknameContainer);
    messageObject.appendChild(textContainer);
    objPayload.appendChild(messageObject);
    objPayload.scrollBy(0,1000);
}

function changeOnlineList(nicksArray)
{
    objOnlineList.innerHTML = "";
    nicksArray.forEach(function(nick) {
        let nickObject = document.createElement("div");
        nickObject.setAttribute("class", "main_middle__online_point");
        nickObject.innerText = nick;
        objOnlineList.appendChild(nickObject);
    });
}

function toAJAX()
{
    let xhttp = new XMLHttpRequest();
    xhttp.onload = function() {
        if (reqIsFailed) {
            reqIsFailed = false;
            objPath.removeAttribute("style");
        }

        const answer = JSON.parse(xhttp.responseText);
        if (!answer.status) {
            appendMessage("***", answer.message);
            return;
        }
        if (answer.serverStatusChanged) {
            if (answer.serverStatus) {
                objPath.removeAttribute("style");
                objCurrentServerStatus.innerText = HTML_SERVER_ONLINE_MARKER;
            } else {
                objPath.setAttribute("style", "color: red");
                objCurrentServerStatus.innerText = HTML_SERVER_OFFLINE_MARKER;
            }
        }
        if (answer.onlineUsersChanged) {
            const onlineInfo = answer.online;
            objOnlineCounter.innerText = onlineInfo.count;
            changeOnlineList(onlineInfo.list);
        }
        if (answer.LMIdChanged) {
            lastMessageId = answer.LMId;
            let msgArray = answer.newMessages;
            msgArray.forEach(function(singleMsg) {
                appendMessage(singleMsg.user, singleMsg.text);
            });
        }
    }
    xhttp.onerror = function() {
        if (!reqIsFailed) {
            reqIsFailed = true;
            objPath.setAttribute("style", "color: red");
        }
    }

    let currentServerStatus = objCurrentServerStatus.innerText === HTML_SERVER_ONLINE_MARKER;
    xhttp.open("GET", "/ajax/"+ajaxUrl+"?onlineCounter="+objOnlineCounter.innerText+"&messageId="+lastMessageId+"&serverStatus="+currentServerStatus);
    xhttp.send();
}

function loop()
{
    let dots = objPath.innerText;
    if (dots === "...") {
        dots = ""
    } else {
        dots += ".";
    }
    objPath.innerText = dots;
    toAJAX();
    setTimeout(loop, 2000); // 2 sec
}

function main()
{
    let objHr = document.getElementById("hr");
    hr.innerHTML = "<b>New messages will appear below<b>";
    loop();
}

main();