homework-js/js14/js/main.js

// Chat Homework

// function jsonPost(url, data) {
//     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'))
//             }
//         }
//     })
// }

// Stage 0

// jsonPost("http://students.a-level.com.ua:10012", {func: 'addMessage', nick: 'Anon', message: 'Я не умею копипастить в консоль, зато умею жать красную кнопку.'})
// в чате увидела изменения

// Stage 1-4

let btn = document.querySelector('#buttonBox')
btn.innerText = 'Send'
let nick = document.querySelector('#nicknameBox')
let msg = document.querySelector('#messageBox')

// btn.onclick = function sendMessage() {
//     let nick = document.querySelector('#nicknameBox').value
//     let msg = document.querySelector('#messageBox').value
//     jsonPost("http://students.a-level.com.ua:10012", {func: 'addMessage', nick: nick, message: msg})
//     document.querySelector('#nicknameBox').value = ''
//     document.querySelector('#messageBox').value = ''
// }

// function addMessage() {
//     setInterval(function() {
//         jsonPost("http://students.a-level.com.ua:10012", {func: 'getMessages', messageId: 0})
//         .then (post => {console.log(post.data)
//         for(messageId in post.data) {
//             let chat = document.querySelector('#chatBox')
//             let div = document.createElement('div')
//             let p = document.createElement('p')
//             p.innerHTML = post.data[messageId].nick + ':' + ' ' + post.data[messageId].message
//             let t = document.createElement('time')
//             t.innerHTML = `${new Date(post.data[messageId].timestamp).toLocaleString()}`
//             chat.prepend(div)
//             div.append(p)
//             div.append(t)
//         }
//         messageId = post.nextMessageId})
//     },3000)
// }
// addMessage()

// Stage 5

async function sendMessage(nick, msg) {
    jsonPost('http://students.a-level.com.ua:10012', {func: 'addMessage', nick: nick, message: msg})
    document.querySelector('#nicknameBox').value = ''
    document.querySelector('#messageBox').value = ''
}

async function getMessages() {
    jsonPost("http://students.a-level.com.ua:10012", {func: 'getMessages', messageId: 0})
    .then (post => {console.log(post.data)
        for(messageId in post.data) {
            let chat = document.querySelector('#chatBox')
            let div = document.createElement('div')
            let p = document.createElement('p')
            p.innerHTML = post.data[messageId].nick + ':' + ' ' + post.data[messageId].message
            let t = document.createElement('time')
            t.innerHTML = `${new Date(post.data[messageId].timestamp).toLocaleString()}`
            chat.prepend(div)
            div.append(p)
            div.append(t)
        }
    })
}

async function sendAndCheck() {
    await sendMessage(nick.value, msg.value)
    await getMessages()
}

btn.onclick = () => sendAndCheck()

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

checkLoop()

// Stage 6

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

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