Am trying to implement typing notification in node js using keyup function but its not showing any typing notification as user types or chat. the app has two files, chat.js and server.js
Here is working code for chat.js
$(function(){
var socket = io.connect( 'http://'+window.location.hostname+':3000' );
var name = $('#username').val();
var me = $('#username').val();
if(name != me) {
var color = 'green';
}else if(name == me) {
var color = 'pink';
}
socket.on('users', function(data){
$('.names-list').text('');
$.each(data,function(i,v){
$('.names-list').append('<li>'+v+'</li>');
});
});
socket.on('push message', function(response){
$('.messages').append('<li><div class="msg-lhs"><span class="username"><b style="color:' + color + '">'+response.name+'</b></span> : <span class="msg">'+response.msg+'</span></div><span data-livestamp="'+moment().unix()+'" class="msg-rhs"></span></li>');
$('.messages').animate({scrollTop: $('.messages').prop("scrollHeight")}, 500);
});
$(document).on('keyup','.message-box',function(e){
var $this = $(this);
if(e.which === 13){
var message = $this.val();
socket.emit('new message', message);
$this.val('');
updateDB(localStorage.getItem('username'),message); //Update message in DB
}
});
function notifyTyping() {
var name = $('#username').val();
socket.emit('notifyUser', name);
}
socket.on('notifyUser', function(name){
var me = $('#username').val();
if(name != me) {
$('#notifyUser').text(name + ' is typing ...');
}
setTimeout(function(){ $('#notifyUser').text(''); }, 10000);;
});
function updateDB(name,msg){
$.post('process.php',{method:'update',name:name,msg:msg},function(response){
console.log(response);
});
}
var name = $('#username').val();
socket.emit('new user', name, function(response){
if(response){
localStorage.setItem('username',name);
$('#username').val('');
$('#userinfo').hide();
$('#chat-body').fadeIn();
loadMessages(); //retrieve messages from Database
} else{
$('.validation').text('Username taken!').fadeIn();
}
});
function loadMessages(){
$.post('process.php',{method:'retrieve'},function(response){
$.each(JSON.parse(response),function(i,v){
$('.messages').append('<li><div class="msg-lhs"><span class="username">'+v.name+'</span> : <span class="msg">'+v.message+'</span></div><span data-livestamp="'+v.created_at+'" class="msg-rhs"></span></li>');
});
$('.messages').animate({scrollTop: $('.messages').prop("scrollHeight")}, 500);
});
}
/*** App ***/
$('.names-list').slimScroll({
width: '200px',
height: '400px',
color: '#ffcc00'
});
$('.messages').slimScroll({
width: '500px',
height: '350px',
color: '#3092BF',
alwaysVisible: true,
start: 'bottom'
});
});
below is how I tried to implement the typing notification in chat.js
function notifyTyping() {
var name = $('#username').val();
socket.emit('notifyUser', name);
}
socket.on('notifyUser', function(name){
var me = $('#username').val();
if(name != me) {
$('#notifyUser').text(name + ' is typing ...');
}
setTimeout(function(){ $('#notifyUser').text(''); }, 10000);;
});
below is server.js working code
io.on('connection', function (socket) {
socket.on('new user', function(name, callback){
if(name.length > 0){
if(users.indexOf(name) == -1){
socket.username = name;
users.push(socket.username);
updateUsers();
callback(true);
} else{
callback(false);
}
}
});
socket.on('new message', function(msg){
var sender = socket.username;
var message = msg;
io.emit('push message', {name: sender, msg: message});
});
function updateUsers(){
io.emit('users', users);
}
socket.on('disconnect',function(){
if(socket.username){
users.splice(users.indexOf(socket.username),1);
updateUsers();
}
});
});
below is how i tried implementing typing on sever.js files
socket.on('notifyUser', function(name){
var sender = socket.username;
io.emit('notifyUser', {name: sender});
});
below is the html codes
<span style="background:red" id="notifyUser"></span>
<input type="text" id="username" autocomplete="off" value="john">
<input type="hidden" id="user" value="john" />
<input type="text" class="message-box" placeholder="Your message" onkeyup="notifyTyping();">
via akwaeze
No comments:
Post a Comment