|
|
@@ -0,0 +1,110 @@
|
|
|
+<!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 id="container" style="margin: 0 auto; color: red; font-size: 26px; width:400px; background-color: black; ">
|
|
|
+ <input type="text" id="name" placeholder="name"
|
|
|
+ style="width: 39%; padding: 12px 20px; background-color: black; color: red; font-size: 16px;">
|
|
|
+ <input type="text" id="msg" placeholder="message"
|
|
|
+ style="width: 39%; float: right; padding: 12px 20px; background-color: black; color: red; font-size: 16px;">
|
|
|
+ <button id="send"
|
|
|
+ style="width: 100%; display: block; padding: 12px 20px; margin: 0 auto; background-color: black; color: red; font-size: 16px;">Send</button>
|
|
|
+
|
|
|
+ <div id="chat" style="margin: 20px"></div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <script>
|
|
|
+
|
|
|
+ async function jsonPost(url = '', data = {}) {
|
|
|
+
|
|
|
+ const response = await fetch(url, {
|
|
|
+ method: 'POST',
|
|
|
+ body: JSON.stringify(data)
|
|
|
+ })
|
|
|
+ return await response.json()
|
|
|
+ }
|
|
|
+
|
|
|
+ // 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'))
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // })
|
|
|
+
|
|
|
+
|
|
|
+ async function sendMessage(nick, message) {
|
|
|
+ await jsonPost("http://students.a-level.com.ua:10012", { func: 'addMessage', nick: nick, message: message })
|
|
|
+ getMessages()
|
|
|
+ }
|
|
|
+
|
|
|
+ let inputName = document.getElementById("name")
|
|
|
+ let inputMessage = document.getElementById("msg")
|
|
|
+ let buttonSend = document.getElementById("send")
|
|
|
+
|
|
|
+ buttonSend.onclick = () => sendMessage(inputName.value, inputMessage.value)
|
|
|
+
|
|
|
+ function showChat(data) {
|
|
|
+ let div = document.getElementById('chat')
|
|
|
+ for (let key in data.data) {
|
|
|
+
|
|
|
+ let divMessage = document.createElement('div')
|
|
|
+
|
|
|
+ divMessage.innerText = `${data.data[key].nick} : ${data.data[key].message}`
|
|
|
+ divMessage.style.borderBottom = "2px solid red"
|
|
|
+
|
|
|
+ div.prepend(divMessage)
|
|
|
+
|
|
|
+ let time = document.createElement('div')
|
|
|
+ time.innerText = `${new Date(data.data[key].timestamp).toLocaleString()}`
|
|
|
+ time.style.fontSize = "12px"
|
|
|
+
|
|
|
+ divMessage.appendChild(time)
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ let nextMessageId = 0
|
|
|
+ async function getMessages() {
|
|
|
+ let data = await jsonPost("http://students.a-level.com.ua:10012", { func: 'getMessages', messageId: nextMessageId })
|
|
|
+ showChat(data)
|
|
|
+ nextMessageId = data.nextMessageId
|
|
|
+ }
|
|
|
+
|
|
|
+ const delay = ms => new Promise(ok => {
|
|
|
+ setTimeout(() => ok(ms), ms)
|
|
|
+ })
|
|
|
+
|
|
|
+ async function checkLoop() {
|
|
|
+ while (true) {
|
|
|
+ getMessages()
|
|
|
+ await delay(2000)
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ checkLoop()
|
|
|
+ </script>
|
|
|
+
|
|
|
+</body>
|
|
|
+
|
|
|
+</html>
|
