Pika
/
homework


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102
							<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            display: flex;
            flex-direction: column;
        }

        .msg-container {
            display: flex;
            flex-direction: column;
            width: 400px;
        }
    </style>
</head>

<body>
    <form>
        <input type="text" id="login" placeholder="Name" />
        <input type="text" id="message" placeholder="Message" />
        <button id="btn">Send</button>
    </form>
    <div class="msg-container"></div>
    <script>
        const url = "http://students.a-level.com.ua:10012";

        const msgContainer = document.querySelector('.msg-container');
        const login = document.querySelector('#login');
        const message = document.querySelector('#message');
        const btn = document.querySelector('#btn');

        let messageId = 0;

        async function jsonPost(url, data) {
            try {
                const response = await fetch(url, {
                    method: "POST",
                    body: JSON.stringify(data),
                });
                const result = response.json();
                return response.ok ? result : new Error("status is not 200");
            } catch (error) {
                return new Error("jsonPost failed");
            }
        }
        async function sendMessage() {
            jsonPost(url, {
                func: "addMessage",
                nick: login.value,
                message: message.value,
            });
        }

        async function getMessages() {
            let a = await jsonPost(url, {
                func: "getMessages",
                nick: login.value,
                message: message.value,
                messageId: messageId,
            });
            let msgArray = a.data;
            msgArray.forEach(msg => {
                const text = document.createElement("p")
                messageId = a.nextMessageId;
                text.innerHTML = `(ID:${messageId})  ${msg.nick}: ${msg.message}`
                msgContainer.prepend(text)

            });
        }

        btn.onclick = async function sendAndCheck(e) {
            e.preventDefault();
            await sendMessage()
            await getMessages()
        }
       
        const delay = (ms) => new Promise((resolve) => setTimeout(() => resolve(ms), ms));

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

        //async function sendMessage(nick, message) отсылает сообщение.
        //async function getMessages() получает сообщения и отрисовывает их в DOM
        //async function sendAndCheck() использует две предыдущие для минимизации задержки между отправкой сообщения и приходом их.Именно эта функция должна запускаться по кнопке.
        //async function checkLoop() использует delay и бесконечный цикл для периодического запуска getMessages().

       
    </script>

</body>

</html>