index.html 1.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <title>
  5. Static File Index.HTML
  6. </title>
  7. <script src='https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.2.0/socket.io.js'></script>
  8. </head>
  9. <body>
  10. <div id='formContainer'>
  11. </div>
  12. <script>
  13. const socket = io()
  14. function Inputs(el, onSend){
  15. const nickInput = document.createElement('input')
  16. nickInput.type = 'text'
  17. nickInput.placeholder = 'Nick'
  18. const messageInput = document.createElement('input')
  19. messageInput.type = 'text'
  20. messageInput.placeholder = 'Message'
  21. const button = document.createElement('button')
  22. button.innerText = 'Send'
  23. button.onclick = () => {
  24. onSend(nickInput.value, messageInput.value)
  25. }
  26. messageInput.oninput = () => {
  27. if (typeof this.validate === 'function'){
  28. button.disabled = !this.validate(nickInput.value, messageInput.value)
  29. }
  30. }
  31. nickInput.oninput = messageInput.oninput
  32. el.appendChild(nickInput)
  33. el.appendChild(messageInput)
  34. el.appendChild(button)
  35. this.getNick = () => nickInput.value
  36. this.getMessage = () => messageInput.value
  37. }
  38. const form = new Inputs(formContainer, function(nick, message){
  39. socket.emit('msg', {nick, message})
  40. })
  41. form.validate = (n, m) => n && m
  42. console.log(form)
  43. /* setInterval(() =>{
  44. console.log(form.getMessage())
  45. }, 1000) */
  46. </script>
  47. </body>
  48. </html>