hw_javascript/11/index.js

// 1 stage
let messageIdSave = 0;
let errorText = document.createElement("span");
errorText.style.color = "red";

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

sendBtn.onclick = () => {
  if (nickname.value.length < 3) {
    errorText.innerText = "Nickname must be at least 3 characters";
    errorBox.append(errorText);
  } else if (message.value.length < 1) {
    errorText.innerText = "Message must be at least 1 character";
    errorBox.append(errorText);
  } else {
    errorText.innerText = "";
    sendAndCheck(nickname.value, message.value, messageIdSave);
  }
};

// 2, 3 stages
async function getMessages(nextMessageId) {
  let youtubeRE =
    /http(?:s?):\/\/(?:www\.)?youtu(?:be\.com\/watch\?v=|\.be\/)([\w\-\_]*)(&(amp;)?‌​[\w\?‌​=]*)?/;
  let imageRE = /\.(gif|jpg|jpeg|tiff|png)$/i;

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

  object.data.map((t) => {
    let container = document.createElement("div");
    container.classList.add("container");
    let nickname = document.createElement("span");
    nickname.classList.add("nickname");
    let message = document.createElement("p");
    message.classList.add("message");
    nickname.innerText = `${new Date().toLocaleString()} ${t.nick}:`;

    if (youtubeRE.test(t.message)) {
      message.innerHTML = `<iframe width="500vw" height="300px" src="https://www.youtube.com/embed/${
        t.message.match(youtubeRE)[1]
      }" title="YouTube video player"
        frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
        allowfullscreen></iframe>`;
    } else if (imageRE.test(t.message)) {
      message.innerHTML = `<img src="${t.message}" alt="" width="250px">`;
    } else {
      message.innerText = t.message;
    }
    container.append(nickname);
    container.append(message);
    historyChat.prepend(container);
  });
  messageIdSave = object.nextMessageId;
}

// 4 stage
// setInterval(async () => getMessages(messageIdSave), 4000);

// 5 stage
async function sendAndCheck(nickName, message, nextMessageId) {
  await Promise.all([
    sendMessage(nickName, message),
    getNewMessage(nextMessageId),
  ]);
}

async function checkLoop() {
  const delay = (ms) => new Promise((ok) => setTimeout(() => ok(ms), ms));
  while (true) {
    await delay(4000);
    getMessages(messageIdSave);
  }
}

checkLoop();

// 6 stage
async function jsonPost(url, data) {
  let response = await fetch(url, {
    method: "POST",
    body: JSON.stringify(data),
  });
  return await response.json();
}