Bladeren bron

HW<13> done

Levshin95 2 jaren geleden
bovenliggende
commit
6fe02f6201
2 gewijzigde bestanden met toevoegingen van 97 en 0 verwijderingen
  1. 23 0
      HW013/index.html
  2. 74 0
      HW013/index.js

+ 23 - 0
HW013/index.html

@@ -0,0 +1,23 @@
+<!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 class="wrapper" style="display: flex; flex-direction: column">
+       
+        <input id="inputName" type="text" placeholder="Enter a name" style="align-items: center; min-height: 50px; font-size: 20px;">
+        
+        <input id="inputMsg" type="text" placeholder="Enter a message" style="align-items: center; min-height: 50px; font-size: 20px;">
+       
+         <button id="btn" style="align-items: center; min-height: 50px; font-size: 20px;">Send</button>
+    </div>
+
+    <div id="chat"></div>
+
+    <script src="index.js"></script>
+</body>
+</html>

+ 74 - 0
HW013/index.js

@@ -0,0 +1,74 @@
+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'))
+            }
+        }
+    })
+}
+
+let login = document.getElementById('inputName')
+let msg = document.getElementById('inputMsg')
+let send = document.getElementById('send')
+let chat = document.getElementById('chat')
+let messageId = 0;
+
+
+async function sendMessage(nick , message ){
+        await jsonPost("http://students.a-level.com.ua:10012", {
+        func: 'addMessage', 
+        nick: login.value, 
+        message: msg.value})
+}
+
+
+async function getMessages(){
+        jsonPost("http://students.a-level.com.ua:10012", {
+        func: "getMessages", messageId: 0
+    }).then((a) => {
+        showChat(a.data, chat)
+    })
+}
+
+function showChat(data, container){
+    let sortedData = data.sort((a, b) => b.timestamp - a.timestamp)
+    for(let message of sortedData){
+        let div = document.createElement('div')
+        let spanName = document.createElement('b')
+        let spanMsg = document.createElement('span')
+        let spanTime = document.createElement('mark')
+        let time = new Date(message.timestamp)
+
+        container.appendChild(div)
+        div.appendChild(spanName)
+        div.appendChild(spanMsg)
+        div.appendChild(spanTime)
+        spanName.innerHTML = message.nick + ': '
+        spanMsg.innerHTML = message.message + '   '
+        spanTime.innerHTML = time.toGMTString()
+    } 
+}
+
+async function sendAndCheck(){
+    sendMessage();
+    getMessages();
+    msg.value = ""
+}
+
+btn.onclick = () => {
+    return sendAndCheck()
+}
+
+
+setInterval(getMessages, 5000)