NestJS Angular Chat WebSocket SocketIO - LinkedIn Clone [26]

welcome back to the linkedin clone in this video we'll be implementing the beginnings of the chat functionality for our project so as we can see we're logged in as two separate users and if i go ahead and i type something in and i click the send message button both clients receive the websocket communication from the server and if we go ahead and we respond we can see that we can start to have the beginnings of a chat application here so we're going to obviously extend it past this but it's good to just set things up so let's go ahead and get started and if we take a quick look at the nest js documentation here we're navigating to the gateways page and gateways they're just a way to it makes it compatible for the websocket connection to exist between the client and the server and out of the box it comes with socket i o and ws so we're going to use socket io so we'll just go ahead and start to install a few packages so if we open up our project here and we cd into our api folder we can start to download a few packages here and it's actually just recommended on this gateways documentation here so there's the nest js web sockets and the platform for socket i o and we'll also need socket io because that's the web socket we're going to be using so let's just come here and we can just say npm install at nest js slash web sockets and of course you could just copy it as well i'm also going to get at nest js platform dash socket dot io and that's just going to be the wrapper and the nest implementation for the socket io which will also use so let's go ahead and get that and let's just open our package json just to make sure things have been installing so we'll just wait for that to load and we'll check our packages so we see that websockets just got updated there socket i o and also the platform socket.io so that's exactly what we'll expect so what we want to do is we want to create a new module for this testing portion of the application oh sorry the chatting portion so we can just use the nest cli here and we'll just go ahead and we'll run a nest g for generate module and we'll just call this chat so let's just go ahead and get that here and that should just add it to the app module the chat module's there and our chat module itself it's pretty bare at the moment but it's just going to have the class with the decorator from typescript so let's go ahead and close this package.json up now we're going to need the gateway so let's also get that with an scli with an sg ga short for gateway and in this chat module that we just created we'll create a folder called gateway and we'll just call it chat and we don't want any spec files so we'll just go no dash spec and let's see what that's given us so it's added to the chat module for us for one thing and if we open it up we get this class here and it has this websocket gateway annotation and it comes with this subscribe message and it also comes with this handle message so what we're going to need to do is we need to we can't really work on this in isolation we need to work with the nest and the angular in conjunction with one another due to the server client communication so i know i've tried to separate the videos as best i can but this is one of the videos where it really relies on one another so if you're not doing angular and you're just following along with a nest uh you just need to it's just we're just using socket io on the front end so you just need to figure out how to do that which is going to be pretty much the same thing just in whatever front end you're using so in another terminal here i'm just going to cd into the linkedin front end project and i'm going to run a npm in store and angular has its wrapper for the socket io um called ngx socket dash io so we'll go ahead and we'll install that and while that's installing we'll just take a quick look here at what we're expecting so basically in the npm documentation here you can go ahead and you can you know configure the socket io um conf module and configuration and you can do this uh wherever you want in the app module or maybe the chat module or wherever you're putting it and you can just go ahead and you can just type in the endpoint for the application the base so let's go ahead and get this set up so we're going to have to create a few things here because in its current state we don't actually have the chat route set up or anything like that so we want to be able to navigate to the chat page and then we want to set up our um socket connection there so i'm just going to start off by adding a module so if we just take a look at our structure here before we create it ideally what you would probably want to do is have another module here for the chat module but the way i've set things up it's just going to be easier if i do it within this whole module mainly because we want to use the navigation bar in the same um in two spots so if we were to have a chat um module would need to have the navigation bar in there and then since we're using the navigation bar in two different modules would have to it'd probably be best if we created another module for the shared module and put it in there and referenced it like that and that's just a you know an exercise in refactoring and i just wanted to focus more on the more exciting things so i'm sure if you wanted to do that you could do that um i'm just going to go ahead and put it in the home module nested in there but again you can do this however you want i really just wanted to focus on the websocket connection though and not worry about too much setup for that so i'm just going to go ahead and i'm just going to use the ionic cli and i'm just going to generate a component so we're in the linkedin project so we can run an ionic generate c and in the home folder i'm going to put this in the components and in the components i'm going to have a chat component and i'm just going to go ahead and delete the spec file there because we've set up testing previously i wouldn't want it to interfere although it just passes by default so now that we've got that we just need to ensure that it actually is in the home module i know the angular cli does this by default but often times the ionic doesn't do that by default so we can just go ahead and get that chat component and just go ahead and get that in there so then we'll have access to you know things like for loops and ng4s and async pipes and stuff like that um and obviously that's just how you do it anyway so we've got that set up there now let's open our chat module up and actually let's start by opening our header module up and then making sure our routing is correct so for that i'm going to need to look into the oh this is the api folder i'm going to need to go into the front end project and open up the home routing module here and then i'm just going to go ahead and just highlight this here and do a shift alt down and rather than id here dynamic id i'm just going to hit the endpoint so we're in slash home slash chat connections so that'll be the route and then we'll just want to use that chat component that we just created so we'll be able to do that there and if we run an ionic serve we should get the beginnings of our application here so if i just open up the chat component uh let's see chat component here now i'm just going to add some style equal to margin auto so that's left and right b centered and then some margin top of 110 pixels now the reason i've got that is because uh the way i've set things up i didn't actually use an iron content where the router is going to route out things um so we need to skip the space of the navigation bar here so we can see we've got some sort of errors going on here and that's because we haven't started the server [Music] so let's go ahead and do that so we'll run an npm run start dev and let's just go ahead and add a picture here uh these are earring because i deleted the um pointers to the image but we're not too concerned about that so what we want is we want the ability to click on home and this icon here and messaging and then we want that to route us to the appropriate spots so we're going to need to open up our header for that so let's do that let's just go ahead and save that so if i open up the header component we can go to the linkedin logo and we can just do this on the button so we'll just add a style here of cursor to pointer and then we'll go ahead and we'll use the router link and we'll just set that equal to [Music] the slash home it's logo localhost 3000 or whatever if it's hosted home like as an absolute path and let's just go ahead and copy this because we'll use this in a couple other places right now it's already in our home page but i'm imagining we're navigated on the messaging tab and then we need to go back either by clicking the home button or this button here so let's go ahead and just add that down a little bit to the iron coal for the home here so that's that and then we also want one on the message so we can go get that on that line call here but rather than go to slash home we want to go to the absolute path of what is necessary in home but also slash chat connections and again if you want to have it in your own module that probably would be the better approach but you know that's quite simple to do and if you made it this far in the video series there'll be no problem for you so that's that and let's just check if there's anything else and we probably want just to have a cursor on this um drop down here so let's just go ahead and get that we can just copy this part now the styling and scroll down and on the iron coal we can just go ahead and add the cursor pointer here and that's just going to do some reformatting for us prettier [Music] so let's see if this works click on messages and it takes us to the component keeps the navigation bar the same and of course we can click home and we can click the linkedin logo to navigate so all we've done is we've just set up the grounding for us to implement our socket io connections so now we're in a position to be able to actually get the chat application going so i'm going to just do a control c on my angular bionics server so i can use the ionic cli here [Music] and i'm just going to generate a service and where i'm going to put it is in the home folder in the services folder and of course if you had a chat folder or a module you could just put in the services in there so i'm just going to run an ionic gs home slash services slash chat so let's get that let's just go ahead and delete that spec file once again okay [Music] so in the app module in the angular project this is where we can go to the ngx dash socket io and configure our connection so you will see that there is the configuration which is just referencing the end point and then there's also this socket io for with the config and we'll probably come back and refactor this but let's just start off with this so just at the top before the ng module declaration we can just go ahead and we can get this in here and this is coming from ngx dash socket dot io and of course we just want to change to the endpoint to localhost 3000 that's where our server is running and then where our imports are this is where we can copy the socket io config i'm sorry the socket i o module with our socket i o config so let's just get that in there and we'll probably just need to import that as well so we have what we need on the front end let's go ahead and return to our back end so we can set up the the way we're handling the connections and sending messages and emitting that new message so let's go to the chat gateway and one thing we need to do here is even though we've already dealt with calls the websocket connection is sort of like um it's in it's running in the same application but it's sort of treated as it's uh occurring separately to the api endpoints so we also need to have a cause configuration for that [Music] so we can just do that quite easily by having calls here and the website address so in our case this is just going to be a local address so actually this is going to be http slash localhost and we're using ionic so make sure you do 8100 instead of 4200 for angular and that will allow the connection between the two the front end and the back end without any cause issues so [Music] we've got that now we want to implement two interfaces or classes i'm not really sure what they are we need to implement the on gateway connection and also the on gateway disconnect and this requires us yes the interfaces but it requires us to um have a couple of functions here these are just sort of like equivalent to life cycle methods or something like that we want to notify the user when they've connected or disconnected so let's just go ahead and write that out i'm just going to go ahead and delete this one here for now just for the moment so we can start to what we what we need to do first of all is have an annotation here and it's going to say web socket server and that's coming from the nest js web sockets package and this annotation just allows us to state or have our server um so we can reference the server so we can emit the events from the server because websocket connection is essentially server to client um obviously you're making a request from the client but then you're pushing something from the server to the client sort of thing so we're going to have a server type here and this is going to come from the socket io package and we'll use that in just a moment but because we've implemented these two interfaces we're going to need to actually have the method so there's handle connection and what this will do is for now we'll just do a console log same connection made and we've also got another method here called handle disconnect and we'll just do another console log here saying disconnected so we have the handle connection and the handle disconnect we and we will be using these later on um eventually we're going to add some different rooms so different connections or friends on linkedin can talk to one another um and we're going to make some more updates like that so we're going to need to you know have the connection and disconnection because obviously we don't want to have all these rooms open and wasting server resources we only want to create the websocket connection if the particular connection is to be made as in the user is wanting to talk to another person so that's where we'll start to handle some of those but we'll also have this method where it can actually meet events from the server so to do that we need this special annotation which is the subscribe message annotation and we need to give it a name so that means when we call it from the front end it will reference this it's very similar to an api call just websock websockets essentially just builds up on the http protocol um so we can just go ahead and call this one send message and that's your function we'll just call this handle message and this will take a socket so it's going to take the actual um you know the websocket as in the socket connection between the client and the server and that's from socket io and then we also want the message that we're expecting so what we're thinking here is we're going to send a message from the client we're going to send it here and then it will be able to handle that socket connection and it can essentially emit a message so what we can do is we can say this dot that's why we have this server here so from the server we're able to omit and we're actually going to meet when we emit something um so we can send messages from the client but we also want to update the client with all the new messages so i'm going to have this admit new message and that's just going to be nothing more than the message that we've previously sent from the client so there's two different events occurring here the sending and the receiving of the message so with that that's more or less everything we need on the back end so now we can actually go ahead and just return to our front end and recall that we've made the now let me just close a few things up here so recall in the front end we have our chat service here [Music] so this is where we're going to interact just like in the http case where we're going to interact with our server um and our websocket connection through the server so basically for this we're just going to need to inject socket and this is coming from ngx socket.io and this is going to allow us to have a couple of um able to omit events so when we send a message what we want to do is obviously we're going to receive a message from the front end and we'll put this in the component in just a moment um but we don't really need anything back just in when we send the message not not straight away at least but what we want to do is we want to for the particular socket and the socket connection to the server we want to go ahead and we want to omit and we want to omit this send message event here so we can go ahead and send the message and that's expecting the message and that's pretty much all we need here that will handle um so then the server will emit its own um event here so we need to be able to handle that case as well and we're subscribing to that on the front end um in the component so we're going to be aware of those changes and that observable stream there so we can just have this here get new message and we would expect an observable back from rxjs and we're just expecting the string we might refactor this to a particular type later on but let's just keep it simple for now and we can just go ahead and this time we're going to have to return the message um because we access the socket and now we're expecting something from the event so the difference is in the first case we're emitting the message from the client um to the back end so from the front end we're going to send the message to the back end and then the back end is going to handle that's going to receive that send message and it's going to handle it and it's going to emit something back from the server back to the client and we need to detect that new message so that's that event's been emitted from the server in this case so that's why we're going to have this from event and this is just going to be of the type string and it's going to be that new message so because we're emitting that new message just gonna come back with the message so we've got the methods set up now we're going to need to use the methods so let's go ahead and do that let's open up our chat component and we're going to need some sort of form to be able to submit the text that we're thinking of sending so let's go ahead and do that so we're going to come back in like in the next video and extend this but really i just wanted to establish the connection between the two the server and the client but let's just go ahead and make this p tag div here for now and what we're going to do is let's just have a span and we'll just say chat room i'll chat room and then we're going to have this p tag and this is where we're going to have our messages so in the chat component in the typescript file we're going to have well we're going to have the new message which is an observable of the string type that's what we're getting back from get new message that observe or the string type so when we use that and consume that service method we'll be able to use it here and basically we can set up the subscription in the ng on init so we can just say um let's see now you wouldn't normally want to return from the ng on the knit um but we're going to we'll just make a note here because we're going to change very shortly um refactor unsubscribe so what we're going to do is we're just going to use that chat service so we're going to need that so we can get the private chat service of the type chat service and then we can access the methods on the chat service that we just created so we want to get the new message and we want to go ahead and subscribe to that and then for the message that we're going to get of the type string what we can do is we can just say we can have a variable here messages and this can be a string array and we'll set that equal to empty array so obviously we're going to need to persist this to data persist this data to the database but right now we'll just do it in memory and then in the next video we'll come back to persisting it to the database for the previous messages um and then also combining that with the new messages and then also having the rooms and then also we'll have the update the ui so it looks a lot cleaner but we need to get this initial boilerplate working here so this is where we can just say this dot messages dot push and we can push that new message here and we can save that so that means you know we'll have our messages here so that means when we return back to our chat component we can actually have an ng4 here so ng4 and we can let message of messages and then we have our uh singular message output in a p tag there and then we're going to have a form and we don't want this action but we do want to give it a template variable and give it equal to form but we're going to have to make this an ng form because we're going to want to have the you know it's like a template driven form so we can call this ng submit method and then access the form in the typescript and we can just say on submit now this doesn't exist just yet but let's just get the boilerplate off that on submit function and we'll just put that right below the ng on init here and we'll come back to our form so inside of our form we can just have an iron item here and inside so i just need to get emmet press tab and inside the iron item i use iron items so we can have our iron input laid out nicely and this needs to [Music] have the ng model property on it and the type of the input is just going to be text and this is where we give the input a name so we'll just call it message and we'll just make this required and that means since it's required below our iron item here we can have an iron button and we'll just say send message and we can just say disabled in the event that our form is not valid it's going to have a type of submit so the ng on submit um will be to detect that and it's also going to be able to detect this required field for the message to see if it's valid or not basically it just needs to be any string just not empty and you know let's just give it a shape of round and expand a block and we're going to come back to the ui later on but i just need something that's not completely horrible so let's just come to the chat component now so what we want to do here is on submit we want to we need we need to view the form so that template variable we set so let's do that and for that we're going to need to import the view child function here we've got form [Music] and we'll just call it form in the typescript which is of type ng form so we gotta get that in as well now this is where we can say for our own submit now we know we're going to have the on the form value we're going to have the message field so we can actually use some object destructuring to set the message variable equal to this dot form dot value so we can get access to that value and essentially if there's no message so if it's blank uh return so it should be disabled but we'll just have that safety function as well what we want to do is we just want to say this chat service we can send the message and we can just pass in the message here and we can also just run this form dot reset so i'm just going to run an ionic serve here and let's see if anything's broken so on the left screen here i'm logged in as john hotmail.com and here i'm going to log in as john2 hotmail.com sign in and i'm just going to click on messaging here and if i just type in hey here hi how are you doing we can see that the chat application is working more or less but if i refresh the page we see that we actually lose that information so what we're going to do in the next video is we're going to persist the data to storage and we'll be able to get that data so you can see the history of the chat and we're going to append the new messages to that we're also going to set up rooms so you know you have your friend connections all the people you're friends with and you can select uh your connection and talk to them and create a new room and start a connection between the server and the client for the websocket or the websocket connection and we're going to update the ui so you know we're going to have the image of who it is and things will just look a lot cleaner but i hope you enjoyed that video as the beginnings of the websocket connection and the ability to chat so adding chat in your application and in the next video we're going to extend this functionality so thanks so much for watching please subscribe to my youtube channel and i'll see you in the next video cheers

Channel: Jon Peppinck

Views: 730

Keywords: angular, angular material, angular 12, register form angular, login form angular, angular lazy loading, websocket, socket.io angular, angular 7 socket, angular socket.io, using socket.io with angular, socket.io connection angular, how to connect to web socket in angular, socket.io-client angular, how to connect to socket.io in angular, listening to socket.io events in angular, how to connect to socket.io server in angular, nestjs websocket, javascript, typescript, nestjs, nodejs

Id: qSlIX5tWvt0

Length: 40min 24sec (2424 seconds)

Published: Sat Sep 18 2021