Advertisement
Guest User

Untitled

a guest
Dec 20th, 2020
67
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 1.41 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>Socket.IO chat</title>
  5. <style>
  6. * { margin: 0; padding: 0; box-sizing: border-box; }
  7. body { font: 13px Helvetica, Arial; }
  8. form { background: #000; padding: 3px; position: fixed; bottom: 0; width: 100%; }
  9. form input { border: 0; padding: 10px; width: 90%; margin-right: 0.5%; }
  10. form button { width: 9%; background: rgb(130, 224, 255); border: none; padding: 10px; }
  11. #messages { list-style-type: none; margin: 0; padding: 0; }
  12. #messages li { padding: 5px 10px; }
  13. #messages li:nth-child(odd) { background: #eee; }
  14. </style>
  15. </head>
  16. <body>
  17. <ul id="messages"></ul>
  18. <form action="" class="form">
  19. <input id="m" autocomplete="off" />
  20. <button class="btn">Send</button>
  21. </form>
  22.  
  23. <script src="/socket.io/socket.io.js"></script>
  24. <script>
  25. let socket = io();
  26. let form = document.querySelector('.form');
  27. let btn = document.querySelector('.btn');
  28. let input = document.querySelector('#m');
  29. let all_msg = document.querySelector('#messages');
  30.  
  31. btn.addEventListener('click', (e) => {
  32. e.preventDefault();
  33.  
  34. socket.emit('chat message', input.value);
  35.  
  36. input.value = '';
  37.  
  38. return false;
  39. });
  40.  
  41. socket.on('add message', (data) => {
  42. let li = document.createElement('li');
  43. li.innerText = data.message;
  44. all_msg.appendChild(li);
  45. })
  46. </script>
  47.  
  48. </body>
  49. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement