|
|
@@ -0,0 +1,87 @@
|
|
|
+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);
|
