Tuesday 30 May 2017

nodejs typing notification not working

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