chat.js 877 B

123456789101112131415161718192021222324252627282930313233
  1. // Make connection
  2. var socket = io.connect('http://localhost:4000');
  3. // Query DOM
  4. var message = document.getElementById('message'),
  5. nickName = document.getElementById('nick'),
  6. btn = document.getElementById('send'),
  7. output = document.getElementById('output'),
  8. feedback = document.getElementById('feedback');
  9. // Emit events
  10. btn.addEventListener('click', function () {
  11. socket.emit('chat', {
  12. message: message.value,
  13. nickName: nickName.value,
  14. });
  15. message.value = '';
  16. });
  17. message.addEventListener('keypress', function () {
  18. socket.emit('typing', nickName.value);
  19. });
  20. // Listen for events
  21. socket.on('chat', function (data) {
  22. feedback.innerHTML = '';
  23. output.innerHTML +=
  24. '<p><strong>' + data.nickName + ': </strong>' + data.message + '</p>';
  25. });
  26. socket.on('typing', function (data) {
  27. feedback.innerHTML = '<p><em>' + data + ' is typing a message...</em></p>';
  28. });