ilya_shyian
/
homework


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154
							<!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>
    </head>
    <body>
        <style>
            .error {
                background: rgb(245, 124, 124);
            }

            .messageWrapper {
                border-top: 1px solid black;
                padding: 15px;
                margin-top: 10px;
            }

            .messageNick {
                font-weight: bold;
            }

            .messageText {
                margin-top: 7px;
            }

            .messageDate {
                margin-top: 7px;
                width: 100%;
                text-align: right;
            }
        </style>
        <div>
            <input type="text" id="nameInput" placeholder="name" />
            <input type="text" id="textInput" placeholder="message" />
            <button id="submitButton">Submit</button>
            <div id="messageHistory"></div>
        </div>
        <script>
            const delay = (ms) => new Promise((ok) => setTimeout(() => ok(ms), ms));

            function jsonPost(url, data) {
                return new Promise((resolve, reject) => {
                    fetch(url, {
                        method: "POST",
                        // headers: { "Content-Type": "text/json" },
                        body: JSON.stringify(data),
                    }).then(
                        (res) => {
                            resolve(res.json());
                        },
                        (err) => {
                            reject(new Error(err));
                        }
                    );
                });
            }
            let nextMessageId = 0;

            const drawMessages = (parent, elements) => {
                for (let message of elements) {
                    let messageWrapper = document.createElement("div");
                    let messageText = document.createElement("div");
                    let messageNick = document.createElement("div");
                    let messageDate = document.createElement("div");

                    messageWrapper.append(messageNick);
                    messageWrapper.append(messageText);
                    messageWrapper.append(messageDate);

                    messageNick.innerText = message.nick;
                    messageText.innerText = message.message;
                    messageDate.innerText = new Date(+message.timestamp).toLocaleDateString();

                    messageWrapper.classList.add("messageWrapper");
                    messageNick.classList.add("messageNick");
                    messageText.classList.add("messageText");
                    messageDate.classList.add("messageDate");

                    parent.prepend(messageWrapper);
                }
            };

            submitButton.addEventListener("click", function sendMessage() {
                let name = nameInput.value.trim();
                let text = textInput.value.trim();

                if (name.length === 0) {
                    nameInput.classList.add("error");
                    return;
                } else {
                    nameInput.classList.remove("error");
                }
                if (text.length === 0) {
                    textInput.classList.add("error");
                    return;
                } else {
                    textInput.classList.remove("error");
                }
                sendAndCheck(name, text);
            });

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

            // let getMessagesPoll = setInterval(() => {
            //     jsonPost("http://students.a-level.com.ua:10012", {
            //         func: "getMessages",
            //         messageId: nextMessageId,
            //     }).then((res) => {
            //         if (nextMessageId !== res.nextMessageId) {
            //             drawMessages(messageHistory, res.data);
            //             nextMessageId = res.nextMessageId;
            //         }
            //         console.log(res.data);
            //         console.log(nextMessageId);
            //     });
            // }, 3000);

            async function getMessages(nextMessageId) {
                let response = await jsonPost("http://students.a-level.com.ua:10012", {
                    func: "getMessages",
                    messageId: nextMessageId,
                });
                if (nextMessageId < response.nextMessageId) {
                    drawMessages(messageHistory, response.data);
                    nextMessageId = response.nextMessageId;
                }
                return nextMessageId;
            }

            async function sendAndCheck(nick, message) {
                let nextMessageId = await sendMessage(nick, message);
                getMessages(nextMessageId);
            }

            async function checkLoop() {
                while (true) {
                    await delay(3000);
                    nextMessageId = await getMessages(nextMessageId);
                }
            }
            checkLoop();
        </script>
    </body>
</html>