index.html 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899
  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="msgField"></div>
  11. <div id='formContainer'>
  12. <input
  13. id="nickbox"
  14. type="text"
  15. placeholder="nickname"
  16. >
  17. <br>
  18. <textarea
  19. name="messagebox"
  20. id="msgbox"
  21. cols="30"
  22. rows="5"
  23. placeholder="message"
  24. ></textarea>
  25. <br>
  26. <button id="sendBtn">Send</button>
  27. </div>
  28. <script>
  29. const socket = io()
  30. let nickbox = document.getElementById('nickbox') || 'default_user'
  31. let msgbox = document.getElementById('msgbox') || '...'
  32. const letter = {
  33. nick: '',
  34. message: ''
  35. }
  36. socket.on('msg', drawMsg)
  37. function doEmit() {
  38. socket.emit('msg', letter)
  39. }
  40. function drawMsg(msg) {
  41. console.log('drawing')
  42. document.getElementById('msgField').insertAdjacentHTML('beforeend', `
  43. <div
  44. style="
  45. border-top: 1px solid white;
  46. margin: 5px;
  47. padding: none;
  48. width: fit-content
  49. "
  50. >
  51. <h4 style="color: yellow;"><span style="color: chartreuse">${msg.nick}</span> says:</h4>
  52. <p style="background-color: indigo; padding: 5px;">${msg.message}</p>
  53. <div>
  54. `)
  55. clearAll()
  56. }
  57. function clearAll() {
  58. nickbox.value = ''
  59. msgbox.value = ''
  60. letter.nick, letter.message = ''
  61. }
  62. nickbox.addEventListener('input', (e) => letter.nick = nickbox.value)
  63. msgbox.addEventListener('input', (e) => letter.message = msgbox.value)
  64. document.getElementById('sendBtn').onclick = doEmit
  65. </script>
  66. <style>
  67. body {
  68. font-family: 'Courier New', Courier, monospace;
  69. }
  70. #msgField {
  71. background-color: black;
  72. min-height: 200px;
  73. height: 500px;
  74. border: 1px solid turquoise;
  75. margin-bottom: 10px;
  76. padding: 5px;
  77. color: white;
  78. overflow: auto;
  79. }
  80. #formContainer {
  81. width: fit-content;
  82. text-align: center;
  83. }
  84. input, textarea {
  85. width: 100%;
  86. margin-bottom: 5px;
  87. }
  88. </style>
  89. </body>
  90. </html>