|
|
@@ -0,0 +1,139 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html>
|
|
|
+<head>
|
|
|
+ <meta charset="utf-8">
|
|
|
+ <title>await paradise (chat)</title>
|
|
|
+</head>
|
|
|
+<body>
|
|
|
+
|
|
|
+ <div id="cont">
|
|
|
+
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <script>
|
|
|
+
|
|
|
+//-----------stage 0
|
|
|
+let gbl=0;
|
|
|
+ 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'))
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+//-------------stage 1
|
|
|
+ let n=document.createElement('input');
|
|
|
+ let mes=document.createElement('input');
|
|
|
+ let btn=document.createElement('input');
|
|
|
+ btn.type='submit';
|
|
|
+ btn.value='Send';
|
|
|
+ n.placeholder='nick';
|
|
|
+ mes.placeholder='message';
|
|
|
+ let btn2=document.createElement('input');
|
|
|
+ btn2.value='GetMessage';
|
|
|
+ btn2.type='submit';
|
|
|
+ cont.append(n,mes,btn,btn2);
|
|
|
+
|
|
|
+ btn.onclick=()=>{
|
|
|
+ jsonPost("http://students.a-level.com.ua:10012", {func: 'addMessage', nick: n.value, message: mes.value})
|
|
|
+ .then(value =>{
|
|
|
+ console.log(value);
|
|
|
+ console.log(value.nextMessageId);
|
|
|
+ },
|
|
|
+ err=> console.log(err)
|
|
|
+ );
|
|
|
+ }
|
|
|
+
|
|
|
+ btn2.onclick=()=>{
|
|
|
+ jsonPost("http://students.a-level.com.ua:10012", {func: "getMessages", messageId: 0})
|
|
|
+ .then(value => console.log(value), err=> console.log(err));
|
|
|
+ }
|
|
|
+
|
|
|
+//----------------stage 2
|
|
|
+ async function allMessages(){
|
|
|
+ let div=document.createElement('div');
|
|
|
+ let mail=await jsonPost("http://students.a-level.com.ua:10012", {func: "getMessages",messageId: 0});
|
|
|
+ for(let item in mail.data){
|
|
|
+ let p=document.createElement('p');
|
|
|
+ let newdate = new Date(mail.data[item].timestamp).toLocaleString()
|
|
|
+ p.innerHTML=`<b>${mail['data'][item]['nick']}</b>: ${mail['data'][item]['message']} ---- ${newdate}`;
|
|
|
+ div.append(p);
|
|
|
+ }
|
|
|
+ document.body.append(div);
|
|
|
+ gbl=mail.nextMessageId;
|
|
|
+ }
|
|
|
+
|
|
|
+ allMessages()
|
|
|
+
|
|
|
+
|
|
|
+//--------------stage 3
|
|
|
+ async function getNewMessages(){
|
|
|
+ let mail = await jsonPost("http://students.a-level.com.ua:10012", {func: "getMessages", messageId: gbl});
|
|
|
+ let locale = mail.nextMessageId;
|
|
|
+ gbl < locale ? gbl = locale : null;
|
|
|
+ for (let item in mail.data) {
|
|
|
+ let div = document.createElement('div');
|
|
|
+ cont.append(div);
|
|
|
+ let newdate = new Date(mail.data[item].timestamp).toLocaleString()
|
|
|
+ div.innerHTML = `<b>${mail.data[item].nick}</b>: ${mail.data[item].message} <small><i>${newdate}</i></small>`;
|
|
|
+ }
|
|
|
+ return mail.data;
|
|
|
+ }
|
|
|
+ //getNewMessages();
|
|
|
+
|
|
|
+//------------------stage 4
|
|
|
+ setInterval(()=>getNewMessages(),2000);
|
|
|
+
|
|
|
+//-------------------stage 5
|
|
|
+ btn.addEventListener('click', buttonHandler);
|
|
|
+
|
|
|
+ function buttonHandler() {
|
|
|
+ sendAndCheck(n.value, mes.value) ;
|
|
|
+ }
|
|
|
+
|
|
|
+ async function sendMessage(nick,mes){
|
|
|
+ jsonPost("http://students.a-level.com.ua:10012", {func: 'addMessage', nick: nick, message: mes})
|
|
|
+ .then(value =>{
|
|
|
+ console.log(value);
|
|
|
+ console.log(value.nextMessageId);
|
|
|
+ },
|
|
|
+ err=> console.log("something wrong: "+err)
|
|
|
+ );
|
|
|
+ }
|
|
|
+
|
|
|
+ async function sendAndCheck(nick, message) {
|
|
|
+ await Promise.all([sendMessage(nick, message), getNewMessages()]);
|
|
|
+ }
|
|
|
+
|
|
|
+ async function checkLoop() {
|
|
|
+ let delay = ms => new Promise(ok => setTimeout(() => ok(ms), ms))
|
|
|
+ while(true) {
|
|
|
+ await delay(2000).then(() => getNewMessages())
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ checkLoop()
|
|
|
+
|
|
|
+//----------------stage 6
|
|
|
+
|
|
|
+ async function jsonPost2(url, data) {
|
|
|
+ return fetch(url, {method: 'POST', body: JSON.stringify(data)})
|
|
|
+ }
|
|
|
+
|
|
|
+ jsonPost2("http://students.a-level.com.ua:10012", {func: 'addMessage', nick: n.value, message: mes.value})
|
|
|
+ .then(res=>res.json())
|
|
|
+ .then(res=>console.log(res));
|
|
|
+
|
|
|
+ </script>
|
|
|
+</body>
|
|
|
+</html>
|
