Home Explore Help
Sign In
vladislavaSim
/
homeworks
Watch 1
Star 0
Fork 0
Files Issues 14 Pull Requests 0 Wiki
Browse Source

stage 4 finished

vladislavaSim 2 years ago
parent
b82337c7e7
commit
856993824c
2 changed files with 139 additions and 0 deletions
Unified View Show Diff Stats
  1. 49 0
      HW13/index.html
  2. 90 0
      HW13/main.js

+ 49 - 0
HW13/index.html
View File 

@@ -0,0 +1,49 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <title>HW13</title>
 
+    <style>
 
+
 
+        .chat-header {
 
+            text-align: left;
 
+        }
 
+        #chat-message {
 
+            border-radius: 5px;
 
+            padding: 7px;
 
+            background-color: #ccc;
 
+            display: inline-block;
 
+            margin-left: 5px;
 
+        }
 
+        .msg {
 
+            width: 250px;
 
+            border: 1px solid grey;
 
+            padding: 5px 10px;
 
+            margin: 5px;
 
+            background: seashell;
 
+        }
 
+        p {
 
+            margin: 5px;
 
+        }
 
+        .msg p:first-child {
 
+            font-size: 20px;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+<main class="main">
 
+<div class="chat">
 
+    <h1 class="chat-header">Chat</h1>
 
+    <div id="content" class = "chat-header">
 
+        <div class="form">
 
+            Nick : <input type="text" id = 'nick' >
 
+            Message : <input type="text" id = 'msg'>
 
+            <button id="sendButton">Отправить</button>
 
+        </div>
 
+    </div>
 
+</div>
 
+    <div id="msgHolder"></div>
 
+</main>
 
+<script src="main.js"></script>
 
+</body>
 
+</html>

+ 90 - 0
HW13/main.js
View File 

@@ -0,0 +1,90 @@
 
+let $nickname = document.querySelector('#nick')
 
+let sendBtn = document.querySelector('#sendButton');
 
+let $msg = document.querySelector('#msg')
 
+let msgHolder = document.querySelector('#msgHolder')
 
+
 
+function jsonPost(url, data) {
 
+    return new Promise((resolve, reject) => {
 
+        var x = new XMLHttpRequest();
 
+        x.onerror = () => reject(new Error('jsonPost failed'))
 
+        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 messageDataCreator(message) {
 
+    return {
 
+        func: 'addMessage',
 
+        nick: $nickname.value,
 
+        message: message,
 
+    }
 
+}
 
+
 
+function showMessagesList(arr) {
 
+    let $container = document.createElement('div')
 
+    for(let msg of arr) {
 
+        let $div = document.createElement('div')
 
+        $div.className = 'msg'
 
+        let $p1 = document.createElement('p')
 
+        let $p2 = document.createElement('p')
 
+        $p1.innerHTML = msg.nick + ':'
 
+        $p2.innerHTML = msg.message
 
+        $div.append($p1, $p2)
 
+        $container.append($div)
 
+    }
 
+    msgHolder.prepend($container)
 
+}
 
+
 
+async function fetchData() {
 
+    let id = 0;
 
+    let resp = await jsonPost("http://students.a-level.com.ua:10012", {func: "getMessages", messageId: id})
 
+    let {data} = await resp
 
+    id = resp.nextMessageId
 
+    let list = data.slice(data.length - 50).reverse()
 
+    showMessagesList(list)
 
+    async function updMessages() {
 
+        let resp = await jsonPost("http://students.a-level.com.ua:10012", {func: "getMessages", messageId: id})
 
+        let res = await resp
 
+        if(res.nextMessageId > id) {
 
+            id = res.nextMessageId
 
+            showMessagesList(res.data)
 
+        }
 
+    }
 
+
 
+    let interval = setInterval(async () => {
 
+        await updMessages()
 
+    }, 3000)
 
+    sendBtn.onclick = async () => {
 
+       let resp = await jsonPost("http://students.a-level.com.ua:10012",
 
+            messageDataCreator($msg.value)
 
+        )
 
+        $msg.value = ''
 
+    }
 
+    return list
 
+}
 
+
 
+
 
+function getSomeData(data) {
 
+    let currentData = data
 
+    return function (){
 
+        return currentData
 
+    }
 
+}
 
+
 
+async function chatMaker() {
 
+    showMessagesList(await fetchData())
 
+}
 
+chatMaker()
 
+
 
+
 
+