main.js 3.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110
  1. // Chat Homework
  2. // function jsonPost(url, data) {
  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. // Stage 0
  20. // jsonPost("http://students.a-level.com.ua:10012", {func: 'addMessage', nick: 'Anon', message: 'Я не умею копипастить в консоль, зато умею жать красную кнопку.'})
  21. // в чате увидела изменения
  22. // Stage 1-4
  23. let btn = document.querySelector('#buttonBox')
  24. btn.innerText = 'Send'
  25. let nick = document.querySelector('#nicknameBox')
  26. let msg = document.querySelector('#messageBox')
  27. // btn.onclick = function sendMessage() {
  28. // let nick = document.querySelector('#nicknameBox').value
  29. // let msg = document.querySelector('#messageBox').value
  30. // jsonPost("http://students.a-level.com.ua:10012", {func: 'addMessage', nick: nick, message: msg})
  31. // document.querySelector('#nicknameBox').value = ''
  32. // document.querySelector('#messageBox').value = ''
  33. // }
  34. // function addMessage() {
  35. // setInterval(function() {
  36. // jsonPost("http://students.a-level.com.ua:10012", {func: 'getMessages', messageId: 0})
  37. // .then (post => {console.log(post.data)
  38. // for(messageId in post.data) {
  39. // let chat = document.querySelector('#chatBox')
  40. // let div = document.createElement('div')
  41. // let p = document.createElement('p')
  42. // p.innerHTML = post.data[messageId].nick + ':' + ' ' + post.data[messageId].message
  43. // let t = document.createElement('time')
  44. // t.innerHTML = `${new Date(post.data[messageId].timestamp).toLocaleString()}`
  45. // chat.prepend(div)
  46. // div.append(p)
  47. // div.append(t)
  48. // }
  49. // messageId = post.nextMessageId})
  50. // },3000)
  51. // }
  52. // addMessage()
  53. // Stage 5
  54. async function sendMessage(nick, msg) {
  55. jsonPost('http://students.a-level.com.ua:10012', {func: 'addMessage', nick: nick, message: msg})
  56. document.querySelector('#nicknameBox').value = ''
  57. document.querySelector('#messageBox').value = ''
  58. }
  59. async function getMessages() {
  60. jsonPost("http://students.a-level.com.ua:10012", {func: 'getMessages', messageId: 0})
  61. .then (post => {console.log(post.data)
  62. for(messageId in post.data) {
  63. let chat = document.querySelector('#chatBox')
  64. let div = document.createElement('div')
  65. let p = document.createElement('p')
  66. p.innerHTML = post.data[messageId].nick + ':' + ' ' + post.data[messageId].message
  67. let t = document.createElement('time')
  68. t.innerHTML = `${new Date(post.data[messageId].timestamp).toLocaleString()}`
  69. chat.prepend(div)
  70. div.append(p)
  71. div.append(t)
  72. }
  73. })
  74. }
  75. async function sendAndCheck() {
  76. await sendMessage(nick.value, msg.value)
  77. await getMessages()
  78. }
  79. btn.onclick = () => sendAndCheck()
  80. async function checkLoop() {
  81. while (true) {
  82. getMessages()
  83. delay(3000)
  84. }
  85. }
  86. checkLoop()
  87. // Stage 6
  88. async function jsonPost(url, data) {
  89. let response = await fetch(url, {method: 'POST', body: JSON.stringify(data)})
  90. return await response.json()
  91. }
  92. let delay = ms => new Promise(ok => {setTimeout(() => ok(ms), ms)})