diff --git a/index.js b/index.js index b0910ab..ee3798e 100644 --- a/index.js +++ b/index.js @@ -30,4 +30,8 @@ io.on('connection', function(socket){ socket.on('typing', function(data){ socket.broadcast.emit('typing', data); }); + + socket.on('stop-typing', function(data) { + socket.broadcast.emit('stop-typing', data); + }); }); \ No newline at end of file diff --git a/public/chat.js b/public/chat.js index bbe1113..76a1406 100644 --- a/public/chat.js +++ b/public/chat.js @@ -8,6 +8,8 @@ var message = document.getElementById('message'), output = document.getElementById('output'), feedback = document.getElementById('feedback'); +var currentTimer = undefined; + // Emit events (upon click, emit to chat the message and handle) btn.addEventListener('click', function(){ socket.emit('chat', { @@ -18,9 +20,14 @@ btn.addEventListener('click', function(){ }); // Attach event listener to message input field -message.addEventListener('keypress', function(){ +message.addEventListener('keypress', function() { + if(currentTimer) { + clearTimeout(currentTimer); + } + + currentTimer = setTimeout(emitStopTyping, 1000); socket.emit('typing', handle.value); -}) +}); // get existing messages socket.on('initial-connection', function(messages) { @@ -29,13 +36,26 @@ socket.on('initial-connection', function(messages) { } }); +message.addEventListener('focusout', function(e) { + emitStopTyping(); +}); + // Listen for events socket.on('chat', appendMessage); + socket.on('typing', function(data){ feedback.innerHTML = '

' + data + ' is typing a message...

'; }); +socket.on('stop-typing', function(data) { + feedback.innerHTML = ''; +}); + +function emitStopTyping() { + socket.emit('stop-typing', null); +} + function appendMessage(data) { feedback.innerHTML = ''; output.innerHTML += '

' + data.handle + ': ' + data.message + '

';