NestJS: Add Message & JoinedRoom Entities & add according logic | Realtime Chat App | 14/17

hi and welcome back to the next video this is video number 14 and here we will just do something in sgs so we want to add like a message entity and a transform entity and also the accordingly logic um so both will have like many to one relationships to the user and the room so because message belongs always to one room and to one user but a room can have many messages and the user also and so we are later able to filter everything like we need for example when we have want to have like the last messages for a room when we can do this um we also add like the services the relationships and so accordingly and we also in our gate we implement which are in room leave room and add message and stuff what i have to say here is maybe we have to reflectivis in like one of the next videos because it's like really hard to now think of what we need and to see if it really works and to cut this into videos so here we have unlike the structure for our video here as always we first have a look at our video outcome when we read the user story for this and then we implement the story and close it so let's have a quick look to the outcome of this video here so here is nothing much to show because we are just doing some back-end stuff but we have now two new tables our joint room entity here which has like an primary id a primary key we have like our socket id we have like a many to one relationship to a user and also to the rooms so that we always if a user joins a specific chat room with a socket id we save this here and if he leaves we also remove it so that we then for example if someone adds a new message to this chat room then we can notify all the users that are online um then we also have like a new message entity that has like also a primary key the id the text the actual message then we have timestamps for create add and update ad so that we can sort this later um by for the latest message for example for chat room and so on then we have it also connected to many to one to the users so because one user can have many messages but one message always belongs to one user and the same goes to the rooms so message always belongs to a room and the room can have many messages so this is done and we also have added our gateway new stuff like for joining and leaving a chat room and also to add a message that what we will have a look at if it works in the next video when we implement this stuff in angular so let's have here look at our next video story here we are in video 14 and we want now to do some less js stuff so we want to add message and join room entities and we want to add logic to our gateway to join and leave a room and to also be able to add a message so that we can then later use this in our angular application for example we can then use where we and or the lifecycle events like envy on inlet or energy on destroy and so on or energy on changes to use these events here so our story is simple but this gets like a huge video i think um and you also you have to be aware that this here much simplified um in the story and yeah maybe we have to adjust this in some of the next videos um so the story is as a developer i want that the user is able to join and leave one of his chat rooms so as you remember our dashboard we have on the left side all the rooms of a user and then if you click on it then you have it on the right displayed so he should be able to join and leave one of this chat rooms it will also be able to add like a message to this chat room and for this we also need a message entity and the joint room entity to our api that we want to add here and we want to add some logic to our gateway so our acceptance criteria is we want to have a new message entity with many to one relationship to user and answer to room so each user can have many messages and each room can also have many messages then we want to have like a joint room entity where we can just track like in the connected user entity before um which uses at the moment connected to this room so that then we can send when someone else in this room adds a message that we can admit like an event to send this to this specific soccer socket id of this user so we need there also many to one relationship to user and to room and we want in our gateway to add some here like events for add message for also for adding a message to a room to join a room to leave a room and we want to update some existing stuff so let's go to our api folder you see i already started up so the application is running at the moment so we could go to localhost and we could log in and as always um remember that i sometimes you just reset like all the database and so on um so don't worry about this you have to do this maybe also because this is like a lot of in here but i do so now we have here for example one room then we just set a moment display here with jason and now we have stored this data in our database so when we go to our localhost 5050 and then we log in so this is our pg admin tool so for postgres and with this we can access our database and we can see what we saved here so we can go to our databases and we can see that we have here all our four tables and for example when we query this table here select all from connected user entity then we can see that now my user here user d1 the thomas here is at the moment connected we have the socket id so that we could send him a message right here some new rooms and so on um yeah and so this is done we are the threat gateway so the hand on hand on gateway connection and on gateway disconnect so here in our handle connection um we save present or connected user service with a socket id of a user and the user and on disconnect we remove this so for example if i close this here and then i here again you see now this is gone and so for example when we um create a room when we look who are when we get for example all the users of this room and then we look in our service our connected user service that the users at the moment connected if yes when we emit like a new rooms event to him so that then his list of rooms on the left side and the dashboard gets updated automatically so in real time so now we want to add like some entities to our application so let's close this so that we don't have as much logging here so let's say docker compose up and now we can you know we can just stop it because when we are developing then we will just have errors all the time so now we are here in our chat module and now we can maybe make first some folders so we have here our connected user and then we can move the entity and the interface into it then we have our room and now we also want to make our joint room so let's call it joint room and where we want to have all the users listed that joined the room so we can make here like a new entity so we say for example joint room don't entert.s maybe i will rename this later in some videos um i have to think about this a bit so we can just say joint room entity and we annotate it with that entity from typeom so it persisted and then we can say we have of course an id which is a number and it is a primary generated column then the same as in our connected user we have our socket id which is a string so this comes directly from socket io then because where every connection has like a unique id and then we have our user so our user entity and here we want to have like a many to one mapping so we have here our user entity and then we can say for example we name it later client rooms and we say add joint column and then we also want to have like the room that we joined or that the user joined with this connection and so this is like also many to one and then we can say this is room dot joint users and we can say this is like a simple drawing column also and then we can make an interface for this so we say joint room dot interface dot ts and we say export interface joint room interface and then we say id is optional which is a number we have our socket id which is a string we have our user which is a user interface and we have our room which is a room interface so we can now add this to our user so let's go to our user entity so in our user entity we let's close the other files so in our journal entity we want to go to the joint rooms from our user so we can say here joint rooms which is of joint room entity this is an array because it user can join many rooms and here we have like a one-to-many mapping so we joined room entity then we can say for example current room and this is joint room dot room and then this here should also be fixed and then we can do the same for the room entity so this is like a joint room entity array and here we also have a one-to-many mapping and we map this to the room and then the second entity that we need here is like our message entity because one room for example can have many messages [Music] and a message is always belonging to one room and the same goes for the user so every user can have many messages but one message always belongs to one user so we can say message and then we make a new file message enter and then we can simply say export class message entity and we annotate it again with that entity from type o m and then we have like always our id which is a primary generated column then we have like our text which is yeah basically the message that someone sends into this room then we have like a relationship to the user and this is that one that we always have to store like the user to the message so that we can for example later display in our front end if i wrote a message or someone else so for example like in whatsapp you can always see who wrote a message so we need to save this also here so we can save the user entity and this is our user dot messages so we have to create this one so in our user entity we will now have also our messages which is our messages message entity and an array and here we also have a one two many mapping message entity and this goes to the user so why is it not yeah so it must be plural because we have many so then this also gets like a at join column and then we also have a room entity so this is also many to one because one room can have many messages but one message must always belong to one room so this also gets a at join table now we add this to our room so here we have also our messages array so this is like our message entity array and this also has a one to many mapping one to many mapping and this is our message entity so this goes to message message dot room so then our message we also want to save like the time when it was created and when it was um for example updated if we will do this later at the moment don't think so because this will then get to you to the project maybe we can make this in a follow-up or something like this and so we make this here like the same that we made in the user or in the room i think um so that this gets updated and created on default so now we also need for message like an interface so we can say message dot interface dot ts and we simply say export interface message interface and then we have our optional id we have our text which is a string we have our user which is a user interface we have our room which is a room interface and we have our created add timestamps and our updated at timestamps so we can save this and then we can quickly check our room entity we have our joint users and we have our messages so our relation seems to be good so let's have a quick look at our user entity so we have here our connection so when we enable or when we connect first to our gateway then this gets set so that we can push rooms we have our joint room so where we are online and we have our message entity um so all our messages so that we could also later display like all messages values and actually we i'm not quite sure if we will need this stuff here um that's good to have at the moment so then we need to now we have all our models here and we have to make sure that also all the imports because i created here new folders got updated so let's have a quick look through all the files and here we can remove the many too many this is the false import um and then we can have a look here in our gateway here so you see here the room interface import is wrong and the connected interface also so let's re-import it and then save it and let's have a quick look if we have also here an issue but this seems good and now we also have to add our entities to our type or and feature module so we have here our room entity we have our connected user entity we have also our message entity and we also have our joint room entity so let's format it a bit so that it gets easier to read and now we need to do or we need to add some services so that we can later interact from our gateway with our database for example so here we are at the moment of our connected user service and our room service so now we can for example create our joint room service so let's cd into our api folder and then nest generate service and then we can say that we want to go in our chat module you want to go into our service folder and then we want to create like the joint room service and then you can see we have it here and this automatically gets imported into our module so then in our trend room service we first need to inject our repository so we have add our constructor here and then we say inject repository with the joined room entity and then we make it private read only joint room repository and this is from type repository for the joint room entity and then we can do here our basic stuff so that we want to create something we want to find by user we want to maybe find it by a room so for example here we joined room service um when a user joins a room and then has a message when we want um and then we get this into our gateway and then we add this message to the room then we want to find all the users that are currently connected to this room so that we can then send or admit like the message to them so we need to defined by a room then we can also say delete by socket id so for example on disconnect and so on that we then delete the entry in our database and we also want to have like a delete all that we can call when we want to remove all the users for example on startup from this table because we don't want to have like old stuff in our database so we can say for example here this dot joint room repository and the easiest thing is to use the query query builder and then we simply say dot delete and dot execute and then this should remove all entries from this table for the delete by socket id we can say return this dot joint room repository dot delete and then we can simply say socket id of course we first need to have it here as a parameter then in our find by a room we want to have our room and then we want to return like a promise a promise and this is like our joint room interface array and we can simply say return this dot joint user joint room repository dot find and then we give him the room so this is easy because it's like the same name here for the parameter then for our property then we want to find by user so this is basically the same code as beneath and here we also want to return a promise with joint room interface array so we say return this dot joint room repository dot find and we go by user and when we want to create it so we want to create a joint user which is a joint room of course joint room user whatever and then we want to return like a promise from joint room interface and here we can just say return this dot joint room repository dot save and then we use our joint room user and we rename this to joint room so now we should have like a service here that we can use in our gateway to do all the stuff that we need and we also can create like a message service so we say nest generate service then we go in our service folder and then we can just name this message and here we can for example then create a message find all the messages but this is probably something that we have to do in the next videos because otherwise this gets too long so let's just add like basic um stuff so here we also interact our repository so we say at inject repository for the message entity and then we make it private read-only message repository from type repository message entity and then we say async create and here we want to create a message which is from message interface and we return like a promise also from message interface and then we simply say return this dot message repository.save and we can for example say here also this dot dot create so that the annotations work and then we can say async find messages for room so just if we are already doing it we can try how it should work so we want to find my room and we want to specify pagination options and then we get in return like a promise which is pagination and then we have our message interface so we want to return the paginate from our nesjs pluginate package with a message repository our pagination options and then we want to find by a room and we will also i want also to return the user and broom relation maybe one use a room with a [Music] room room relation uh i think it must be relationships so that we then return this with the relations but we have to check later if this actually really works so now we have done our services so the basic stuff that we probably have to add like a bit of stuff later in the next videos and for example i think to our room service we also want to get like a room so we can make an awesome function get room and we need the room id which is a number and we return a promise for room interface and then we say just return this don't room repository dot find one and we say we want to find by room id and we specify some options relation with users so that we then for our room entity have our we have to re-import it so in our room where are we room entity we have our users that are there so now we can i think go to our gateway and let's have a quick look so we have to yeah this file is getting a bit large so we did have to think about how we can split this up probably so one of the first things when we emit module when we delete all from our connected user servers because we don't want to have our data and what we can also add here is we want to also remove everything from our joint room service so we have to use these here also in our constructor so we say joint room service is our client room service and then we have our um also our message service which is our message service and then we can use them here and here we also want to delete all so all the old records and we restart the application for example so then we can look for example we have here our create room and before [Music] we were just we have to adjust this here also so we have to substract page minus one to match the angular material designator because otherwise in material we have like page first is like zero and here it's like one so we have to to subtract it again so like we did before in the last videos but i think here i forgot it so this is room stock meter dot current page minus one and then we have to add like some new stuff here so we have our paginate rooms and we always have to add when we have like an incoming page request from angular um we have to modify our page here and we have to check that the limit is not above 100 and so we could not do this but it's better and here we have to address the page because an angular like first page is zero and here first page is one so we always have to adjust this and so we could handle this like in an own function so we can say handler incoming page request and then we want to take here our page interface and then we can say we want to do exactly the stuff that we are doing here and we remove it from here and move it to here and then we just return the page and then here we can simplify this so we save this dot handle incoming page request and we get him the page and then this handles here like the track and we can see are we doing this here somewhere again at the moment not so let's hear the empty stuff so now we have our paginate rooms and now we can make our join room so we say subscribe message to join room and then we can say async on join room we have our socket and we have our room that we are joining and then for example we want first to have yeah we want to return all the messages to this user so that he can see all the messages so we could say this dot message service dot find messages for room and then we specify here the room and then we want to always have like the pagination request so the limit we want to have the last 10 messages for example and so the first page so we limit it to 10 and we want to have the first page so then we get like yeah page number one and maybe we also have to yeah we have to check this later um probably have to sort them here by the um created date so that we have them in the right order so that the last message that was sent to this room gets displayed at last to um in this chat room so then we want to save our connection to the database so we say await this dot joint room service dot create and then this wants a joint room from us so we have here our socket id which is our socket dot id we have our user which is our socket dot data dot user and we have our room from here so here we save connection to room and then we want to also send all the messages for this room to the connected user so we say send message send last messages from room to user so we say simply await this dot server dot 2 then to this specific socket id and we emit our messages event with the messages and this is when our paginated messages object from our service and so we have to say our messages dot meta dot current page we have to subtract again so we have to make one because here our pages are always like one bigger so then we have like our join room and now we also need our leave room so we could say subscribe message leave room and we can say async on leave room we have our socket and then we simply want to remove our connection from the joint room so we want to remove connection from joint rooms so we can simply say wait this dot joint room service dot delete by socket id and when you see our socket id then we could also specify like our um here at message so that we can later use it so we say subscribe message and we can say add message and this should add like a message to our room so we say async on add message and we have here our socket and our message for message interface and here we have our created message which is a message interface and we can say await this dot message service dot create then we can pass in here the message that we got and we also add like the user from our socket so here you want to have like a message and for the interface we have from our front end we get the text we get the room and the user is what we will what we are adding here from our socket data so that we save it correctly then we can for example get the room and we say wait this dot room service dot get room and here we can use our created message dot room dot id then we would have our room and we could also get our joint users for this room which is our joint room interface array so that we can then loop over it so we can say here await this dot joint room service dot find by room and we simply use a room that we got here before then we would have our joint users and then we have maybe fly to do and then we want to send new message to all joint users of the room currently online um yeah so i think this should be like all for this year so we have to do this then specifically when we add the logic to our front end here for this and then we have to you know think about it how we want to do it so either we push like all the messages or we add make a second event like um at message that the um front end is listening to him we just and this message at the bottom or we send like the last messages and so on so we have to um do this like in another video where we handle also the front end stuff um yeah let's make a quick look um if we can start it correctly so when we say docker compose up if everything goes well and then in the next video we will see if we can subscribe to all our events and so for example the relief room or drawing room event we can yeah so you see we have here also some issues um let's see if we imported everything here correctly so this seems good this seems also good then we have our joint room entity looks also good let's also give our message entity it's also good with our room entity also current room message also work interface and we have our connected user service okay here's like issue because we changed like the folder structure a bit so let's import it again correctly here all seems fine you know our message service probably also because we just created it and the room service could be like in stake no so let's see if we have like all we have our message we've got to ungroup entity so we have all our entities here specified so let's try to start again and let's see if it now starts up without an issue so right now it seems better so we have here cannot find module room.entity so in our in our user entity we have to update this so let's go to our user entity because we change that room entity so now see if it works well so our front end seems good our back end also so let's have maybe a quick look on localhost and also to our database here or let's have a quick look at here we can still use everything like before and then our next video we want to have a quick look [Music] also when we implement the front end software we can access all our [Music] messages here from our gateway so that we can then check like the aggie night rooms the drawing room the leaf room and the administrative events so let's commit our trainers here or first check against our user story so let's have a quick look so we have like a new message entity with many to one to user and also two we have a joint room entity with many to one to user and two rooms and we have like a new add message showing women leave room for our gateway and we update like existing functions and you know maybe we have to also refactor some stuff in the next videos so we can take it at upper a and we can commit with message and we say video 14 and this was at message dot entity entity and joined room dot entity and add to gateway message join room leave room and create services accordingly and now we can get push everything

Channel: Thomas Oliver

Views: 276

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: tSqVeCH4URw

Length: 48min 27sec (2907 seconds)

Published: Tue Aug 03 2021