Js-HW13.js 2.4 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788
  1. let $nickname = document.querySelector('#nick')
  2. let sendBtn = document.querySelector('#sendButton');
  3. let $msg = document.querySelector('#msg')
  4. let msgHolder = document.querySelector('#msgHolder')
  5. function jsonPost(url, data) {
  6. return new Promise((resolve, reject) => {
  7. var x = new XMLHttpRequest();
  8. x.onerror = () => reject(new Error('jsonPost failed'))
  9. x.open("POST", url, true);
  10. x.send(JSON.stringify(data))
  11. x.onreadystatechange = () => {
  12. if (x.readyState === XMLHttpRequest.DONE && x.status === 200){
  13. resolve(JSON.parse(x.responseText))
  14. }
  15. else if (x.status !== 200){
  16. reject(new Error('status is not 200'))
  17. }
  18. }
  19. })
  20. }
  21. // function messageDataCreator(message) {
  22. // return {
  23. // func: 'addMessage',
  24. // nick: $nickname.value,
  25. // message: message,
  26. // }
  27. // }
  28. //
  29. function showMessagesList(arr) {
  30. let $container = document.createElement('div')
  31. for(let msg of arr) {
  32. let $div = document.createElement('div')
  33. $div.className = 'msg'
  34. let $p1 = document.createElement('p')
  35. let $p2 = document.createElement('p')
  36. $p1.innerHTML = msg.nick + ':'
  37. $p2.innerHTML = msg.message
  38. $div.append($p1, $p2)
  39. $container.append($div)
  40. }
  41. msgHolder.prepend($container)
  42. }
  43. async function getMessages() {
  44. let id = 0;
  45. let resp = await jsonPost("http://students.a-level.com.ua:10012", {func: "getMessages", messageId: id})
  46. let {data, nextMessageId} = await resp
  47. id = nextMessageId
  48. let list = data.slice(data.length - 50).reverse()
  49. showMessagesList(list)
  50. if(nextMessageId > id) {
  51. id = nextMessageId
  52. showMessagesList(data)
  53. }
  54. }
  55. // let interval = setInterval(async () => {
  56. //
  57. // }, 3000)
  58. async function sendMessage(nick, message) {
  59. console.log('test')
  60. await jsonPost("http://students.a-level.com.ua:10012",
  61. {
  62. func: 'addMessage',
  63. nick: nick,
  64. message: message,
  65. }
  66. )
  67. }
  68. sendBtn.onclick = sendAndCheck()
  69. async function sendAndCheck() {
  70. await getMessages()
  71. await sendMessage($nickname.value, $msg.value)
  72. $msg.value = ''
  73. }
  74. function delay(ms) {
  75. return new Promise((resolve) => setTimeout(resolve, ms))
  76. }