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