main.js 4.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146
  1. // function jsonPost(url, data)
  2. // {
  3. // return new Promise((resolve, reject) => {
  4. // var x = new XMLHttpRequest();
  5. // x.onerror = () => reject(new Error('jsonPost failed'))
  6. // //x.setRequestHeader('Content-Type', 'application/json');
  7. // x.open("POST", url, true);
  8. // x.send(JSON.stringify(data))
  9. // x.onreadystatechange = () => {
  10. // if (x.readyState == XMLHttpRequest.DONE && x.status == 200){
  11. // resolve(JSON.parse(x.responseText))
  12. // }
  13. // else if (x.status != 200){
  14. // reject(new Error('status is not 200'))
  15. // }
  16. // }
  17. // })
  18. // }
  19. let sendBtn = document.getElementById('sendButton')
  20. sendBtn.innerHTML = "Send"
  21. let nickInput = document.getElementById('nickInput')
  22. let msgInput = document.getElementById('msgInput')
  23. nickInput.style.width = '99.5%'
  24. msgInput.style.width = '99.5%'
  25. sendBtn.style.width = '100%'
  26. nickInput.style.height = '40px'
  27. msgInput.style.height = '40px'
  28. msgInput.style.marginTop = '20px'
  29. sendBtn.style.marginTop = '20px'
  30. sendBtn.style.height = '40px'
  31. nickInput.style.fontSize = '20px'
  32. msgInput.style.fontSize = '20px'
  33. sendBtn.style.fontSize = '20px'
  34. // default
  35. // sendBtn.onclick = function sendMsg () {
  36. // let nick = document.getElementById('nickInput').value
  37. // let msg = document.getElementById('msgInput').value
  38. // jsonPost("http://students.a-level.com.ua:10012", {func: 'addMessage', nick: nick, message: msg })
  39. // document.getElementById('nickInput').value = ''
  40. // document.getElementById('msgInput').value = ''
  41. // }
  42. // function addMsg () {
  43. // let startMsg = 0;
  44. // setInterval(function(){
  45. // jsonPost("http://students.a-level.com.ua:10012", {func: "getMessages", messageId: startMsg}).then (result => {console.log(result.data)
  46. // for(startMsg in result.data) {
  47. // let chat = document.getElementById('chat')
  48. // let divMessage = document.createElement('div')
  49. // divMessage.style.border = '1px solid black'
  50. // divMessage.style.borderRadius = '10px'
  51. // divMessage.style.marginTop = '10px'
  52. // divMessage.style.backgroundColor = '#1E90FF'
  53. // divMessage.style.color = 'white'
  54. // let pMsg = document.createElement('p')
  55. // pMsg.innerHTML = result.data[startMsg].nick + ':' + ' ' + result.data[startMsg].message
  56. // pMsg.style.marginLeft = '20px'
  57. // pMsg.style.fontSize = '30px'
  58. // let time = document.createElement('p')
  59. // time.innerHTML = `${new Date(result.data[startMsg].timestamp).toLocaleString()}`
  60. // time.style.marginLeft = '20px'
  61. // divMessage.append(pMsg)
  62. // divMessage.append(time)
  63. // chat.prepend(divMessage)
  64. // }
  65. // startMsg = result.nextMessageId})
  66. // },2000)
  67. // }
  68. // addMsg()
  69. //async
  70. async function jsonPost(url, data)
  71. {
  72. let res = await fetch(url, {
  73. method: 'POST',
  74. body: JSON.stringify(data)
  75. });
  76. return await res.json();}
  77. function delay(ms) {
  78. return new Promise(resolve => setTimeout(resolve, ms));
  79. }
  80. let nickVal = nickInput.value
  81. let msgVal = msgInput.value
  82. async function sendMessage(nick,message) {
  83. jsonPost("http://students.a-level.com.ua:10012", {func: 'addMessage', nick: nickInput.value, message: msgInput.value })
  84. document.getElementById('nickInput').value = ''
  85. document.getElementById('msgInput').value = ''
  86. }
  87. async function getMessages() {
  88. let startMsg = 0
  89. jsonPost("http://students.a-level.com.ua:10012", {func: "getMessages", messageId: startMsg})
  90. .then(result=>{console.log(result.data)
  91. for(startMsg in result.data){
  92. let chat = document.getElementById('chat')
  93. let divMessage = document.createElement('div')
  94. divMessage.style.border = '1px solid black'
  95. divMessage.style.borderRadius = '10px'
  96. divMessage.style.marginTop = '10px'
  97. divMessage.style.backgroundColor = '#1E90FF'
  98. divMessage.style.color = 'white'
  99. let pMsg = document.createElement('p')
  100. pMsg.innerHTML = result.data[startMsg].nick + ':' + ' ' + result.data[startMsg].message
  101. pMsg.style.marginLeft = '20px'
  102. pMsg.style.fontSize = '30px'
  103. let time = document.createElement('p')
  104. time.innerHTML = `${new Date(result.data[startMsg].timestamp).toLocaleString()}`
  105. time.style.marginLeft = '20px'
  106. divMessage.append(pMsg)
  107. divMessage.append(time)
  108. chat.prepend(divMessage)
  109. }
  110. })
  111. }
  112. async function sendAndCheck(){
  113. await sendMessage(nickVal,msgVal)
  114. await getMessages()
  115. }
  116. sendBtn.onclick = () => {
  117. sendAndCheck()
  118. }
  119. async function checkLoop (){
  120. delay(3000)
  121. getMessages()
  122. }
  123. checkLoop()