chatroom
/
index.html

<!doctype html>
<html>
  <head>
    <title>Socket.IO chat</title>
    <style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font: 13px Helvetica, Arial;
  width: 80%;
  margin: 40px auto;
}
form { background: #000; padding: 3px; position: fixed; bottom: 0; width:80%; }
form input { border: 0; padding: 10px; width: 90%; margin-right: .5%; }
form button { width: 9%; background: rgb(130, 224, 255); border: none; padding: 10px; }
#messages { list-style-type: none; margin: 0; padding: 0; }
#messages li { padding: 5px 10px; }
#messages li:nth-child(odd) { background: #eee; }
    li.right {
      text-align: right;
    }
    </style>
  </head>
  <body>
    <ul id="messages"></ul>
    <form action="">
      <input id="m" autocomplete="off" /><button>Send</button>
    </form>
    <script src='./socket.io.js'></script>
    <script>
      document.addEventListener('DOMContentLoaded', () => {
        const socket = io()

        const form = document.querySelector('form')
        const msg = document.querySelector('#m')
        const list = document.querySelector('#messages')

        function addLi (msg, classname)  {
          const li = document.createElement('li')
          li.innerHTML = msg
          if (classname) li.classList.add(classname)
          list.appendChild(li)
        }

        form.onsubmit = () => {
          socket.emit('chat message', msg.value)
          addLi(msg.value, 'right')
          msg.value = ''
          return false
        }

        socket.on('chat message', msg => {
          addLi(msg)
        })
      })
    </script>
  </body>
</html>