Real Time Chat App with Users, Rooms | Node.js, Express, Socket.io

today we will learn about chat rooms and build a complete chat application with socket [Music] IO hello and welcome I'm Dave today we will build a complete chat application with socket.io and I'll provide links to all resources in the description below I'll also provide a link for you to join my Discord server where you can discuss web development with other students and you can ask questions that I can answer and receive help from other viewers too I love look forward to seeing you there the goal of today's lesson is to learn about socket IO chat rooms and build a fully functioning chat application so if we look at the application here I've got it open in two different browser tabs we can see Dave is logged in here in the top left and he's joined the pizza chat room and we can click join there after Dave joins we can see the users in the chat room are Dave and Steve now Steve joined afterwards so we see Steve has joined the room up here that displayed in Dave's chat window now this the first thing you get in any window when you log in is welcome to chat app but after that it tells you what room you have joined and these are all admin messages the ones that have the full width of the chat display and then when Dave sends a message he says hey do you like pizza because he knows Steve has also joined the chat room he can see that here for the users in the pizza chat room and also it said Steve has joined the room then Steve says yes I do and you you can see they have different colors and the conversation goes on and this Scrolls down as you add new messages and then it also shows active chat room so if there was another room that was active you could see what it was type it in up here and join as well likewise when Steve starts to type a message over here you can see it says Steve is typing and for the same thing over here if Dave starts typing you can see in Steve's browser tab that Dave is typing so we're applying lots of things we've learned pre previously in this series and we're adding some new things about chat rooms and then we're of course creating a full application now our starter code is the completed code from Lesson Four in this video series today's video is lesson five and there's a link to the code resources in the description if you haven't completed the tutorials in this series leading up to this one I highly recommend it because we've built this code towards today's project now let's start in the package Json file here in our project and we're just going to change lesson four to lesson five and of course you can name this whatever you want to name it but I'm going to keep up with the lesson numbers in my code that I'm providing to everyone now we need to move to the public folder let's open that and click on the index.html here I'm going to press alt Z to make sure any line that extends beyond the window is going to wrap down to the next line also Press contrl B to hide the file tree for now just so we can see everything a little clear and the first thing we can do is just change this web sockets title let's go ahead and just call this chat app once again you could name this whatever you want to name your project now besides that we have a very simple body for our HTML right now and we need to add some more to this we're going to have another form so let's start there so I'll type form then I'm going to use an image shortcut here to type Dot and then I can type a class name and I'm going to call this form djin then press Tab and now you can see I've got the class form join added I'm going to delete the AC attribute we don't need that today but inside the form we do need to create a couple of inputs so I'm going to have an input here and then I'll just press tab because it will default to type text and that is the type I need then I'm going to give it an ID equal to it starts with quotes already we'll put name then I want a max length here equal to 8 and that's going to be for the username that they enter here so I don't want any name longer than eight and that's just my preference as well put a placeholder here so it will tell the user what to put we'll say your name and it needs to go in the quotes I missed that and after that we need a size let me set this equal to five and in the quotes again and let's make this required as well that would be some good HTML now after that let's put another input and it will also be a text type and this is where we would put the room type here so I'm going to have an ID equal to room and then I'm going to put a placeholder here that says chat room and let me put a Capital C there and after that I'm going to say size equals 5 and finally I'm going to also make this required now after that I need a button that would be the submit button so I'll just put button here and on this button I want it to say join and then I'm also going to give this an ID and I'll set that equal to join as well so that is our form now for when somebody joins a chat room after that we're going to have a chat display which we already have with our unordered list so let me just highlight that crl X to cut it and then I'm going to paste it in right underneath the new form we added and I just want to add a class name to this and this class is going to equal chat Das display after that we're going to display a user list and that was where if you remember from my example we showed the active users in the room and this is going to be a paragraph and I'm going to give this a class of user- list press Tab and it should be there now we'll leave it empty for now because we'll populate that with JavaScript now let's do the same thing for the room list so we could see all of the uh rooms that were active so here I'll put a class again and make this room- list and after that we're going to have our activity which we already have down here so I'll highlight thistr X and then I will contrl V to paste it in right there above the final form and this form that we have now is the one we've been sending messages with and we mostly want to leave it as is but let's go ahead and add a class here and inside this I'm going to put form Das message which will make it distinguished from the form Das join above and after we have that we could add just a little more to the input right now we have a text and a placeholder let's give this an ID as well we'll set that equal to message so we know which input we're working with then we have the placeholder your message let's also make this required which would be a good idea our button is send let's go ahead and give it a type equal to submit here too and we didn't really do that above but we could because this is also a submit for the form that it's inside of now if you don't do that it defaults to it anyway but it's a good idea to go ahead and add that in hey guys a quick note on the HTML file you will want to add a main element that wraps everything inside of the body if you want to use my CSS because it will require that so I didn't want to leave that out I just forgot to say it sooner so wanted to make sure you get that added in so if you're applying my CSS everything looks correct okay with our HTML file now complete let's go back to the file tree and let's quickly look at the style.css now I've added in the CSS for this project already so you can look at this in the course resources remember that link is in the description but I really recommend you creating your own look and design for this so after you use mine maybe to set it up or to see how all of this works then go in and create your own design of course a chat room has kind of a standard look but you can give it your own feel as well so now let's move on to the appjs file that's also in the public public directory let's start by setting up some additional selectors here we have our message input but right now we use a selector and just select the input but now we have more than one input in our HTML so let's go back and look at the HTML and if we scroll down we can see we have an input here that has an ID of name and then an input here that has an ID of room we haven't done either one of those and then down here is where we have the ID of message and that's the one that we were using just with the input so let's go back and change that to where this selector is actually looking for the ID of message and then we can copy this down I'll use shift alt in the down arrow and instead of a message input let's call this a name input so I'll delete the beginning of that and call it name input and then here I want the ID of name that we used for that and then we also had a room so so I'll copy this down one more time shift alt and the down arrow I'm going to call this chat room instead of room input and I'll use that later in the code as well but that just helps me refer to chat room and the value that we'll have in there and for this ID we had room so now that we have all of those the following selectors will all be classes so I want to put this one for that we already have for activity underneath where I'm going to have more classes with selectors as well so I'll put activity here and then I can copy it down with shift alt and the down arrow and we're going to change this one now to the users list and this is where we would display users and this class was user- list I believe and contrl S to save and go back here and check yes we had user list and we're going to have room list as well so back in the appjs copy this down one more time and now we'll have a room list and we'll just change user list here or user to room and finally we have the chat display which is the UL the unordered list right here that has the class chat Das display so let's come back here and also have a selector for that so shift alt in the down arrow one more time and I'll call this chat display and then over here instead of room D list we'll have chat dash display and now our selectors are complete and now let's scroll just a little bit and let's look at this send message function we need to modify it just a little right now we were making sure we had a value in the message input but we still want to do that but we also want to check the name input so let's put name input. value to Ampersand so we're checking both now to make sure we do have a value in the name input and the message input and let's go ahead and also check the chat room. value so now we're making sure we have values in all three and then when we emit our message here with socket. Emit and it is still a message we want to emit a object now that's going to have more than one value so I'll start the object here and then we can end it on the line afterwards and now let's put in the key value pairs so this is going to first have well let's go ahead and put text since we have it on this line there is our text value but let's also put in a name value this is going to be the name input. value and we'll put a comma after that so that will be the object now that we emit to the server when we send a message and then we can set that message input value back to empty and focus the message so the rest of this can stay as it is and now we need a very similar function function but it's not quite the same as send message so I'll just build it underneath I'll scroll up for just a little room and I'll say function and we'll put enter room so this is when a user enters a chat room is when this will be called and we'll start once again with our e prevent default so we don't reload the page with the form now let's check to see if we have values in the name input. value and chat room we're not sending a message so we don't need to check that at this point then inside the if statement if we have values there we'll have socket. Emit and then we will be emitting an enter room event and then for the object inside here we'll have a name and we'll have name input. value and then we'll also have room and we'll say chat room. value and I think I left the quotes off here that I had up here really you could probably do this this either way I'm going to go ahead and put quotes around this so I'll start with a quote here at the beginning and then have a quote at the in just so I do it the same way both times you could probably remove the quotes as well but this looks right to me so that's what I'm going with and now that we have our send message function and our ENT room function let's scroll down here where we are adding The Listener and you can see this had a selector for just form once again well now we have more than one form so this would have been our message form where we send the message and if you remember we set this to a class that was form Das message and that's where we'll add the event listener for submit and then call send message on that form now let's go ahead and highlight both of these lines and I will shift alt and the down arrow to copy that down and we can apply the same to our form djin it's going to call a different event so here we're going to call or we're call a different function I'm sorry we're going to call enter room so when we click the join button then it's going to submit and call this inter room function that is going to send our inter room event right there now we should have one other event listener for the activity let me scroll down and see if I can find that yes it's right here so I'm going to select this and justr X to cut it out of that space and bring it up here by the other event listeners that I'm adding here so put it right here when I save it should Auto format yes it's back here so now I've got my selector selector but here we already had this selected it was our message input and so we're just adding the event listener for the key press that does that activity now I do need to modify this though because we're not sending the socket ID anymore that was that random string gets assigned by socket IO we want the name input value right here because we want to send a name of which user is of course uh emitting any activity at that time and with this code added to our appjs we now need to go to the index JS that runs on the server in node so this is what we have here and we need to change a few things I'm going to start by making a constant for our admin user so I'm going to Define admin here in all caps and I'm going to set this equal to a string that is just valued as admin and we'll use this in the near future when we call some functions and we say which user is actually being processed with the message because we'll have admin messages as well as messages from each user that is logged in now after this we also need to set up some state so let's scroll down here beneath where we have the express server already set up but before the socket IO server and let's set up this state for users and that's because we're not connecting this to a database at the current time now we could do that in the future we could expand that project but just for today we're focusing on chat rooms and getting the application set up so I'm just going to call this users State then I'll set this equal to an object and inside of this object we're going to have users and let's set this to an empty array where we'll put all of our user objects and then we'll have set users and if you're familiar with react this should look a lot like our used State hook here where we have users and set users and now set users is a function and inside of the function we'll have a new users array that gets passed in and then inside of the function here we'll say this do users is going to equal that new users array and that's essentially all you need for that set function for set users and as long as the server is running and it's running our node.js server then this user state will remain active and now we're eventually going to have listeners here inside of our socket IO connection and this is where everything will happen that we'll call some functions and those functions will impact our user state so what we need to do right now is create those functions so I'll just scroll to the bottom of this file because a lot of these functions are going to refer to that user State object and so we'll just need to be able to reference it so here I'm going to say function build message is what I'll call this because we want a function that will actually build the messages that the server sends out we'll pass in the name and the text of the message so who created the message and the text and now this function is going to return an object that's going to have well let's put these on separate lines makes it easy to see so we'll have name and text that it's passed in but then we also want to set the time and if you remember in my example let me see if I can bring up one of the browser windows here if you remember in my example it's got the time here in the header of each little message that comes through so we want that as well when the server sends these messages back so here we can do that now without an external Library it's built right into JavaScript so we'll say time then we'll say new international and that's a capital I NL do date time format and then we'll start it here with default and after that we have an object inside for the settings let me scroll just a little bit so we'll say hour that is put in the single quotes here that is numeric then we'll say minute and this is going to be numeric as well and then second is also going to be numeric now after those three we don't need a comma we've completed that but now let's put a format here at the end a format method and for the format we'll say new date and that should give us that time format that we saw back here in the browser when it's sent along and we see like 103 and 51 seconds and then the am or the pm here so that gives us the full time as I had formatted it there and here just as a side note I'm seeing this options object without quotes and of course this is a string value with quotes which makes me think up here I probably should have errored up not up here actually in the appjs file I probably should have errored in the other direction even though I said both would work where I would just remove these quotes here so contrl d contrl d contrl d and backspace to remove those four highlight one here contrl D to select all of them and backspace to remove those because I just want to stay consistent throughout the application and the code that I'm writing here so no quotes around those object Keys even though it seems to work either way okay now this is the only function we're going to use that actually builds a message that isn't directly impacting the user State the other functions I'm about to create all impact the user State here so I'm just going to leave a little comment here that says user functions but we're going to do a lot with user State as they enter chat rooms leave chat rooms Etc there's going to be several things so let's start off with a function called activate user this is where a user gets activated not necessarily when they just enter a room but they're activated and so we need an ID of the user we need the name and the room so it's going to do just a little bit more than just enter the room so let's define our user so our user is equal to the object that has all of those prams the ID the name and the room after that now we can work with our user state so here's our user state do set users we're calling that function we defined and inside of this we will have an array now we'll spread in the existing user state. users and this would be an array of course but now we're going to filter that array so we're going to filter it or each user we're going to make sure the user. ID is not equal to the ID that was passed in put a comma there and now we'll pass in our new user and we make sure we do the filter to make make sure we don't have duplicates so we don't have the user that was previously in the other room still in there essentially so when they enter in to a new room and they're activated then we're making sure that they're not in there again of course for a different room and that's why we're filtering that so that takes care of all that but we still need to go ahead and return a user so let's do that as well I'm going to scroll for some more room and we're also going to need a function for when the user leaves the application so I'm going to say function user leaves app we'll pass in the ID of the user and we'll get our users dot well I say users state. set users now inside of this we're going to have the users state. users. filter once again and we'll have for each user now we'll have the user ID not equal to the ID so it's essentially the same thing we did before except we're not passing in a new user that user has left so we're just filtering them out and of course this returns an array on its own before we had to spread this because this was most of the array but then we needed to add in the new user as the final element of the array afterwards as well so that should work for when the user leaves the application now let's create a function that just finds the user we're looking for so we'll call it function G user and we'll pass in the user ID now inside of this we will return users state. users. find and the find method of course will return only one from the array so here we'll have user then have user. ID equals the ID that is passed in and that's all we need for that function now we have a very similar function we need that is called get the users in the room so here I'll just go ahead and write it out as well so function get users in room and we'll pass in the room that we want and then we'll say return users state. users. filter once again then for each user going to look at the user room value and make sure it's equal to the room that is passed in as a pram to this function now finally one one more function and this is just a little more complex but not much here we'll say function get all active rooms and this doesn't need a pram p in because we want all active rooms so we're going to return an array and we'll say array. from and inside of this I'll I'll do something else with it in a second but first let's go ahead and say users state. users. map and over each user we'll go ahead and get the user. room now that returns all rooms in the user state but there's easily going to be duplicates so what we need to do to remove the duplicates the easiest way is to create a set here because this is actually already an array map returns an array so we wouldn't need the array from right but if we turn this array this inner array from map into a set to remove the duplicates then we need to turn it back into an array and that's what array from will do so here I'm just going to wrap this with new set and we can put one more parenthe whoa one more parenthesis at the end whatever I click let me press alt Z to wrap that down just one more parentheses there and we should be good now this will actually return all active rooms with no duplicates okay now we have the functions to help us out so our socket IO connections up here where we have communications won't be so complicated and big with all of the code that could make it look confusing so we kind of extracted that with these functions when we come back up here this will be a lot easier to write inside of our io. onc connection listener where everything else happens so let's start right away with our welcome message and if we look back at my example you can see I'll come to the top of this everybody gets this welcome to chat app and it's an admin message here that's the full width right when they log in when they first open the uh application they should see that so that's what we want to see when they connect immediately so we'll have message here welcome to chat app is good but we don't want to just have welcome to chat app so let me go ahead and control X to cut that out for now what I want is our build message function to be called when this is sent here the socket. Amit message so it will be called immediately because we're not it's not a listener like socket. on so at the connection this is called immediately and we'll go ahead and call this build message function and we need to pass in the user first which in this case will be our admin value that we set up here at the top as a constant right here on line 10 so down here we have our admin user is sending the welcome message and then we'll have welcome to chat app and that's all we need so we just built the message and now it will have that date and time that we set in there and it would have the username and have everything that we we expect to have when we send that message out and now previously here we had a message with socket. broadcast. Amit so it was sent to all others and that's good we learned about that but that's not exactly what we want now we want it sent to everyone else maybe in the room or in the previous room possibly and we're going to handle those things with an interro listener so I'm going to go ahead and leave this for a second but we'll probably delete that and here let's go ahead and put in our listener as we enter a room so it's socket. on we'll be listening for enter room and remember we're sending that oh I didn't put the parenthesis that's why it's acting weird we'll be sending that from our front end the enter room when we submit that join form and then this is going to receive the name that we sent from the front end and the room as well then after that let me go ahead and put the arrow here for this listener we'll have a lot lot of things inside this listener so let's just start one by one the first thing we'll do is leave a previous room if this user was in a previous room so I'm going to put a note here leave previous room so I'm going to define the previous room we'll need that Value First we're going to get that by calling our get user function we'll pass in the socket ID because that's how we identify the user and then this would return that user but right from here I can go ahead just get the value I need for the room I'm going to use optional chaining and just get the room value from that user object so that's all I need to do to get that previous room value now I can say if we have a previous room value inside of here we'll say socket. leave which will disconnect so they um not disconnect I'm sorry that will they will leave the previous room and then here I'll say IO do2 and then we'll only broadcast this to the previous room and then we'll say Emit and we're going to emit a message and then this message well let me put a comma here instead will be built with our built message function and this would be an admin message and now let me go ahead and use a template literal I'll put the dollar uh dollar sign there inside the brackets I'll put the name so we're getting the username that just left and we can say has left the room and that's what we expect to see when somebody leaves the room and we're still in the room it should only be sent to that previous room and it looks like I need one more parentheses right there and then I think we're good with that if statement now we're ready to go ahead and activate this user so let's say const user and remember our activate user function Returns the user so here we can say const user equals activate user we can pass in the socket ID which was the ID needed the name and the room and that will now activate the user now if you remember let me go back to the browser example once again we have act or users in pizza because we're in this room pizza and we see Dave and Steve but say Steve leaves but we can't really update the users in pizza here this list until we've already updated our user state so now it's time to update that list in the previous room as well we already sent a message which was fine now we need to update that list so let me go ahead and just put a note with that I'll say cannot update previous room users list until after the state update in activate user okay so now we're ready to go ahead and update that previous room list so I'll say once again if previous room then we'll say IO do2 pass in previous room again and then we'll emit a user list event with that user list event we're going to then say users and we will get users in the room and we'll pass in the previous room value because now we only want to display the users that are left in the room and in our example Steve had left Dave was still in the room so that would update that list for Dave to see how many users or what you which users were still in the room now finally we're ready for our user to join the new room here and that's what they've wanted to do all along we just had all of this other housekeeping to take care of so we can say socket. jooin and pass in user. room now that we have a user defined here now scroll up after that there's a couple of more things to do yet so now let's say this goes to the user who joins so we're only sending this message to the user that joined the room we'll say socket. Emit and we're going to emit a message and then this is going to once again be build message this will come from admin and this will be one of those messages saying you have join so you have joined the and now we'll put in our user. room value and then we'll say chat room and so that kind of eliminates what we were doing here or we will here actually this one went to the user this next one I'm going to do is going to eliminate what we're doing here to tell everybody else so this is going to go to everyone else I'll say socket. broadcast. 2 we'll do user. room.it we'll emit a message and we'll use build message once again the admin will send this as well and then this is going to be another template literal and we'll say user.name has joined the room and that's the one we want to send to everyone else so that officially lets me delete the one we had here as an example before now there's two more updates that we still need to do inside of all of this and this is all remember on basically entering a room which also has us leave another one because that's because we're tracking users and we also have a list of active rooms and it's just a lot to keep keep up with but here we'll say update user list for room so this is the room the user has now joined so we need to update this with the new list of users so we'll say IO do2 and then we'll say user. room. Emit and we will emit a user list event and inside of here we'll say the users and we will get users in room once again but we will pass in the user room we did this earlier for the previous room now this is the current room for the user and finally we're ready to update the rooms list for all so now we'll say update the active rooms this is rooms list for everyone so this will just be io. Amit it's not to any specific room we get rooms list event and now here we'll say rooms and we'll get all active rooms and that should return all all of the active rooms that are in the state now thankfully the other listeners we will have aren't this complicated with this many steps we were just managing several things here leaving a room joining a room of course updating a users list and updating users list for previous or users list for previous rooms and for the current room as well as updating a rooms list for everyone so just a lot to uh manage inside of that one event now the next most complicated is actually the disconnect so I want to go ahead and select it here even though it's below the message and I'm going to do contr X I'm going to move it here above the message and I'm just going to work my way down from the most complicated to the Least Complicated so now with the disconnect we'll start out here with our function starts the same way a disconnect event now at the very top we need to go ahead and get a user so we'll say const user we'll set this equal to get user we'll pass in this socket. ID now once we have that user we need to call our function user leaves app and pass in that socket. ID there as well so our user is leaving the application all together if we come back down here if we see what that means we filter out the user from the state so the user will no longer be in state which will let us call these other functions with accurate information and that's important so our order of operations is important here we'll still be able to refer to the user we defined because we called get user first then after we have that and our users that we'll be able to use we want to go ahead and remove the user from State and that's where we call our user leaves app function so now let me just delete this part here where we had a broadcast message and we'll start over and we've already removed the user from state so now I'm going to say if we have a user value now we're going to do several things inside of here we'll say IO do2 user. room so the room that the user was just in we will emit a message here and here we'll call build message once again it will come from the admin and now a template literal and we'll have user. name we can name the user and we'll say has left the room we didn't have to say this was to everyone else that wasn't the user because the user already left so they won't be seeing this message so we could just say IOD .2 user room and that was fine now after we do that we'll also say IO do2 and pass in that user. room once again and now we're going to emit a user list message and here we're going to say users and we're going to get users in room pass in the user. room so that will update that user list for the room for everyone else that's still in there and then we'll update the rooms list for all as well so we IO doit because they might have been the last one in a room and so then it would become inactive and that room list might change so we'll have rooms and we will get all active rooms here as well so now we've handled pretty much everything we need to do there one thing we could do just to match this console log statement that I had left up here if you want it because on the connect I'm still logging here on the server that somebody connected and it gives the socket ID so you could put that here in the disconnect at the end again only if you want to we can put in a console log and we can say user socket ID disconnected and just round out that same message path there on the server console if you want to now let's look at the message event and this should get easier as we go so I'll scroll up here and we'll look at our message we have message and then we have data coming in previously well this is definitely going to change because now with every message we are receiving a name and text in that object we're sending and then we need to go ahead and Define our room I'm going to get rid of this console log statement I'll say const room equals get user and we'll pass in the socket. ID for the user once again optional chaining to just get the room value when we call that g user function now I can say if room and if I have a room then I can do something inside here so not this i.it that is here that was using the socket ID substring we'll just change that as well but now we'll say IO do2 and we'll go to that room value we have and we will emit a message to the room it will be build message now we pass in name here not admin but the user's name that sent the message and then send the text along with it to that build message function and that's all we need for our message listener and then our activity listener is going to be very similar to what we just did for the message event up here as well so we'll start off with activity it does receive a name so that's correct but we're also going to need the room here so I'll just copy this down and we'll put it right here inside of the activity listener and then we'll have if room once again and then inside the if statement this will be just a little different so I'll just go ahead and delete this and then we'll put in what we're going to emit here which will be socket. broadcast. two room there we will emit the activity and then we'll send along that name value so it says who is typing so Steve sees Dave is typing and Dave sees that Steve is typing but we want this broadcast to because this way it's not being sent back to the person that's actually doing the typing this just sends it to everyone else as we learned before and with that we've finished the code inside of our index.js that runs on the server so now we need to return to the appjs and handle these messages that we're getting back from the server so I'll click on appjs inside of the public directory here in our file tree in our appjs let's scroll down to where we were ready to listen for messages it looks like about line 43 here now this is going to get a little more complex inside of our socket Doon listening for a message event but what we have here is pretty much going to help us as well so we can just add to that we're going to start off with the same line here we're still getting data as well as for our Pam here and then we are going to have activity. text content equal to a blank string we want that to change out but after that let's go ahead and destruct Ure that data that comes in so let's say const and then we'll destructure to name text and time that should all be coming from the server as this data that is sent back from there we need to go ahead and create our element so that Li the list item is correct and underneath that we won't need this li. text content equals data at this point but we will need li. class name is going going to equal post so no matter what our list item will at least have the class of post and that means it could just be an admin message and then that's all it would need but you'll find when it's a user or one of the other users will give it different classes so now we're going to have some if statements and we'll do that with if name equals name input. value so that means if it's the current user then the LI do class name is going to equal not only post but also post two dashes and left and I'm using a bem class name structure here for the CSS so that's block element modifier you can find out more about that in my CSS course if you're not familiar but that's what I have in my CSS as well now what I could do of course is have the class name here and then just have the class list and push this new class here but since it's short I just overwrite that if it has a post left that needs to be applied and we'll find out the same for post right here in just a second because we'll say if the name is not equal to name input. value and the name is not equal to this admin because it could be an admin message then we want the LI do class name to be equal to post and post-- WR so it shows up on the right hand side it's what I'm doing with that class I'm going to press alt Z so that wraps down as well okay with both of those we'll say if the name is not equal to admin then we'll do some other things to our list item as well so we'll say li. inner HTML it's going to equal and then let's have a template literal here I'll start writing a little bit of HTML I have a div the class equal to post two underscores header once again the underscores just like the dashes are part of that block element modifier structure for class names and we'll have name is going to equal with the three equals the name input. Val so this would once again be if it was a current user and now I'm going to have a Turner statement so if that is true if it is the current user I'm going to give it a poost 2or header two dases user class but if it's not true that comes after the colon then it gets a post 2or header 2-es reply so it is a reply message instead that's how we get those left right and no how to assign the the classes that you see in the presentation in the UI so you could work with this and of course come up with your own structure as well you don't have to do it exactly like I do now after that we need a regular quote here and then we need a closing greater than symbol like the HTML tag would be but we're not ready for the end of our template literal yet we can come down to another line for that that just closed out that first div and we decided what class to put on it so now I'm going to actually bring it down another line so I can write some of this without worrying about that back tick here I'm going to have a span element have a class equal to poost 2or header 2 das's name and then that name value is going to go in here that we see in the header of the post and I will go back to that example in just a second and then you know what I'm going to copy this down with shift alt and the down arrow cuz here this is very similar post post header but it's not name contr d to select both and I can make that time and then I want to close out the div that we were creating and I want one more div all inside of this template literal class equals post 2or text now here I want to put in the text of the post that SL div and now I can just backspace because that is where the template literal ends so this created the full post I'll save that now let's look at the example so you know exactly what we were doing there so we had the header here and it had the name and the date and that's that's a div inside of this list item and then down here we had the actual text which was the second div inside of that same list item so and then we apply those classes so you know if it's the user that's over here on the left in blue or if it's somebody else replying to the user that's over here on the right in the other color and when I pull up the other one you'll be able to see that yeah Steve gets the opposite because the messages from Dave are on the right and Steve was on the left and stuff so it's all based on who the current user is in that browser tab but we're not quite finished because what if the username is admin as well so here then we need to have an else basically handles any admin post and we'll have li. iner HTML click on that right there and we'll set this equal to a much smaller template literal that will have the div lowercase though the class is going to be equal to post 2 uncor text and then after that we can close that out and just pass in that text once again and close out the div so this would be the example that we see like with the welcome to the chat app message or anything else here it goes all the way across the screen so it didn't have those other classes applied it didn't have a separate header in there anything these are admin messages that we see up here okay we're almost finished with that but after we go ahead and append the list item to the chat display which is the unordered list and I guess we could actually put this in here as a chat display also that would make sense wouldn't it instead of what we have so we could have chat dash display there because that's the query selector and that reads a little bit more easily now we know it's being attached to the chat display and actually this could even be well no because didn't we call this Li up here above yes we said Li we didn't call it a post if we had called this a post it might even make more sense to be uh attaching the post or call it a message or whatever to the chat display but we're still calling it Li here anyway after that we have chat display and we want it to scroll if we get more messages we don't want to have to manually scroll we want it to continue to scroll down so we're going to say scroll top and we'll set this is equal to chat display. scroll height and that's all we need to do for it to continue to scroll down now next our activity listener I think it is fine as it is it already says name is typing it's working with that name pram everything looks good there from that previous lesson so we can move on now to where we're going to update the rooms list and the users list and we're going to create a couple of functions to do that as well I'll start by typing function and then show users and we'll pass in the users from there we'll say the users list that we use we created with a selector above. text content is going to equal an empty string so we're essentially resetting it and then we'll say if we have users a users value then we're going to say users list. inner HTML and let's set this equal to a template literal it will be short compared to those others we'll start with em so it makes it bold here and we'll say users in I'll say chat room. value and then we can put a colon after that and then we're going to go ahead and close it out with a slash em as well because that's just going to be essentially the intro to that list we'll have over here like you see here users in pizza and we use that em there to make it bold okay after that let's go through the list then so we had that we used our if statement we're still inside the if statement we'll say users. for each I want to say for each user but let me put another parenthesis because not only for each user I also want to use the index of this for each loop at this time and then oh yeah okay I don't need that parentheses to close yet then inside of our 4 each here I'm going to say users list. text content I'll do plus equals so I can add to it I'll have a template literal and inside this template literal I'll put a space first and then put user.name so we're adding each username to it with a space which is fine but I would also like to have a proper comma after all of them except the last one and I can do that with a quick if statement here so I'll say if users. length is greater than one and that iterator that we have right here the I as we count through the loops it's not equal to the users. length minus one then I want to put a comma so then I'm going to say users list. text content once again plus equals and just add a comma at the end that's what that whole if statement's about is just getting the proper comma there otherwise you could have a list of users names and they would just have spaces between them now this next function is so similar I'm going to just highlight this and do shift alt in the down arrow to copy down the show users function and I'm going to switch users here to show rooms and we're going to pass in rooms instead of users so instead of our users list we're going to have a room list. text content because that was selected up at the top as well now we can say if we have rooms then for our room list not the users list do iner HTML we'll say rooms or no let's not say rooms we'll this is shorter we'll say active rooms we don't even need to insert anything right there so we could actually move the template literal and just make it regular quotes also so I'll do that with the highlighting one control D to select both and then a a single quote cuz that's all we really need there are the active rooms but we are going to Loop through this same content just like we did before as well so rooms. for each and we'll say for each room and then we'll also use that iterator once again here we'll use the room list. text content and of course it's not a room name at this point it's just a room because the room values were not objects they're just that specific room name so here we have if rooms. length is greater than one and rooms. length minus one over here and we once again need to have our room list updated there with the comma once again this is just to get the proper comma and this of course just sets out with a space between each one if you didn't put the comma right there that should be everything you need there so essentially a very similar function we spend a little more time on this we could possibly abstract this to almost the same exact thing we need but there's just enough difference that I wrote two separate functions for that okay so we've got show users and show rooms and now we need to focus on the actual listeners for those events so underneath our socket Doon activity going to space that out here we'll put socket. on and we'll put in user list and then inside of here we can just put a function we don't have to have anything else ahead of time we'll just have this function here that passes in users actually destructured the users it gets here when we call that in then inside of this we will call our show users and pass in users and just quickly to jog the memory if you go back to the index.js here when we're sending that users list or when we're sending the rooms list they come in an object and I believe I could find that quickly here as well so for example up here when we look at the rooms list and we emit that we're sending an object here with rooms and then we get all the active rooms so we just need to destructure that whether it's a user list or rooms for example so back here where we're doing this I'm destructuring right here when we receive that and then I'm calling it with that destructured value right here so again one that's almost identical to this I can just highlight that shift alt and the down arrow and we can just change a couple of things because now we're listening for a room list event and we're going to destructure rooms that we received from the server and here it's going to be show rooms and we're going to pass in whoops fingers on the wrong keys we're going to pass in rooms right there and we can set save that change and with that we should have completed our application of course there are changes that you should make that I recommend let's look back at our examples for a second and I'll pull both of these up now you could do a lot of different things here one thing that would happen if there was a third chat room involved or more people chatting everybody that wasn't the current user with this current code would receive this purple type color here you could find a way to make each user have their own color if you spend a little more time on this other things you could do is just redesign the look and feel of this it could be a lot better I didn't spend a whole lot of time on it so I think you could find a more creative way to display the users in the current room and probably the active rooms maybe even a way to click on any of the active rooms and essentially join that room and leave the current one you are in features like that would be good additions to this also if we look back in the code I want to highlight one part here inside of the appjs we'll scroll to the Top If You deploy this you won't be on Local Host so make sure you specify where your server is in your code if you deploy and of course with a free server you may have to deploy your project first find out what that address is and then essentially go back into your code and redeploy with the proper address there hey a few closing notes on deploying your project if you decide to do so say I have linked my GitHub account to render.jpg we were in development but this is where we Define socket so put in the URL they give you there we don't have to worry about cores because our front end is hosted in our same application as our back end you just deploy it as a web service for nodejs and then the front end is also available when we come back here there's a few other things to look at because remember we kept everything in a server directory so if you did that like I did then you want to specify that so I'm just scrolling down this is showing my project here and it's private I'm probably going to delete it and any settings you see here I'm probably going to delete this off of render as well so I don't care about showing you or not there shouldn't be any security issues just on the main branch but the root directory is optional well we were using a root directory named server so you need to specify that in there when you deploy your project also if we come down a little further if it asks you for a build command and on render it's required of course it's already saying it's going to be in the server directory because we said that's our root directory root directory if you will I pronounce that a little differently with my accent but then we've got npmi which just means it's going to install all the packages your project needs you want that after that you want to have the start command as well npm start and that's really all you need it will set to Auto deploy by itself already you won't have to do that when you first start this up and that will get your chat application going and now I have it running here on render.jpg you go ahead and make this application your own and I'll see you in the next one remember to keep striving for Progress over Perfection and a little progress every day will go a very long way please give this video a like if it's helped you and thank you for watching and subscribing your helping my channel grow have a great day and let's write more code together very soon

Channel: Dave Gray

Views: 20,598

Keywords: real time chat app with users, rooms, real time chat app with users rooms, realtime chat app, chat application, socket.io, node.js, nodejs, express, socket.io server, real time chat app, real time chat website, real time chat app nodejs, chat app, socket.io chat app, socket.io chat application, node.js chat app, nodejs chat app, how to build a chat app, how to build a chat application, chat app project, chat app full project, chat app tutorial, chat app full tutorial, chat rooms

Id: ba4T590JPnw

Length: 60min 17sec (3617 seconds)

Published: Fri Oct 13 2023