Create a Simple Chat App Using Nodejs part3

This tutorial is a continuation of the basic tutorial series of chat apps with node.js, to follow this tutorial I suggest you have followed the previous tutorial that is Part-1 and part-2. in this tutorial I will add a new feature feature from the user side, which is the notification of any user who is online, and notification of connect and disconnect. just start our tutorial

What Will I Learn?

• User notification Connect and Disconnect
• Notification when User typing

Requirements

• Install Node.js
• Basic Html , css
• Intermediate Javascript

Difficulty

• Intermediate

User notificationConnect and Disconnect

User Connect

In this first section we will add information when there are users who connect and disconnect. in the tutorial before it we do not have the feature. for that I add in the server.js. I will add it when the connection starts.

socket.on('connection',function(socketIo){
       //response if there is a user
          socketIo.broadcast.emit('newMessage','Someone Connected')
    //for handle new message
    socketIo.on('newMessage',function(msg){
        socket.emit('newMessage',msg,moment().fromNow());
    });
});

socketIo.broadcast.emit('newMessage','Someone Connected') : The broadcast function only gives info to other user users, because we do not want when I'm online, I do not need to see the feedback "I'm online" . 'Someone Connected' is message that we will passing .

We will see the message that we fit if someone is connecting.

User Disconnect

Of course we also want to give notice to other users, if there are users who leave the chat. therefore we need to add the code in server.js . I start its functions inside the event connection. .Cause that is where the initial connection with socket starts

socket.on('connection',function(socketIo){
    //response if there is a user
    socketIo.broadcast.emit('newMessage','Someone Connected');
    //for handle new message
    socketIo.on('newMessage',function(msg){
        socket.emit('newMessage',msg);
    });
    // handle disconnect
    socketIo.on('disconnect',function(msg){
        socket.broadcast.emit('newMessage','Someone left the chat');
    })
});

socketIo.on('disconnect',function(msg){
        socketIo.broadcast.emit('newMessage','Someone left the chat');
    })

We use 'disconnect' event from socket. then just like connection notification we also use broadcast function to send notification to other user. and in the broadcast function we pass the message parameters we want to display.

I opened the first two browsers chrome and the second mozilla. when we create another browser, there is a notification in the browser, but the newly opened browser does not receive the notification. it's because we do not want I'M ONLINE' notification in our own browser.


Then I will close one of the browsers. See what will happen .

Other browsers receive a notification that someone has left a conversation. It means what we want to do successfully .

Notification when User typing

I will add a new feature, so essentially we will tell another user, if there is a user who is typing the message. so chat apps that we make more interactive. first I will create a function in the frontend or in then client side. that is in the index.html.

index.html

//submit chat
$('form').submit(function(){
        var username = $('#username').val();
        socket.emit('newMessage',username +'<br>'+ $('#text_chat').val());
        $('#text_chat').val('');
        isTyping = false // added in part 3
        return false
    });
//added message
socket.on('newMessage',function(msg,date){
         $("#chats").append("<li>"+msg+"</li>");
                 $('.temporary').remove(); //added in part3
    });
//handle someone is typing
    var isTyping =  false
    $('#text_chat').keyup(function(){
        if(isTyping ==  false){
            socket.emit('newTyping',username + 'is typing..');  
        }
        isTyping = true
    });
//append notif typing
socket.on('newTyping',function(msg){
         $("#chats").append("<li class='temporary'>"+msg+"</li>");
    });

Here i will make a boolean logic. because we do not want any typing to bring up this message, we want this function in first call only.

var isTyping = false : Create a boolean to test whether the user has typed or not.

$('#text_chat').keyup(function(){ } :
function of jquery to listen to input from textbox with id text_chat when typed, so when user type then what in put in function will be run.

if(isTyping == false){} : Boolean logic if the user is not typing the feeding function inside will be on the run .

socket.emit('newTyping',username + 'typing..'); :We will notify the server with a new event that is 'newtyping', and we passing username and text parameters 'typing'.

isTyping = true : After logic if we change the variable isTyping meanjadi true, because we only want to run the keyup function once. So we change the isTyping = true.So that if condition is not met .

socket.on('newTyping',function(msg){ }); : Function to listen to the 'newTyping' event created in server.js.

$("#chats").append("< li class='temporary'>"+msg+"< /li >"); : to append notification text in frontend.

It is important to remember the is isTyping condition will always be true, and we will not be able to call the emit function inside if () in due to unfulfilled conditions, then it is submit() after the user sends the message. We need to restore the isTyping value to false again.

Then in the server.js, We also have to add the function we have created in the fronted or index.html earlier.
server.js

//handle user Typing
    socketIo.on('newTyping',function(msg){
        socket.emit('newTyping',msg);
    });

'newTyping' is the name we have created in index.html before its name in frontend and server.js must be same, Then we run the code .

As we see the results will appear as above. other users can know someone is typing, this feature is very common we encounter in the chat app. so this tutorial part-3 ,I created. hopefully its useful for you. thank you...

Curriculum

• [Part 1] https://utopian.io/utopian-io/@alfarisi94/create-a-simple-chat-app-using-node-js-part1
• [Part 2] https://utopian.io/utopian-io/@alfarisi94/create-a-simple-chat-app-using-node-js-part2

---

Posted on Utopian.io - Rewarding Open Source Contributors

---