Arseniy_Yurchenko
/
Home_work_8


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110
							<!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>

    <div id="container" style="margin: 0 auto; color: red; font-size: 26px; width:400px; background-color: black; ">
        <input type="text" id="name" placeholder="name"
            style="width: 39%; padding: 12px 20px; background-color: black; color: red; font-size: 16px;">
        <input type="text" id="msg" placeholder="message"
            style="width: 39%; float: right; padding: 12px 20px; background-color: black; color: red; font-size: 16px;">
        <button id="send"
            style="width: 100%; display: block; padding: 12px 20px; margin: 0 auto; background-color: black; color: red; font-size: 16px;">Send</button>

        <div id="chat" style="margin: 20px"></div>
    </div>

    <script>

        async function jsonPost(url = '', data = {}) {

            const response = await fetch(url, {
                method: 'POST',
                body: JSON.stringify(data)
            })
            return await response.json()
        }

        // return new Promise((resolve, reject) => {
        //     var x = new XMLHttpRequest();
        //     x.onerror = () => reject(new Error('jsonPost failed'))
        //     //x.setRequestHeader('Content-Type', 'application/json');
        //     x.open("POST", url, true);
        //     x.send(JSON.stringify(data))

        //     x.onreadystatechange = () => {
        //         if (x.readyState == XMLHttpRequest.DONE && x.status == 200) {
        //             resolve(JSON.parse(x.responseText))
        //         }
        //         else if (x.status != 200) {
        //             reject(new Error('status is not 200'))
        //         }
        //     }
        // })


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

        let inputName = document.getElementById("name")
        let inputMessage = document.getElementById("msg")
        let buttonSend = document.getElementById("send")

        buttonSend.onclick = () => sendMessage(inputName.value, inputMessage.value)

        function showChat(data) {
            let div = document.getElementById('chat')
            for (let key in data.data) {

                let divMessage = document.createElement('div')

                divMessage.innerText = `${data.data[key].nick} : ${data.data[key].message}`
                divMessage.style.borderBottom = "2px solid red"

                div.prepend(divMessage)

                let time = document.createElement('div')
                time.innerText = `${new Date(data.data[key].timestamp).toLocaleString()}`
                time.style.fontSize = "12px"

                divMessage.appendChild(time)

            }
        }

        let nextMessageId = 0
        async function getMessages() {
            let data = await jsonPost("http://students.a-level.com.ua:10012", { func: 'getMessages', messageId: nextMessageId })
            showChat(data)
            nextMessageId = data.nextMessageId
        }

        const delay = ms => new Promise(ok => {
            setTimeout(() => ok(ms), ms)
        })

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

        checkLoop()
    </script>

</body>

</html>