homework-js/js14-change/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() {
    getMessages()
}

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)})