Загрузить файлы 'JS 5 Online Homework/Homework #17: Async, Await'

JS 5 Online Homework/Homework #17: Async, Await/hm17.js

@@ -0,0 +1,264 @@
+// Chat =============================================================================================
+
+
+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'))
+            }
+        }
+    })
+}
+
+function createMessanger (parent) {
+
+    //stage 1 ============================================
+
+    const fieldsContainer = document.createElement('div')
+    parent.prepend(fieldsContainer)
+
+    const nickField = document.createElement('input')
+    fieldsContainer.append(nickField)
+    nickField.placeholder = 'Your nick'
+
+    const messageField = document.createElement('input')
+    fieldsContainer.append(messageField)
+    messageField.placeholder = 'Your message'
+
+    const sendButton = document.createElement('button')
+    fieldsContainer.append(sendButton)
+    sendButton.innerText = 'SEND'
+
+    const allMessages = document.createElement('span')
+    fieldsContainer.append(allMessages)
+
+    const messageCloud = document.createElement('div')
+    parent.append(messageCloud)
+
+    function sendMessage (nick, message) {
+        jsonPost('http://students.a-level.com.ua:10012', {func: 'addMessage', nick: nick, message: message})
+        .then(res => allMessages.innerText = `Всего сообщений: ${res.nextMessageId}`)
+    }
+
+    sendButton.addEventListener('click', () => {
+        sendMessage(nickField.value, messageField.value)
+        getMessages(id)
+    })
+
+    //stage 2 - 3 ================================================================================================
+    let id = 0
+
+    function getMessages () {
+        jsonPost('http://students.a-level.com.ua:10012', {func: "getMessages", messageId: id})
+        .then(res => {
+
+            for (messageData of res.data) {
+                const messageDataPlace = document.createElement('div')
+                messageCloud.prepend(messageDataPlace)
+                messageDataPlace.innerText = `${messageData.nick}: ${messageData.message}`
+
+                const messageTime = document.createElement('span')
+                messageDataPlace.append(messageTime)
+                Object.assign(messageTime.style, {fontSize: '10px', color: 'grey', marginLeft: '5px'})
+                messageTime.innerText = new Date(messageData.timestamp).toLocaleString()
+
+                id = res.nextMessageId
+            }
+        })
+    }
+    getMessages()
+
+    //stage 4 ================================================================================================
+    
+    setInterval(()=> getMessages(), 2000)
+
+}
+
+createMessanger(document.body)
+
+
+//stage 5-6 ================================================================================================
+
+
+async function jsonPost(url, data) {
+    try {
+        const res = await fetch(url, {method: 'POST', body: JSON.stringify(data)})
+        const json = await res.json()
+        return json
+    }
+    catch {
+        alert('Error')
+    }
+}
+
+function createMessanger (parent) {
+
+    const fieldsContainer = document.createElement('div')
+    parent.prepend(fieldsContainer)
+
+    const nickField = document.createElement('input')
+    fieldsContainer.append(nickField)
+    nickField.placeholder = 'Your nick'
+
+    const messageField = document.createElement('input')
+    fieldsContainer.append(messageField)
+    messageField.placeholder = 'Your message'
+
+    const sendButton = document.createElement('button')
+    fieldsContainer.append(sendButton)
+    sendButton.innerText = 'SEND'
+
+    const allMessages = document.createElement('span')
+    fieldsContainer.append(allMessages)
+
+    const messageCloud = document.createElement('div')
+    parent.append(messageCloud)
+
+    async function sendMessage (nick, message) {
+        const res = await jsonPost('http://students.a-level.com.ua:10012', {func: 'addMessage', nick: nick, message: message})
+        allMessages.innerText = `Всего сообщений: ${res.nextMessageId}`
+        return res
+    }
+
+    let id = 0
+
+    async function getMessages () {
+        const res = await jsonPost('http://students.a-level.com.ua:10012', {func: "getMessages", messageId: id})
+
+            for (messageData of res.data) {
+                const messageDataPlace = document.createElement('div')
+                messageCloud.prepend(messageDataPlace)
+                messageDataPlace.innerText = `${messageData.nick}: ${messageData.message}`
+
+                const messageTime = document.createElement('span')
+                messageDataPlace.append(messageTime)
+                Object.assign(messageTime.style, {fontSize: '10px', color: 'grey', marginLeft: '5px'})
+                messageTime.innerText = new Date(messageData.timestamp).toLocaleString()
+
+                id = res.nextMessageId
+            }
+            return res
+    }
+
+    async function sendAndCheck () {
+        await sendMessage(nickField.value, messageField.value)
+        await getMessages()
+    }
+
+    sendButton.addEventListener('click', sendAndCheck)
+
+    async function delay (ms) {
+        return await new Promise(resolve => setInterval(resolve,ms) )
+    }
+
+    async function checkLoop() {
+        while (true) {
+            await delay(2000)
+            getMessages()
+        }
+    }
+    checkLoop()
+    getMessages()
+}
+
+createMessanger(document.body)
+
+
+// SWAPI Links =============================================================================================
+
+//Последовательные запросы =================================================================================
+
+async function swapiLinks(url) {
+
+    const data = await fetch(url)
+    const people = await data.json()
+
+    for (let key in people) {
+
+        if (people[key].includes('https://swapi.dev/api/')) {
+            const link = await fetch(people[key])
+            const dataFromLink = await link.json()
+            people[key] = dataFromLink
+        }
+
+        else if (typeof people[key] === 'object') {
+            for (let i = 0; i < people[key].length; i++) {
+                if (typeof people[key][i] === 'string' && people[key][i].includes('https://swapi.dev/api/')) {
+                    const link = await fetch(people[key][i])
+                    const dataFromLink = await link.json()
+                    people[key][i] = dataFromLink
+                }
+            }
+        }
+    }
+    return people
+}
+
+swapiLinks('https://swapi.dev/api/people/20')
+    .then(yodaWithLinks => console.log(JSON.stringify(yodaWithLinks, null, 4)))
+
+//Параллельные запросы =================================================================================
+
+    async function swapiLinks(url) {
+        const swapiResp = await fetch(url)
+        const swapiObj = await swapiResp.json()
+        const linksArr = []
+    
+        for (let key in swapiObj) {
+            if (typeof swapiObj[key] === 'string' && swapiObj[key].includes('https://swapi.dev/api/')) {
+                linksArr.push(
+                    fetch(swapiObj[key])
+                       .then(res => res.json())
+                       .then(data => swapiObj[key] = data)
+                )
+            }
+            if (typeof swapiObj[key] === 'object') {
+                for (let i = 0; i < swapiObj[key].length; i++) {
+                    if (typeof swapiObj[key][i] === 'string' && swapiObj[key][i].includes('https://swapi.dev/api/')) {
+                        linksArr.push(
+                            fetch(swapiObj[key][i])
+                               .then(res => res.json())
+                               .then(data => swapiObj[key][i] = data)
+                        )
+                    }
+                }
+            }
+        }
+        await Promise.all(linksArr)
+        return swapiObj
+    }
+    
+    swapiLinks("https://swapi.dev/api/people/20/")
+    .then(yodaWithLinks => console.log(JSON.stringify(yodaWithLinks, null, 4)))
+
+
+    // domEventPromise =============================================================================================
+
+
+    const knopka = document.createElement('button')
+    document.body.appendChild(knopka)
+    knopka.innerText = 'Knopka'
+    
+    function domEventPromise(element, eventName){
+        function executor(resolve){
+            const clickEvent = event => {
+                resolve(event)
+                element.removeEventListener(eventName, clickEvent)
+            }
+            element.addEventListener(eventName, clickEvent)
+        }
+        return new Promise(executor)
+    }
+    
+    domEventPromise(knopka, 'click').then( e => console.log('event click happens', e))

JS 5 Online Homework/Homework #17: Async, Await/index.html

@@ -0,0 +1,12 @@
+<!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>
+    <script src="main.js"></script>
+</body>
+</html>