<!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>