Build a Chat App in 1 Hour with Socket.io & Node.js | Realtime Chat Application

hey friends welcome back to my YouTube channel Tech creators my name is D JL and I am a software engineer at Geo platforms limited and I have graduated from triple it bza and on this channel I make videos related to web development tutorials tips and tricks and some Vlogs so if you are interested in these kind of topics make sure to subscribe and like this video If you find this video interesting let's have a quick demo of our application which we are going to build so this application will have many different functionalities such as private chat group chat it will also have message history functionality and it will also have feature of typing so whenever someone types it will show that someone is typing so make sure to watch the video till the end and make sure to complete this tutorial by making it yourself okay all of the links will be provided in the description so yeah let's get started creating a realtime chat application with nodejs and expressjs using socket.io is a great project to learn about real time communication and websocket so in this tutorial we will go step by step to build the chat application so some of the prerequisites are you should make sure that you have nodejs installed npm installed which is node package manager which usually installed with nodejs so you have to first of all create a new folder for your project and navigate to it in your terminal or command prompt as I have created here my project as chat application this is chat application now we have to initialize a new nodejs project by running the following command so inside this directory we will say npm in it- y and we will hit enter okay so we have our package.json here okay now we need to install some of the dependencies so we will say npm install Express socket. iio and hit enter okay so two of the dependencies are now added uh make sure your version matches with my version so later on if you are watching this in the future and if some of the things are not working for you then then you have to install this version 4.18 do2 and for socket 4.7.4 okay then your project will work so now let's create a index.js file which will be our server so let's type here index.js and let's create our server so we will write con Express so we will create a Express server con HTTP will be equal to require HTTP con socket iio iio is equals to require socket do iio and we will assign our Express function to a variable called app so it will be Express function and now we will create a server cons server and it will be a HTTP do create server and we'll pass app inside this okay now we will say h IU will be equals to socket do socket IOU and we will pass here our server okay now we will also Define the port so let's keep the port as process.env do port or 3000 okay here we will write server do Start Control z contr z here we will write server. listen listen to this port and this is the call back function and we will say log server on 4 3000 so yeah we have created our Ser now we will Al now we want to serve some static files for from our public folder so we will allow our app to use express. static and it will be from it will point to public folder so whatever files are there in public folder will be accessible to our Express hour now we will set up our front end so we will create a folder Nam public in our project folder so here we will create a public folder inside this folder we will create an HTML file name index.html so inside this folder we will create index. HTML okay so here I will in insert my boiler plate code so yeah this is the boiler plate code if you don't get this with shift exclamation and then enter Then you can also type it out okay it's just uh HTML tag then there is head then there is body nothing else now we will include some of the things add title as chat we like title as real time chat app okay and inside the body we want an H tag which says welcome to the chat room and I want a div and this D will have an ID and this ID will be chat okay and we will have a an ordered list and we will typ we will give this IDE of message messages okay after that so let's remove this space because we don't we are not including anything and after this chat we want a input box so input and this input will be self closing tag and we want type to be text ID will be message input auto complete will be auto complete will be off now we all want a button so it will be a button which will say send so this will send the message and we want a function of on click to be assigned and we will say send message will be the function okay now inside the body you also want to include some script so we'll say script SC SC I PT C script and this script tag will have its source as SL socket.io socket. io.js okay so we want this file to be included within our index.html and I'm thinking to include the JS in the same file and if the code gets longer then we can uh take out this GS code to ear and the GS file okay so for now we are using script tag and we will write the GS code here the con socket is is equals to IO and we want a function to be send message and this function will say cons message input will be equals to document. get element by ID and we want message input as our ID now after that we want cons message is is equals to document dot is equals to so here what we are doing is we are taking the field we are taking the element or with the ID of message input so we are taking this element and we are getting its value and we are traing all the uh things so like any spaces or anything else and if there is something in the message then we are emitting a event which is called chat message and we are passing the message and after that we are making message input value to be H to be a empty thing okay so we are just clearing the message input box after that what we want is after this function we want pocket. iio and this will handle our chat message event so and we are passing here message uh yeah and we want function so we will say cons messages is equals to document. get element by ID and we want messages messages is the same let's copy this from here yes it's same and uh yeah we have got our element of messages where we want to show our message which we have sent okay so we will add const Ali and we will create a new element so we'll say document do create element and which element we want to create we want to create Ali okay and we will say ali. te content which will be equals to message okay message and we want messages do append child we want Alli to be child of UL okay so UL is unordered list and lii is a list item so we will add this message as a list item to our messages there cool now we also want to handle socket.io event so we will update our index.js file which is our server file to handle socket.io event we will so let's go to our index.js and below this let's add some so we want to store some all the connected users okay so we will say cons users is equals to new we want them to be stored in a set okay so it's a new set and we want IU do on so on connection on connection event what we want is we want socket and we will pass the socket inside this and we will say log a user connected okay now we want to add the new user to our user set so we will say users. add and we will add our socket do ID so we after this we want to notify all the users about the new user account so we will say iio doit and what we want is user count and it will be users do size it will be the size of the set we want to listen for chat message so we will say socket. on we want chat message M SS a g okay and we were passing message so we will pass your message and we want to function so we want to broadcast the message to all connected users so what you will write is emit iio doit chat message and what is the message this is the message which we have passed here okay so this is the message which we have passed here so this is how uh the message will be broadcasted to all the users we also want to handle the socket dot on disconnect event so disconnect and when a users when a user get disconnected we want to log first of all a user disconnect okay and we want to remove that user from our set so we will say users. delete and we want it socket do ID so we will delete that socket ID for our user set and we also want to emate this chains so that we can notify all users about the updated user account so we say user account is users dot size yes you are right sorry it's not a function uh this is also not a function this is a property okay so I guess we have handled chat message and disconnect and the connection we will now run the application to run the application we will execute the following command in our terminal so we will say just let me make it big and here we will write node index.js so it is now running server on Port 3000 cool now we will open our web browser and we will navigate to http colon sl/ localhost colon 3000 so you should see the chat application with a message input box and so now we will open our up our web browser and we will navigate to this HTTP colon localhost 3000 you should see the chat app application with the message input box and a send button open another browser window or a new tab and navigate to the same URL to simulate another user now you can exchange messages between these two browsers browser instances in real time okay so there are some changes which I have done as I was debugging this application so first of all in the index.js we have console.log a user connected then I have also added user in in our set and then we have emitted a event called user count and along with users. size okay after that we are handling our chat message event here and as we were passing message so we are currently I am also console logging so I am console logging from socket ID and then message and the actual message okay so it looks something like this so from this is the socket ID and then message and this is the message this is from socket ID and this is message hello okay so this is what it is and after that we are emitting io. I chat message and after that the here is a disconnect event which is same let's go to our index.html in index.html we have here ID as messages so on clicking on send message button we are getting this message input and we are taking its value and we are trimming it so that if someone tries to send space then it will not go and if there is a message then we are emitting a event called chat message and we are passing the message okay so it is the same function uh which we have handled here okay and after that we are clearing our message input and after that we have a function socket Doon and we are and this chat message we are passing the message and currently I'm console logging here you don't require this so you can just remove it and uh here is our messages we are getting the messages ul and we are creating a new Ali and then we are adding our text content as message and we are doing messages. appendchild as Ali okay so that's it now let's go to our let's save this and let's rerun our server so let's clear this press contrl C and then clear and then again run node index.js okay so server running on Port 3000 so let so let's go to our Port Local Host 3000 and here is our first uh client let's press F12 and let's create one more client so we will say Local Host 3,000 let's open its terminal also so from this this is our first terminal so from here I will write hi my name is diverse Raj and I will send so here is my first message hi my name it would have come here so from this ID this is the message hi my name is the and let's go to another client so here is our another client and as you can see here we have got our message which we have sent from this client which was hi my name is so from this client client two I will send hello my name is viml okay and I will send so I have sent this message second message from second client which is this one so let's go to First client and see if message has arrived or not so yes we have got our second message hello my name is WHL and it will also be visible in our vs code console so this is the ID of the second user and the message is hello my name is V Okay cool so our connections are perfectly working our messages are perfectly delivering now let's with our further application development so as we can see it was very difficult for us to distinguish between which uh user has sent which message so now let's add user authentication to give users some unique identities we can Implement a simple username based authentication system system so users will be required to enter a unique username before joining the chat room so first of all we will update the front end in our index.html we will go to from here we will create a new de so we will give it a ID of login and inside this we want a input and input will be text ID will be username input auto complete will be off Place folder will be enter your user name okay we also want a button to submit this so we will say so this button will say login and it will have onclick function of login Okay cool so as we have updated our front end now we will also so we will update our JavaScript code to handle our login so we'll go down here and uh this is a function let's make this a little prettier so shift alt F so I want so after this socket Doon function or maybe we should handle this above everything else so we will go here and we will say let username the empty string okay and then here will be a function to handle login and this function what this function will do is it will take username input it will pick the username input field and it will take the username value and uh it will be almost same so let's light it so it will cons usern name input and it will be document. get element by ID and we will say user name input and from that we will pick a pick the username so we will say username will be username input do value. trim so that we don't get any spaces and if we have a username that means username is not empty then we will say document. getet element by ID and we will say login we will get the login element and we will set our style do display to be none so that our login form is gone now now okay and we will set document. get element by ID and we want our chat element and we will set it style do display to be block and we will just duplicate this and for one two times and here we want chat in and we want message input and here send message BTN uh which is say from uh our button we will also give it a ID so it will have ID of this ID send message BTM okay and we want our message input to get focused so we'll say document. get element by ID and it will be the same message input input Focus for all of this we want our socket. emit we want to emit a a event it will be login event and it will say we will also pass username okay so I think this looks fine this is here this is here okay cool so now we will handle this uh logic now on our server so we will go to index.js and here instead of Now set we want to use map so we will say map because we want to store connected users and their usern names so after this we want we will have to remove this from here and we will also have to remove this okay and we will say here so socket doon on event login we want we are also getting username so we will check first of all if username is already taken so if users dot has uh username so if there exist a username then we will say socket do contr Z soet doit and we will say login error and we will send a message username is already taken please choose another one okay if it is not the case then we it will go to else it will store the username and socket ID in the users map so users. set user usern name with socket. ID and it will log this is backx dollar curly bases and username loged in okay so we will notify all users about the new user count so inside this we will say iu. emit user count and it will be users do size and size is a property not a function so it will not have the brackets and chat message will chat event will remain the same for disconnect we will have to make some changes so user disconnected user delet is not like this account is also not like this instead we will remove the user from the users map so for that we will have to write for cons username ID of users do entries we want if ID is equals to equals to socket. ID then we want users to delete this username okay this key from the map and we will log back Tex dollar curly bracket username log out okay and we will now just break and get out of this for Loop and after getting out of this fall Loop we want to emit a event called user count and we will now show users. size so it will show the new size after removing one user so we also want to update the front end JavaScript uh code to handle login errors uh from this so whenever there will be this functionality whenever this code will run we want to handle it on our front end so we will go here and we will say in this case The Chosen username is already taken so we should inform the user about the error and update the front end so this is the login function and after this we will handle the errors so we will socket dot on login error we want error message which we were passing so we will just take that error message and just we will say alert alert with this error message cool so with these changes the chat application now requires users to enter a unique username when they first join if the username is available they will be logged in and can start chatting if the username is already taken they will be notified with an error message and pomed to choose another one so now you have a real time chat application with user authentication providing each user with a unique identity so we want to allow users to choose chat room or private messaging okay so we will Implement a feature that enables user to either select an existing chat so we also want here uh we want here a span so we will say span and here we want an ID and ID will be a name okay so within this we will get our name so here when login username is set we want this to be none and we want access to our name element so here we want access to our name also so we will go here and we say cons name field will be document do get element by ID and it will name so after getting the name field we want name field do inner inner text to be equal to usern name okay cool uh maybe we should write this with inside this and after login of yeah this looks fine so let's rerun our application node index.js okay now we will go to Local Host and here let's press F12 and let's press F12 here also so now here we'll write name as divers Raj and let's log in so yeah welcome to the chat room D LOD and let's type here welcome to the chat room VL so login yes this works so you logged in VL logged in this is send first message so hey div Raj and let's click on send so message is sent and you can see here there's a message here I'll say hello RL and I'll send the message and you can get the message here so yeah this works perfectly fine fine now we want to allow users to choose between chat rooms or private messaging okay and that can greatly enhance the functionality and user experience of our chat application so first of all we will add some style here so style we display none and uh so we also want to have room selection and chat rooms we will create a d it ID will be so it's IDE will be room selection and stay style will be display block and for input we want ID to be room name input or to complete to be off enter chat room name so button will say join chat room and let's Implement on click function and it will be join chat room function whenever this button gets clicked this this function will get called okay we also want one more button to start our private chat so we'll write start spe so here we have created another du and its ID is chat room and currently it style is displ n we have here H2 with the chat room and a span which is which will call current room so we will write here the name of the current chat room and after that we want to display all the messages inside the chat room so this UL has came from down this which was initially outside this div has came inside this div input here so let's keep bring this inside our div and one more time so it is inside all of this Okay cool so the front end of our chat room is now ready now we will update our JavaScript code for the front end so we will update the update the jav script code which is down here and uh we will handle the joining chat rooms and start private chat so let's define one more variable called current room and let's keep its value as an empty string so here we have a login after this let's uh handle our join chat room so function let's copy this name from here so copy copy this name from here to down here room name let's extract our room name from this element so room name input do value. trim and if there is a room name then we will say current room will be equals to room name and then document. get element by ID and we want room selection to be disabled okay then style. display to be equals To None then I want document do get element by ID to be so we also want that to be come out so style do display will be equals to block so after that we want to have a current room and uh you want to display the name so we want uh document. get element by ID and our uh span where is our span yeah this one we will take this down here and this is ID then we want to set it its text content to be room name okay and then uh document. get El by ID message input dot Focus okay this looks cool and uh for this join function join chat room functionality for the front for the front end is completed now what we have to joins chat room is done yeah done start private chat okay so let's copy this and let's create its function also so function paste this this this let's create the function so con recipient rece [Music] P input will be equals to join chat room send message prompt and prompt will be enter the username of the person chat with okay and if we get recipient input then we will Set current room to be empty and uh since this is a private chat so no for specific room is needed and we want document. get element by ID room selection it was Zoom selection right Zoom selection yeah so just copy this ID because ID's name should match so just paste it here so we are setting its display to be none and then so that it's not visible and then chat room dot style do display to be equal to block so it is visible now we want document. get element by ID we also want to have current room text content to be equal to um be know back Tex and here we'll write private chat with and this is the dollar this is Curly bracket recipient input okay so now it will be displayed as a text and we want uh to focus on our text field so it message input that Focus to be Dash Focus do focus and then so now we will emit a event called private chat and we will send our recipient input as a as a value so we are done with our front end uh and the JS code we will go to server and we will handle our logic here so from here we will handle the joining chat room and private M so from here we will on chat message event where we are managing our chat message event we want to broadcast the message to the appropriate room or recipient okay so if current room and and current room is not equal to username so what we will have to do is to get access to username here we will create a variable here so user name here and we will take it as empty user and has user and here we will write user name will be user okay this looks fine so now we have our username here and for current room so if we have our current room and current room is not equals to username that means iio do2 current room and uh then emit emit chat message and what is the chat message so it will backt dollar Dash username and then and what is the message okay cool L if current room and and recipient then it's a private message so const recipient socket ID will be users. getet recient okay we get recipient socket ID then only we are going to emit uh iio do2 so here we will write io. to recipient socket id. chat message private and then this want username and then we want to message okay this looks okay socket. on join event so we want to handle that so we will uh listen for joining a chat room so socket socket. on join room and then room name is passed and if so we want to leave the current room if there is any before joining a new one so current room if there is a current room then we want to leave it so socket do leave and which room it is current room and then socket Jo this room okay and then Set current room to be equal to room name okay and log pactic dollar username join room room name okay so this is how we will handle room now let's handle private chat so we will listen for starting a private chat so pocket. on private chat and it will be re PN actually it's spelling is not correct now say c p i e n t will be equal to this recipient and do trim and if users dot has recipent so we will start a private chat by leaving the current room if any and notifying the recipient to do the same if current room then we will say la socket. leave leave this current room resp recipient pocket ID will be equal to users doget ID sorry get recipient if we get recipient socket ID then iio do2 reing socket ID dot emit start private chat comma user name cool and then current room will be equal to empty no specific room for private chat and we'll say log doll this username started a private chat with recipient okay else else if we don't have recipient then we will say socket. emit private chat error user recipient not found this will be the error if we didn't found recipient in our user map and on disconnect and we will remove this code from here and say users. delete username and log username loged out so with these updates users can now choose to join existing chat room or initiate private chat with other users so when users enter a chat room messages they send will be visible to all users in the chat room however if they start a private chat their messages will only be visible to the intendent recipient I have deug this application and some of the changes which I have made is what I'm going to show you now so first of all uh this is the same and then uh on connection we have username we have current room and we have recipient okay so you have to make these two variables if you haven't made and then on login we are calling this function so you can have a look we are checking if users. has user then we are giving a error called username is already taken please choose another one okay else we are setting up the username and uh we are taking user here okay not username so you are we are setting here username and uh after that we are emitting user account so I hope this is clear after that we have socket. we have private chat event so this is private chat uh we have here recipient which we are sending from our content so I will after this uh server code I will also explain the index. HTML okay so here we are setting up the recipient recipient. trim so here is the recipient variable and if user has recipient and if uh it is in already any room then we are leaving that room before joining the private chat okay uh recipient socket ID we are getting using users. getet recipient so we have have created users as a map if you remember here and uh yeah the map stores key value PA where key is the recipient name and value is the socket ID so that's how we are getting recipient socket ID and if we got the socket ID then we are emitting uh start private chat event with the username and we are setting current room to be current room to be uh empty string and we are console logging username started a private chat with recipient else if we don't have any recipient then we will say private chat error user does not user is not found so we are handling here join room uh event so we are getting room name and if we are already in any room then we will first of all leave that room and we will join this room and we will Set current room to be the room name and we will console log username join room room room name after that we are handling our chat message event so we are passing here message we are getting the message and we are console loging current room and it's apent okay if we got the room and room is not equals to username then we are emitting in the current room chat message and uh here is the username and this is the message as if if we don't have any room and we have recipient that means it's a private message so we will uh first of all get the recipient socket ID so users. getet recipient we get the sender socket ID so we get users. getet username after that we are console loging recipient socket ID as recipient socket ID this may not be required so you can remove or you can include and if we got the recipient socket ID then we are sending recipient socket id. chat message private and username username and sender maybe you can include this in another if so if we got sender socket ID then emit this event for the sender also but you can keep this like you can keep it like this also for now and for we here disconnect function is I guess the same so we are users. delete username and then we are console logging username logged out and emitting user account okay cool now let's go to index. HTML so it's the same login and then this is the login button so after that we have chat and uh we have room selection so room selection has two buttons join chat room which uh join chat room and which has on click function of join chat room we have start private chat which has on click function of start private chat we are handling both of these functions down okay in the same file maybe we can create another index.js file within this public folder but yeah for now we are just handling all of the uh JavaScript within the same HTML file we have UL where all the messages will be displayed we have input we have button which uh has on click function of send message we are importing our script of socket. i. JS and here we have variable socket username and current gr here is the login function so we are getting the username and uh we are also setting the username whenever the user logs in so that we get to know who is the current user okay so if user if we get the username then we are doing all of this thing we are setting display to be none setting display to be block and all of the stuff and after end of the everything we are emitting socket uh event call login and we are passing username form here okay we have join chat room function here so here we are setting we are getting all of the elements and then if we got the room name then we are doing all of the block and none and setting the text content and focusing on the message input and at the end we are doing socket. emit join room and we are passing the current room variable we have start private chat function here so this Cent input we are getting it from The Prompt and we are setting current room to be an empty string we are doing all of the no none block and setting the the text content and uh focusing on the message input and at the end we are emitting an event called private chat to the recipient input and here we are handling login error so whenever we get the error we will get error message and we will just alert with the error message we are having our send message functions so we are getting it from message input and we are getting if there is a message then we are emitting chat message and this is the message then we are making message input as an empty so that the previous message is removed and the input box is clear after that we are handling here chat message so we are passing message and we are setting it uh we are creating a new element l and we are setting it text content to be message and we are appending uh it to the messages uh UL okay so I hope this is clear these these are all the things now let's have a demo so here we will write node index.js and the server is running on Port 3000 now let's go to our browser so here we have welcome to the chat room let's enter the username so let's enter divers and login so welcome to the chat room div was let's create another Local Host 3000 and username will be wil so here it is welcome to the chat room wil now let's start a private chat I want to start a private chat with div so chat room private chat with div and uh let's also start a private chat with RL from here so start a private chat with wil now let's send a message from divers to wil so I will say hi RL and let's hit and uh send so here is the message div says hi VL and as you can see here we have the message okay we have the message from Divas he says hi women so I will say from here hi divers how are you and hit send so the message is sent and here we have receive the message from VL cool so our private chat functionality is working now let's check our group chat functionality so let's close all of these two and let's go to 3,000 let's enter Divas again now we will create the users so we will and another user as uh let's L okay so they all will join the same chat room so the chat room will be drv join chat room so chat room is drv drv you join chat room drv and you also join chat room as the r v Okay cool so all of them are in the same chat room so whenever someone sends a message all of them will receive the same message as we have the group functionality I say hey bros and let's hit send so we have received this here and we also received this here so let's say div says hey bros so R will say hey hey man and the also got the message and the also got the message let's send a message from so it will say hey guys subscribe huh cool so hit send and everyone got the message okay so our group chat functionality is also working that's cool now let's Implement some more features so now what we want to do is we want to implement message history to show previous chat messages whenever a user joins we need to store the chat messages for each room on the server and send them to the user when they join so we can use an array to store the message history for each room so we will update our index.js file let's clear it so similar to the users you will create another map so we will say here cons chat history will be equals to new map where we will store all of the uh history of for each room okay so here we will for login we don't want anything for private chat we don't want anything for join room no for chat is okay we want something here we want to know if we have current room and if is not chat history do has current room then we want to set Chat history. Set current room and it's value as key value as an empty array okay so whenever a new room is created we will create its corresponding key value PA in our chat history map after that we'll say chat history. getet current room. push and what you want to push is user has username and message cool and uh I think yeah this looks fine when on join we want to handle some things so after this this we want to send all of the message so if chat history dot has current room then we want con message history to be equal to chat history. getet current room so we want to send message history to the user when they join a room so this is how we will do it and we will say socket do M8 message history and we will send message history cool I guess we have handled everything properly yes now let's update our front end JavaScript code so here we will go down here first of all let's create a git okay so wait uh I will say get in it and now this is uh get repository now you we also want to create a g ignore file so do G ignore we want this one and here I will write SL nodecore modules Okay cool so we have got our non modules removed so we have only these changes these changes so let's commit them get status get add everything get commit dasm added private chat and room chat fun cool everything is committed so that our work is saved now let's clear it now let's work forward so here we have current room socket and username so we want to display our messages so we will we will take this uh block of code from here and we'll go above and we'll create a function which will say display message and we will paste all of the four lines here and here we will pass message and down here we will call this play message and we'll pass a message uh maybe we can remove this line it's not required and we also want to have pocket do on and the event name was message history and it will pass history pass history and yeah cons messages will be equals to document. get element by I ID and the element name is messages messages do inner HTML will be an empty string so we will clear the existing messages and from here we will say history dot for each element so for each entry what you want is we want con message will be equals to entry do user which will be equals to if it is equals to username then we will say U dollar entry do message else we will say dollar entry do user and this is the message so dollar entry do message we will just write here what is this isue expected this why because it should end here and this should start from here and and there yeah cool and we will call display message function here we pass the message yeah I think with these updates when a user joins a chat room they will receive the message history for that room and see the previous chat messages this way new users joining a room can catch up on the conversation history and have more seamless experience okay so now let's test our application so here we will type the username as divers and login we will use currently for two uh users so it will be Raj so the Raj are will now join the chat room drv so he will Raj will also join drv so now they both are in the same room drv now let's say he sends the first message as Hi and then he receives and he says he replies hello then they will says how are you then Raj will say I am good how are you doing okay so now they have a conversation going on now let's say third person joins so he will be he is div he is R so he will be wil yes so we also joins drv so he will he should be able to see all the history so let's click on join chat room yes so he got all the history of the room hi hello how are you good do how are you I am good how are you doing let's say he sends a message w and others will also receive the message cool so we have also implemented the chat history functionality with the help of maps now let's Implement one more functionality okay so let's get back to vs code so now we will uh now add typing indicator to show when someone is typing a message so adding typing indicator is a nice touch to enhance the realtime chat experience allowing users to know when someone is composing a message so in our index. HTML send message message history here let's uh join chat room login uh display typing below the display message so function display typing so here will be username is typing and uh here we will see take cons typing status will be equals to document. get liement by ID typing status and if and if is typing and if he is typing then we'll say typing status. text content will be equals to dollar dollar username is typing do he is not typing then we will say typing status. text content to be equals to empty so this is how we will display typing and below here for we will also listen for let's do it here so socket do on we'll be typing and we will say data and it will be a display typing and the data will be data do username comma data dot is typing cool we'll pass these two things inside our display typing function now we will go to our server and here we will listen for login then we want to listen for typing socket do on typing and if is typing then you'll say if current room then we will blast the typing status to other users in the room so socket do iio socket. to current room doit typing and username is typing okay cool so whenever user disconnects we also want to handle that user is not typing so here from here we will handle if current room socket. to current room do emit so we want to notify other users that this user is no longer typing so we want to emit typing and we'll pass username and is typing to be false so we want to update our front end GS code inside our HTML to handle the typing event and notify the server when the user starts or stops typing so we want event handler for typing status so we will say let typing time out and here we will say function handle typing and if we have room then you want to say clear timeout typing timeout and typing time out will be equals to set time out and the function where we will say socket do emit typing to be false after 1 second okay so send typing equals to false after 1 second of inactivity is what this is doing so so we want to add event listener for message input and sending so we will say let's write it here only so for con message input we will get document. get element by ID and the ID is message input and message input dot add event listener event listener is input and function is handle typing cool so with these updates whenever when a user starts typing a message a typing indicator will be displayed to other users in the same chat room if the user stops typing the typing indicator will disappear after a short delay this feature helps create a more interactive and responsive chat experience so in the HTML where we will add our where should we add let's add it here below the send button so we will create a P tag and we'll give it a id id of display typing typing typing status so the ID will be typ in status and class will be typing status cool so now we will close this and let's test okay so there is a little change so in this function of handle typing within index. HTML we are first of all checking if there is a current room then we are clearing the timeout typing timeout and then we are emitting typing as true and after every 1 second we are typing we are setting the typing as false okay so these are this is the change see if this works or not uh open up the windows side by side and we will say enter the username so the was and login enter the username viml and login let's go to drv chat room and you ALS and B will also join the drv chat room so whenever the div will start typing here it will show div is typing and when whenever the Wimer is typing then here it will show div is typing uh Wimer is typing okay so let's start typing so hi as you can see here it was written the is typing hi I am div R RL cool nice now let's type from here so hi I you you you have to see this side okay I I am I am G and send the message and send the message cool so this is our typing status functionality also okay so this is done now let's improve the user interface and styling to make it more visually appealing for you guys because you guys will not see this video until you see something beautiful that's how I was also when I was in college like you guys so yeah let's make this more visually appealing for our audience as our all the functionalities are now completed so improving the user interface and styling of the chat application can greatly enhance the user experience so let's go up here and decrease it size close our server and from here let's add our stylesheet link CSS style C style. CSS and we will have one D and this D will be a have a class of container which will contain all of the elements so it will come till here before the script and see we have D login and ID as login we will also add class as section class as input and and for button we will add class of button here also we will add some class and it will be also section it will have class of room Dash selection and this will have class of input this button will have class of class of button and here also class of button here in our H2 we want class to be room Das header class will be messages class will be input here class will be button and here classes typing status already so yeah I think that's it now we will create one new file called CSS so Style CSS will also be inside public folder style dot CSS okay so I have made some changes in our index.html file so body structure has changed a little bit H1 is outside our container and container is within two different containers first one is body container and second one is phone container okay so I will show you the changes also I have included here this uh Google font link which I will provide in the description or you can just copy it family sopia and here I have two de extra de and inside that de I have container and yeah those two deals are like completed here so this is what are the changes of also I have this so it's an image okay it's a background image which is shown on our application so it is within inside this public folder and this is how you have to include it so in the body you have to include it as a background image with providing its URL as this URL okay we have body container this one and then container and then section then input then button container then we have button maybe we can remove button container but let it be title home sorry it's a name and we are displaying name in some different way here is our phone container this is our room header this is our messages this is our message Ali this is our messages Ali and so if it is even then it will show box as blue if it is odd then it will show box as white okay okay typing status will be of color white so yeah these are all the changes now let's have a demo final demo so I will type here so this is how our chat application looks like currently so if I write my name here as div Raj then it says welcome to chat room div let's write here viml so it will say welcome to the chat room viml now and let's enter the chat room name so let's enter chat room as developers so this is our chat room let's join our chat room Indian developers okay now whenever we will type here here it should show typing status so see so I will write hey viml how are you doing and I will hit send so here we got our message hey viml how are you doing so from here viml can reply hello viers Raj I am doing good how are you and send so here we got our and the message hello thead I'm doing good how are you and let's say the are ask have you subscribed yet and we will say yeah of course so yeah this is our chat application and we can also have private chat so let's show private chat so here divaj and let's here right VL and let's start a private chat so I want to start a private chat with VL and here login and start a private chat with the okay now let's write here hello no it's my name how are you and here I will write hello view what about you and hit send so yeah that's it uh private chat functionality is also Al working cool this this was the image I was talking about as a background image so its name is a little different I'll provide the link in the description

Channel: TechCreators

Views: 750

Keywords: webdevsimplified, socket.io, socketio, socket io, socket.io node, socket io crash course, socket.io crash course, socketio crash course, socket.io js, socket.io javascript, socket.io tutorial, socket tutorial, socket js, socket javascript, web socket javascript, socket.io node.js tutorial, socketio react, socket io rooms, socket.io rooms, socket.io chat app, techcreators, codewithharry, traversery media, realtime chat application, ishan sharma, iit, iiit, engineering, divasraj

Id: v3ui_U7OoaQ

Length: 77min 36sec (4656 seconds)

Published: Thu Feb 29 2024