Angular: Chatroom: Add Message & load last Messages | Realtime Chat App | 15/17

hi and welcome back to the next video this is video 15 and here we are mainly handling the angular and here we have like a new chatroom component um we want to be able to like add mess it or add a new message and we want to get all the messages so specific we create like a chatroom component we create also a message component and we add like events to our angular front and chat servers like adding a message to a specific chat room and also get all the messages when we join the chat rooms over latest ones i think the latest 10 messages and um yeah we also refactor like the fine messages by roon stuff in our sjs backend so from our gateway uh and um so that we then get like all the latest messages for a specific room um and also we have to make sure but this is something for like the next videos to add more design for example that we make that we display our own messages different when you messages from other users so for example like in whatsapp you know what your messages are displayed on the right side and the messages from the other users are displayed on the left and that we also make some changes how we displayed like the messages because now we are just like displaying the latest ones then we have here our video structure which is as always first we have a look at the video outcome then we read the user story for this and then we implement the story and close it so let's quickly go through like the outcome of this video so like before we can now log in we can add an add our password and now we have our rooms here we have now set like the width and the height of this component we have also made our room scrollable and we can paginate now correctly through it so we edit it here but now you can see we have no track room selected at the moment we can select chat room then we have like here the name of the chat room we have the date when it was last updated the description and all the names of the users that are in currently we have something for the messages and to add a new message to this room here you can already see we have a room where it has also description and has some messages and now when we add like um outcome of this video to this then this gets added but we have to at the moment reload it and then open the room and we have it at the top and now this is what we will do in this video and then in one of the next videos we will like turn this around we will also um make it different when i am the user that created a message like whatsapp when we displayed on the right and if someone else wrote it when we displayed on the left and yeah also we want to emit this immediately so that we don't have to do like an f5 hi let's first have a look at our story for this video here we are on video 15 and here we will do mainly angular and a little bit necess stuff so venezuela's can be in brackets so basically we want to like add a message to a chat room and we also want to get messages for our chat room that we are currently in in this video here in our front end so the story is simple as a user i want to be able to open my chat room and to add like a message to it so we want to send it to the back end and i also want to get displayed like the latest messages from the users when i join the room and i have to say like the final design like displaying their own message from myself like um this different will be done in another video i think and also um right now we are just we will just make the loading of the messages when you enter the room the first time um and so the directly message emitting when someone else in the room adds a message while you're in this room and you see it directly and will also be done like in one of the next videos so here you will have some acceptance criteria you want to have like a new component chatroom a new component message um here we will handle like all the stuff that's going on in the chat room here we will only display like the message um we want to make like our room in our dashboard scrollable and also like the messages so that you can scroll over them we want to make some small design improvements and we also want to modify our api message service in our back end that gets accessed from the messages event in our gateway so because where we want to filter by the room id and we also want to add like the user to our message message so that we can in one of the next videos i'm in the front and check if the user that was writing this message is myself so that then we can display it differently so like in whatsapp the messages from the other users are displayed on the left and my own messages are displayed on the right so this is how we could make this stuff later so the first thing that we want to do is we want to change our message service at the moment we have this here which is here like a little bit wrong so we want here to make a query and for this we want to use our message repository and we have to use like the query builder and we want to create it for our message then we want to make like a left join with the rooms or with the room that this message belongs so we can say message.room and then we can say alias is room and then we can say where our room dot id is our room id and then we can say simply here room id is our room dot id then we can specify left join and select for our users so here we want to get our message the user that is that we wrote message and so we can make an alias here for the user and then we can also make an order by and we can say from the message dot created at timestamp that we have in our database and we want to sort ascending so that we have the latest message at the bottom displayed and then we can simply return our paginate function from the nestgs stuff and then we can say query with the pagination option so that we can take innate through this then we should get like returned um the good stuff so here this will just take some time till it is yeah recognized so now it should everything be okay so now we can switch to our front end and here we now first needs to add like our interface so that we can work with this more easily so here we can you know copy a bit of interface from our backend so let's just make copy and paste and now go to our front end and go to our model folder and then we can just say message dot interface dot ts and can make a little bit copy and paste and then we have here our id we have the text we have the user we have a room and these here are like um optional and also the user because when we will create it when the user is edit automatically in the back end from um the trade wt and we created attend update at timestamps will also be created in the back end so that we don't need them here so now we can use our work with this and now we can start to modify a bit of our your chat server so where this will be in our cloud service here and here we have to check it against our gateway from nest js so we have here our gateway and now we want to have like a drawing and a leaf room event you see it here we have a drawing room and we have a leaf room so we need to add this here so we can say we have one coin room and here we want to have like the room and we can simply say this dot socket dot emit and then we name it like join room the event name that we have in our back end and we also send the room so because as you remember here when we make a drone room then we search by this room for the messages for this room for the latest 10 latest messages so that we then can display them and then we also have like the leaf room so we can say leave room we also have here like the room and the room id so that we can then use this dot socket dot emit and then we can simply say leave room and then we give him the room that we are leaving as a user so here you see if we leave the room then we delete our connection from our client room service by our socket id and then we left like the room we also want to send a message and of course therefore we need our message from our message interface and then we simply say this dot socket dot emit and this is like our add message event and we have here our message and you can see it here the add message we want to have the message when we save or we create this message we add we then get our room and our current users and then later we will also emit like a new message to all the users that are in this room currently online and we also want to get all the messages for our room so we can modify this here so we can rename this to get messages and this here is an observable and here we need like the message actually i think we need the message peggy nade stuff so if you have a look here at the rooms we also have here our paginate interface so where we have the items and the metadata um so this is like the page page size and so on so that we need this also so we can go to our message and we can say export message paginate interface and then we have our items which is our message interface and we have our meter data which is simply meter what we created so then we can use this in our chat service because we want to here return like a message peggy nade interface and then this goes against messages and we return this from socket and we can also say here this is like a message paginate interface and then we can access this later in our components so let's go to our dashboard component let's close our api folder here because i think now we are just in the front end stuff so we have here our components our dashboard component and now we want to modify this like a bit so we have here our chat rooms and then we can say we want to make here like another div where we have our heading and our button and we can also make this like an h2 tag and then we have our button where we can go to create new room and then we can also switch this spam here to a div and we can move our entry if into this and then we can simply remove this span element and here we have to add like a space and then we can see we have here our rooms are sync and as we display our new rooms here so like a little template and we can also give him here the class rooms and we can add this class here to our container there we have then our met card we can make our mid card like position fixed and with a margin of 20 pixels around and we can also remove it here from our container so this is like just full size so if we make it and we can return this and then in our mad cart we have our rooms where we can say for example they do have a height of 500 pixels we have to later check if this is good or not we can make it like a width of 250 pixels and when we say overflow auto we enable it that it's uh scrollable and here so when we have it like um scroller let's have a quick look at it how it looks at the moment so you can see we have here our dummy rooms and now we are here like full size and we can scroll here inside our containers and then also what i realize is our met paginator here when we have two more items when we switch our items per page k2 but this is nothing we want because then our we also have like here we are only displaying two on a replace till we change this so here basically our page size should be the items per page from our meter data and then this should be displayed like and then we can reformat this here a bit and this is like our thread also all our rooms that we have here on the left and then we can go into our chat room what we want to do now so we can first maybe give this like a class and say this is like our thread room class and then we add the logic there um yeah so then we can say here we have here our chatroom class and we can give this like a margin left of maybe 40 pixels and we can make the width to 600 pixels and let's see how this looks and we reload everything so this should be like a good size now i think and now we can like maybe also modify here like this scroll bar so for this we can just use like webkit a scroll bar the track and then we can use a webcat box shadow and then we can say here like light crane is attacking color and we can use like the border radius and this can be for example 10 pixels so that we don't like um like so edgy colors corners maybe use this and then we have also the webkit scroll bar maybe we can also use here did we use here ls blue let's see how this looks and we can also set our webkit scroll bar thump to border radius 10 pixels we have a web cut yeah we can just copy and paste this from here and we have a background color on this well normally this should work so what it's saying here box shadow just copy and paste seems like it let's see if we have an error and let's google it firefox modify scroll bar so let's try this works yeah so basically we can just set the scroll bar color and width for firefox here and this here will should work for like chrome and so on so then we have like um both options done so we can just say here scroll by color and scope our width for firefox and here we have this and we always have like a height of 500 pixels and a width of 250 and we have set it overflow epsilon to scroll so you can see now we have here our modified scroll bar it looks a bit nicer as the standard thing and you can see it now here now the pagination is also complete uh correct um and now we can go on and now we want to display like our chat room here so here at the moment we have displayed our room um so now we want to modify this a bit so for this we can open like a newtonian terminal and then we can create like another component so we can say energy generate component and then we want to go into our private module into our components folder and then we want to name our component chatroom component and then this should automatically so we first have to go to our front end folder and then this should automatically be added to our private module and create it inside here so now you see we have our chat room component and then we first you know maybe can add some stuff here so in our chatroom component we want to have like an angular input so that we have something to work with so this should be our chat room and then we want to have our room interface and this input here is imported from angular core so that we can use this then we also want to have like all or to get like the latest messages from our um from our thread gateway so this is like an observable or a message peginate interface and then we can just call our threat service so we need to add it to our constructor and we can say private threat service threat service and here we can say this dot chat service dot get messages and when we're listening there to our messages event from our backend and we also want to have something to create like a chat message so this is like our form control and this has like a new form control which is initiated and also gets the validator that it's required so that we can later then check our form or reactive form from angular and then we also want to implement some stuff so we have at the moment be on init interface when we want to have the on changes so if we input changes so if we open another chat room then we want to be notified and change or do something we have like on destroy so that when we um click another room then we want to um like emit like event where we leave the room and um here so then we have to implement these so we say envy on changes and then we can have like changes simple trainers from angular and here we can say if this the chat room is having like value then we can say we want to join the room so we can say the vista chat service dot join room and then we specify the room so our chat room that we are currently in then we have to do something on destroy and then this is like our chat service dot leave room and we want to leave our chat room and also we want to be able like to send a new message and this is just like simple form validation so we want to call our tread service dot let's see we want to send a message this wants a message from us so we can say we give him like a message so we have like a text and this is our this the chat message dot value services like from our form control where we access like the value and then we also need like a room for our message and this is at the moment our chat room where we are and then the user should get added from our backend directly so then we can say this dot chat message dot reset so that when the user is able to add like another chat message to the service then in our chatroom component we have to do some stuff so first we can maybe check when we add this to our dashboard component if everything is displayed so we can here now simply say here we want to display the app.room via a selector so you can see this is apt.minus room and this is the selector here that we have to access this so in our chat room what we first want to have is like a diff and here we want to check if we have like a room so we can say entry if and then we can say if we have like our chat room then it's okay else we want to display our no chat room maybe we can also add selected and so we can add the bottom advan energy template for this and we can say no chatroom selected and we can say matte error no chat room selected let's see if this is working so when we reload we now get no chatroom selected and if we selected chatroom yeah then we have to add like some stuff so that it works so because we have to drink this um so right now this is always like nile but we can give him like a chatroom so here we have like our input the chat room and this should be our selected room so because you remember um we have here our selected room with this initial null and then when the user selects a room from the rooms list then we call the on select room and then we set our selected room to the current value so then we can give this here as an input to our chatroom component so now when we click here then this is gone and now we have to display something when we have like a valid chat room so we can make a div here and give it like this is like our heading so we can give it maybe like a height of 125 pixels and then we can make a span and then we want to display like our heading and maybe also um the date when we when the chatroom was created and some stuff so we want to display this like maybe next to each other so we can give it some style so we say display flex and we can use the flex direction as a row and since we want to also use icons we can align items center and we can when we use justify content space between display something on the left and on the right so that's gets easier to read so here we can say for example the h2 tag and then we display our chat room dot name here so this is like the first and then we have like a second span element where we could display like the date so we could say matt icon and then we could this is our event icon so that we have like a nice icon for this and we have here like a p element that is just our chat room dot updated so when it was last updated for example and then we can use the date pipe to display it nicer so let's have a look how it looks so you see now here this but we want to display like our icon and this in one line or in one row so we can also add some style here to this span element so we also want to use display flex flex direction row and we want to align the items to center and then we can also give them here a little bit space so we can say margin to left let's say 10 pixels and then this should look a bit nicer so you see it now it's one line we have our icon we have it displayed seems good and then we can also like add the description to our chat room so we have here like another span element we could use like a vh3 tag for this we can also make it like color we can say for example gray and then we can simply display here our chat room dot description so yeah so my pc is a little bit slow today and then we could also display like all the users that we are currently having in this chat room so we could make here like an entry for and then we could say let user of chatroom dot users and then we could display here like the username of each user now let's see if this is working so you see here we have walter and thomas at the moment in this chat room so we can add like a comma and then we also have to fix this later that we have for the last user not also a comma behind so this is something that we need to check here later but at the moment it shouldn't bother us i think so now we have like our heading like our title and stuff so and now we want to yeah display like our messages so we have like another div but we can also give a style for background color but we can also maybe say light gray and we can also make it also a little bit lighter so that it's easier to look at we have to specify like a height and we can also say overflow [Music] or yeah overflow to minus epsilon to scroll so that we will be able to scroll through all our messages so now you can see we have here this and now let's see why is it displayed when we have no chat room selected ah it's outside today here so let's move this of course here inside our div so we need this here so this is like here we have our header and we have here like our messages and then we also want to later have feel like like adding a message so and here we can simply make like a span element again and then we can loop over it and say let message of our messages that we get from our message service and then we can simply use the asking part to subscribe it and then we access our items then we could say here message dot text to see if we can we get all our messages from our room so if i join a room now you see i'm getting all the messages above each other so this is what we have to fix and you see we are also yeah having here our users and also this so we need to add like some css so we could say we want to display our h3 padding to top zero pixels and padding to top minus 10 and we want to have a margin of zero and then this seems you're good so you see this is unlike all the message because i just was making very short messages so we can like remove this from here and then we can create like another component that is just our chat message component which will just have one input like the chat message so now we create like the chat message component here we will just have our input for our thread message so we can say at input um let's say chat or message chat mess uh this is like a message interface we import the input and then we can edit our html so here we can simply say for example we have our p element we can make it em and here we can use our binding for our message dot user dot username so we want to display like the username first when we want to make like a br so like a line break and then we want to display like the message dot text and then we can add like some css to our p so we can for example set the front size to medium our background color could also be like a light gray then we can make a padding of five pixels we can make way for fitting the content the border radius could be set to 5 pixels and we could add like a margin of 7 pixels and then we can use this chat message component in our chat room so then in our entry form our span so where we loop over it we can simply say we want to have our app.chat message and here we have like the message and this is simply the message that we loop over of messages and then we can see if everything compiles here and then we can reload and now we see we have here our messages so but it's not finding the user i think that i missed the bracket here i missed the bracket so let's try again and now we see we have like all the messages in this room all from me at the moment and i can scroll through them and later in one of the next videos we also want to have pagination here so for example if i scroll more to the top when we load the older data if i emit like a new message and i want to edit here so let's begin with adding like a new message to our chat room so we have here then our add message stuff and herefore we need like a new div that we can give like a style position absolute because you want to have it always displayed at the bottom so we give him like a bottom zero then we also want to have it like display flex with a flex direction row and then align items center so that we can then add like our form field for this where we made like here our very simple form controls of just forever chat message which will be just like a text and also like an icon in the button to send so we need here our met form field where we then can add our message so we can make it like a little bit brighter so we can say for example the width should be 350 pixels and then we have a simple input and here we also want to use the angular material input and we can bind it to a form control name and this is of course of course our chat message we can set the type of this input to text what is it is it just form control yes and so then we would have like our form so let's have a look how it see how it looks so you see now we have here our basic input where we can then type something and now we want to send it so we could say that we have here our button which is of course a matte button um we can say this should be disabled if our chat message is not valid so we can say this so i'll create a message it's not valid so we negate it and we can say on click we want to execute our send message that we have in our component here so you see we have here already made our send message where we then emit like a message we went we go to our chat servers with our message with our chat message in our chat room are we currently in and then this will send this slide to our back end and so we also can make like here splan element and then we could display here like the send icon so we can also say display flex we have a flex direction row and we have like align items center and we can also one of the next videos we will do like a refactoring and move all with css stuff into classes and then we can use our matte icon you can give it like a style martin left and set it to 20 pixels and we can then use the send icon so we just have to name it here and then we can give this also like a short name where we say also style margin left 10 pixels so it's not like cluttering to to to the icon and then we can simply say this is like send and now let's have a quick look so if i now open my room i can scroll through the last messages i can for example say send test then this button gets valid and i can click it so now i click it it gets receptive form and now when i reload we can see that the last message is not here so let's see why not here so let's see where it is stuck so one of the things that i can think of is that in our service we have here our messages we get our messages where are we when we join the room and we specify here like the first 10 items maybe we are now more and then we have to like resort it so let's say we want to have still 10 and we now filter like descending we have an error no that's coming ah now you see we have here our send test message um let's say another message and send and then we reload the page and then we can room and then you see we have here now added another message to this room and this room here is still having no messages this year is just having high let's add something to room id 9 test only room 9. we send it then we have to do f5 and see when it's added to room nine and the other rooms not so this seems to work fine then like in the next videos we have to make sure that we like turn around like here the message so that the latest message is at the bottom and that we also can don't have to do a f5 but we had to be a met emit this message to every user so since we have here our scroll bar we can also add this to this here so let's go to our front end and to our components and we have our dashboard component we have here our style so let's just copy and paste this to our chat room and we for i think firefox we also have to add this here to our html so we have here our messages and then we add it like this and then we should be safe for all the browsers and then we have to reflect this later so that we have all used our classes let's try messages message now we have it also here um yeah so like i think now we have like all the stuff that we wanted to do in this video here and let's have a quick look at our story so we have like created our new chatroom component we have like a new component for our chat message and or for the messages that we want to use we can scroll through the rooms and messages and we have made some smaller design improvements and we also modified our api message api service so that we filter by the room id and we add the user to the message yeah and we also have to yeah we have to turn this here around and then next video we have to admit like an event that we directly get displayed like a new message when we are online in this room um and then we are like getting closer and closer um to the end and we also have to do some refactoring of the code of css classes and so on but i think yeah we are on a good way so far also this video was like a bit confusing sometimes but let's go so then we can commit everything so we can say git com add upper a git commit and now we are in video number 15 and we can say edit chat room dot component and message or chat message dot component and made rooms and messages scrollable and also find a reflector getting messages for a room and at the user relation to it and then we can get push it hi so right after the video i realized that the leave room is also nearly never called because when we train clear room when the component is not destroyed so what i did was in the environments i always call first the room and then we can access the changes the simple changes here we can get the chatroom property and we get the previous values so before so when we for example lock this here out then this should always have the previous value and then we should always run into it so when we now log it out and you see we have the changes and then we get like the previous value and log it here out then we can see when we go to the console here so and we are in the first room and this is nile and we go to the second chatroom here with id12 and before we are here in id13 when you see we log out here 13 so then we disconnect here from the leave room and to make this clear that we are running into it i constantly locked here in the leave room and you see when we leave we try and we leave we join if i let it reload and you can see it here now again that there is nothing at the moment then if i go here we are like joining leaving and joining and so then we are leaving the previous room correctly so we can now remove like console.logs here in our api backend and we have here our chat room where we always when we change something we first call the chat service or leave and we can also make this into an if or we can just let it be so because null is not not bad and then it wears like the chat room then we join um a room so first we always leave so if anything changes here and then we join another room so then we can also commit this stuff here and then we can say for example we are here also in video 15 um or let's say implement leaf room on changes and then we can push it also

Channel: Thomas Oliver

Views: 491

Keywords: javascript, typescript, nest, nestjs, nest.js, typeorm, git, gitflow, node, development, api, observables, rxjs, nestjs7, bcrypt, jwt, authentication, git-flow, gitFlow, docker, docker-compose, pg-adminer, debugging, hot-reload, angular, angular material, angular lazy loading, material, realtime chat, real time chat, chat app, realtime chat app, live chat, live chat app, nestjs8, nest js 8, nestjs 8, NestJS8, NestJS, nestJS, postgres, angular 12, reactive forms, login form angular, register form angular

Id: Tz75HKy8WGw

Length: 51min 11sec (3071 seconds)

Published: Thu Aug 12 2021