Create Chat Application using Angular and .Net (SignalR) | Group Chat Feature | Angular Project |

hello everyone welcome back to my channel in this today's video I am going to guide you through the process of making a chat application using.net and angular for the dotnet part we will be using something called as signalr and the signalr will help us to send message to the user in real time so we'll also explore about what a signal are in detail and we will put our knowledge into action by building a chat application from scratch so let's get ready to learn with me I know it's going to be fun and educational right for all of you so before starting the coding part let's see a quick demo about how this application actually works so this is how the home page looks like so we have a welcome to chat Hub page where you have to write your display name and room name to join this chat Hub so as you can see that this button is disabled because we have added a small validation that users should add display name and room name then only he can join the room so let's add a display name here first let me add it my name Shashi and I will add a room name as JavaScript so once I added these two details I can click on I know this button gets enabled so if I click on join so I can see this this is how the chat Page look like okay so on the top I can see welcome to the JavaScript group and on the left hand side you can see the connected user so right now there's only one user who is connected and that is me Shashi and on right hand side you can see the message which is coming from the let's program bot that is so she has joined JavaScript okay also you can see on the top hand side we have this Leaf chat Button as well that once you click on this Leaf chat you will be exited from this chat group okay so that's all about how the user interface looks like now to do the actual demonstration we need to add one more link so that we can just show how exactly this will work in real time so let me take one more browser okay all right so as you can see on the left hand side I am already connected so she's already connected to JavaScript group and over here I need to add a new user so I will add Abhishek here and I will use the same room name because this is very important the room name should match and once I click on join I can see that now the connected user chains to 2 and also on the left hand side so she can see that Abhishek has joined the chat Group which is Javascript and Abisha can say his message as well okay now I can start typing and you can see on the right hand side Abhishek will receive the message in real time so here I am writing hello so once I hit enter you can see the message is real time and same thing Abhishek can do as well and Shashi can receive it real time [Music] see I'm able to type your how are you and once I hit on enter the message is getting real time okay and for example right if the chat is done between these two so what they can do right suppose Abhishek is done with the chat and he has to leave the group so he can click on leave chat okay once he clicked on leave chat you can see again I have displayed one more message for Shashi that Abhishek has left okay so this is what the beauty of signalr is that whatever action happens it's all real time all right let me show you one more cool feature about this chat application in this chat application we also have a notification feature for example if I am trying to join this room and there is a user who is already logged into this group then he can see a notification on the top let's do a quick demo about the same so here let me log in with the first name Shashi Kumar and let's use the name uh the group name as JavaScript I joined here and I can see a notification for myself that Shashi Kumar has joined the group let me do the same for this window as well I will log in Via Abhishek and I will use the same room name and just have a look on the on this website that you will see a notification so that Shashi Kumar who is already logged in he will be notified as well that one more user has joined so once I click on join you can see that I'm getting a notification live notification and also I can see this connected users are getting updated let me add the third user as well so once I click on join I can see again notification let me add the fourth one as well and see again I'm getting notification in all four windows and this is all real time not just that if you leave the chat room right still you will see a notification if I click on leave chat see I'm getting a notification that Shashi has left let me uh do this one as well which is deepali if I leave chat can you see deepali has left the room let me do for this one I'm getting Abhishek has left the group and the last one is being that okay for me I won't be able to see you know right because I'm the last one so once you leave chat see that's how we have implemented the notification as well live notification whatever happens so we will display them live to the users also if you wish to join the room again so you can do that again by clicking on this join room now once you click here you will again on the same page and you can do the same click on join and that's it I know you guys are very excited to start this journey of learning signalr and implementing it by creating a chat application but before starting the video I will highly recommend if you guys have loved my content then you can subscribe to my channel over here and there is also a join button here if you are interested to become my member so that you can get Early Access for my upcoming videos so you can get that as well alright guys so let me take a moment to introduce to you about my new website what I have created which is let's program blog if you guys are passionate about coding software development and staying up to date with the latest tech Trend then you are at the right place do not forget to visit our website at let's program dot in for in-depth article tutorials and much more also you guys can subscribe to my newsletter just you need to add in your email address and you can subscribe to it so whenever there is a new article I add you will get notification for sure on your email ID okay so let me start with the coding stuff right now so I will be creating getting a new DOT Net 7 web API project so let me give you the name as chat application YouTube okay YT okay and I'm choosing this web API project and let me just choose a destination for it let me add it so I have choose the folder location and let's create the application application is created here so this is how the application look like so first of all I don't need this controller so let me get rid of it the control is deleted I don't need this as well so let me remove it okay so this is how your project will look like so first of all let's first see what are we are going to install before starting the project so first we need a nugget package which is a signalr so you can directly search for it so as you can see I am installing this package microsoft.asp.net dot signalr which is 2.4.3 version so let me add this to my project all right so and also I need to configure it in the program.cs so let me also do that so here I'll just say builder.services dot add signalr so this will add all the dependencies for having the signal out all right so let's just first try to understand what is a signalr okay so a signalr is a library that can be used to develop a real time web applications okay so we are making use of the signalr in between okay so let's take an example right so suppose here I have a dotnet application okay in this dot-in application what I have I have added a signal app okay so the small one is my singular so this signalr has something called as Hub okay so this Hub is nothing but help us too so Hub is this intermediate okay so this is intermediate between our server and our client okay because of this Hub we are able to that real-time communication okay so what happens is this Hub helps me to communicate so for example here I have three client client one so I have second client here and I have one more client okay and all these three clients are connected to my to my Hub okay so whenever my application launched right so they all three are connected okay so what happened as soon as I receive any message okay I receive a message I received something from the user run so this Hub transports that to all the users okay because they all are connected to the same Hub okay so this is what the Hub importance is in signalr all right so signalr uses this Hub to communicate between client and server okay so Hub is a component that is hosted in your asp.net core application all right and this Hub sends message and receive the message from client using some remote procedure call okay so what happens that I will show I will demonstrate that how to actually communicate like how a client communicates with this Hub and how Hub communicates with your client okay so all that has to be done in this tutorial I will be explaining you in depth okay so first of all we have to create this hub first okay so let's go in your application and create the Hub okay so let me add a folder here and give it a name as Hub now let's create a chat Hub class okay so this is created and now we have to inherit it with microsoft.asp.net core dot signalr okay and in that we have this Hub okay now all this startup is created we have to map it as well in the program.cs so let's go here and let me remove this unnecessary thing and we'll have to map it pressing app dot use endpoints and in that let's add this endpoints okay so let's add this endpoint and then we'll say endpoint dot Point dot map so map Hub and you just have to import your chat Hub here and we'll have to also specify the path which is Hash chat that's it okay so let me get rid of this error so yeah I'm good so in this way you have configured the chat Hub as well and now we'll we can add our all the code which is required to do the communication between clients okay so the first thing what I will be creating is for joining the room okay so if you remember the demo right so we have to join the room first okay so we'll creating that first so let's create that method by saying public assay okay a task and we'll create the room name as join room okay and to join this room that I need to I read two informations the first information is that who is the user and what is the room name what you need okay so for that let me create a model very quickly here let me add a model user room connection and let me add that okay let me just change it okay let me rename this as well okay so now let me add those models so the first will be of type string and the name would be the room name okay or I can say the user first and the second name is the room okay so this is my user connection row and this is what I will be passing it to this method user connection [Music] and now inside this word I will do right so we have access to all the methods so here you can see group so we have this group which is coming from Hub okay so we can say group Dot add group a sync okay so the benefit of this adding this Hub is I am able to access all the things which is part of your Hub okay so I can access my context where I can get the connection ID so it's connecting to my room so I can say context.connection ID okay and I have to pass the group name as well which is coming from user connection which is coming from the user basically so group name will be user connection dot room okay also once the user is added to the group we can notify the client by saying await clients dot group so to who to which group you want to notify so I will add that again user connection dot room and then I will say dot send a sync okay so I want to send the message I'll say send a sync and I will give the method name which is receive message [Music] okay and also I can provide who is sending this message okay so I can give that information as well so I think this is sent by let's program so I'll just say that let's program bot okay and also I can specify what message I want to send so I want to send the message that a user is connected okay so I can add here user connection dot the username okay again give the message as has joined the group okay so in this way we are able to send this message to the user once he joins the group also what I can do is I can store all this user Connection in my server as well so let me create a dictionary for this user connection and I can store it in my so once the connection gets start so all the connection will be stored inside that okay so for that let me create a dictionary for that so let me add it private read only I dictionary of string so string will be nothing but my connection ID and I have to store the user connection okay so this will be my user connection let's give it a name as connection and same thing I have to inject it in the Constructor so let me do that okay so this is added and now what I will do right once the user is added to the group I will also save it in my collections let me add the context ID okay so this is my connection ID added and I will just pass this user connection which is coming from on the top okay and that's it okay so we have added it here so now as we are injecting it here so let me add the dependency injection for it in the program.cs so let me just add it just below the signalr so Builder dot services dot add a Singleton so I dictionary of string comma user connection okay so this will always create a new instance [Music] all right and now this is in this way we have configured it successfully in in the program.cs as well so now this will be injecting it now we can inject it easily in our Hub okay and this will store our user connection information now the joint room is done okay now we have to design now we have to run design we have to create it for sending the message okay so for that let me also create it saved by saying public I think task send message okay so let me add this message string message and now what I can do right I just have to send the message okay so for which user I want to send so I can get that as well so first of all I will check it from my connection so connection dot try get value as this is my dictionary so I have to check for this connection ID so context dot connection ID if you have that then you just pass it inside this user connection [Music] and then we can just add it in the in the client group the message so clients.group so for which room you want to send the message so you can say user connection dot the room okay dot send a sync okay so we have to specify which group suppose someone sends a message okay so this will take this message and this will check for this connection ID and it will get that room information from there okay and the client will send that message to this particular room which we have room or you can say group okay so this will be sending specific to this particular room and send a sync what you need to say right you just have to say the method name as receive message and you can pass user connection dot user who has sent the message then you can pass the message in the second argument and in the third argument you can pass at what time you have sent this message by saying date time dot now so you can also send the time at what time the message was sent okay so in this way your second method is also done now what happens right so whenever my user is joining the group okay so and I want to uh send like how many users are connected in my group so I can do that as well by creating a new method so let me just do that below send connected user so we just need to take the room name and based on the room name we will send the list of users so what we can do we can say where users so we have this connection dot value which is my dictionary so from this I will do the where condition that where where my U dot room is equal to equal to the room which I will I'm checking for okay so send this whoever users are present in this room I have to select the users and I have to send it okay so that's it so in this way I will get all the users inside this and now I can return this to the client by saying client dot group so which group you want to send this information so that is what I will have to specify as a room okay for this room you have to send a sync and then you have to specify the method name which is a connected user okay and give it your value what you want to pass to the client that's it okay so now what method what this method will do actually let's check that so you will send the room name but for which you want to get all the list of users okay so this will take that list of users and this will return it to the client and clients will be uh looking for this particular method name okay which is connected users and this will be invoked in the angular and then angular will receive all the list of users okay so once I will create the angular app then this method will make more sense okay so in this way we have created three method which is join room send message and send connected user now for example right so someone is leaving my group okay so I have to handle something else right if you remember the demo so once I was leaving the group I was able to see the message that a user has left the group okay so for that I need to handle it by there is something called as a method on disconnected async so there is a method already in this Hub class so we have to override that method so let's do that so we'll say public override task of on disconnected async okay and in this method we can check for if there is any exception you can just pass it okay so exception is there so you can pass that and again you will check the same thing okay for which connection ID you want to do that so again I'll do that if there is no connection dot try get value so we can get the context ID from there context dot connection ID so for this one take it out user room connection dot connection room connection or whatever you can take the name okay all right and I can return based on disconnect a sync and I can just pass the exception if there is any okay and once this is done right we have to send the message as well so we'll send the message to the group by saying client dot group and we'll pass the user connection which is coming from the top the room connection dot to which room you can specify that and then you have to send a message so I'll say send message async and again give the method name as receive message and we will part the first argument which is my let's program bot and second argument will be the message what I need to send it to the user okay so this will be my user connection dot the user has left the group okay also what happens right so once the user has been left the group I need to call this method okay I need to call this method okay that will send the connected user so I will call that method here send connected user and I have to just pass the room name so room connection dot the room okay all right and now once that is done so we just have to say return as this is a returnable method so I'll have to again say Return base Dot on disconnect a sync and we can pass the Excel if there is any that's it okay so once this is done so we will be able to send this message to the client as well that user has left the group okay one thing I have missed it in the join group that I have not sending the connected user so if you see right once the user joins my group at that time also I want to update that connected user correct so I'll have to send that as well so let's call that method again await send connected user and I can pass the name of the room that's it all right so in this way I am able to create all the required methods that is join room send message on disconnected and the connected user so this was all about what we have to create in the backend side now I will show you how what we have to create in the front-end side to access all of these messages all right so now it's time to create our angular application so I will be creating the Android application inside this backend itself the backend server itself okay so let me just go to that location so this is my chat application YT this is my solution so if I go inside this so this is how it looks like okay so let me open up a terminal in this folder so this is my folder and in this I will be creating the angular application so for that how do we create angular application the command is NG new and the name of the application so I'll just give it a client app okay and hit enter would you like to have routing yes we will use routing and let's use the default CSS and hit enter so now this will install all the necessary package and our angular application will get ready in just a moment all right so our packages has been installed successfully let's go in the application by saying CD space Client app and let's open this in the vs code let me Zoom this a bit and now we are ready to go so first thing what we need to do right we have to install a package called as Microsoft signalr in angular itself so because every installed a new get package in backend we have to do something similar in the front end as well so let me just install that first npm install and this is the package what I was talking about at the rate Microsoft signalr and hit enter okay so the package has been installed and you can see it in the package.json as well so this is what the package looks like the version is 7.0.11 also I will be using a pop-up so I will be using my own npm created package which is NG angular pop-up to display the toast message so npm install NG angular up okay and let's hit on install all right so these two packages has been installed and you can verify them in the package.json all right so now let's try to create the components what we will require to do this in this application so the first component will require is the chat then we require join room and then we required a welcome page so how to create a component it's very easy by saying the command NG G for Generate C for component and the first component is chat and this ask always for the first time so always say no yeah this has installed your first create your first component in the SRC if you have a look so in the app it will be creating a chat component here for you okay I'll create the rest of them as well the second one is join room created the third one is the welcome okay so as you can see on the left hand side I have chat join room and welcome page created let me also configure the routing for all these three components so I'll go in this const routes and I will configure the routing here by specifying the path so the path for join room will be like this join hyphen room and then it should load the component which we have created join room component okay then we have the second route which is the welcome page and we have to load the component component name welcome component okay and the last one is the chat so the route will be chat and we have to load the component called as chat component okay and if the part is blank okay if the path is blank then I have to redirect my page so I will redirect it to the join room and this should match the path so path match should be full it should exactly match the path okay that's it so we have our we have configured the routing as well for our three components okay and to use the routing to see the effect of the routing we have to go here and make use of router Outlet so in the app component.html I will remove everything what is there already and I will just add the router Outlet okay so no need to close so now we angular has a self closing tag feature so we are using that here so this is a self closing tag so this is our outer Outlet okay all right so now to run the application so we have to hit the command NG server and let's hit enter so this has compiled your application successful now we can go on this port to see it okay so I can see that joint room works and let me just check if the routings are working or not so let me go to the chat yes chat works and let me go to the welcome page yes welcome also works so now we are able to see that all the pages are working so now what we need to do we have to design this joint room page okay but before that we will be using bootstrap in our application so that it can make our life little easy so to add a bootstrap in your application you have to copy these two links so let's copy this link first copied and let's go in your index.html and just paste it here I'll copy the second one as well the JS file and we have to copy and paste it here just below the body okay so once this is done now you will be able to use bootstrap in your application now let's go in your joint room component.html and let me remove this things and I will be pasting the code snippet here all right so this is how the code snippet of uh The Joint room looks like again so we are using bootstrap so that's why we can see all the class name which is coming from bootstrap itself the container row cool md6 and all of those okay so let me just explain you that what this snippet is all about so we will have a container first and in that we will create a row where we have this cool MD set where we will add our header with this welcome to chat Hub and then we will have a sub header which will say that please join the room to start chatting okay and just below that I have this card and I have put a margin as Y which will stop and bottom as 5 and the the card body we have it as a form okay so this is how the form will look like and in the form I have added two fields which is the first one is my input which is my display name and the second is my the room name where I will be adding the room name for the user and just below that I have a div which has my button which says that join okay if you guys need this code then I will highly recommend you guys to become my patreon member because all my patreon members get this source code so as you can see that this is my patreon page of let's program and here if you go that I have already added this post about this chat application with all the description what we need and all those all you need to do is you just have to specify your GitHub ID here and I will give you access to this particular code base all right so now let's just talk about uh so once we save the changes right now you can go and check your sales so this is how the page currently looks like so we need to add some more CSS to make it more beautiful so for that what I will do let me just take some code Snippets from my CSS so let me just add my CSS here and once I save the changes now if I go here so I am able to see this page so this is how it looks like now now I just need to make it in the center of this page so let me just go in my vs code and let me add a offset so I will be so let me add that so this will be offset md3 okay and save the change and now this is in the center of the page so this is how the page will look like so for now here this is my form so I'll have to create a form as well so to create a form in angular so I have already did a lot of videos on YouTube so you can go ahead and check out that but if you're still new to this so still not a problem I will show you how to do that okay so this is my join room component and here I'll have to initialize my form first okay so let's create a form first so I'll say join join room form and this is of type form group okay so as you can see it is imported on the top as well all right and now I will have to add a Constructor or if you don't want to inject it in the Constructor so there is a new way of doing things which is we can do that so for example I can inject the directly form Builder by saying inject okay this inject is coming from angular slash code this is the new feature coming in angle I think this feature is cave after angular 14 to 15 if I'm not wrong okay so now you can directly inject your form Builder so you just have to say form Builder and in the NG on in it so let me implement the interface on in it and in the online I will be initializing my form let me copy this and paste it below this and in the NG on in it let me initialize the form by saying this dot room equals to this dot FP which is my form Builder dot group okay so I have to group the form so I have two Fields so first one is my user and I will also add the validator validators dot required and the second one will be my room again let me add the validator for this as well validators dot require okay so my form is ready in the TS now I have to do the same thing something similar in the TF in the HTML as well so that this form gets connected okay so what you will do right so in the form here you will have to import you will have to add sorry form group okay and you'll say why the form group is not helping me in the intellisense because to use a form first thing you have to do is you have to import reactive form module as we are using reactive formula let me add that here so reactive forms module okay so once you add this reactive form model now the intelligence will work for you so here I will just add that form group see now it is working and give the name group name which is my form join room form okay so the form is ready now I have to bind my form controls so for that I have two input so this will have my form control name and the name was user and for the second one form control name would be room okay and now this will be my button let me just uh make it little changes here yeah so this is my button join room so I will have a click event here click and this will be my method called as join room okay I haven't created this method so that's why it is showing error so let me create the method here so I can say join room okay so once I do that right my error is gone okay and what I will do with this join room let me just do a console.log if my form is working or not so I'll do console.log my join room form dot value okay so I can check the values there let me save all the changes and let me just check in the console if there is any error so the compile is success and now let me just go on the browser to see now let me open up my console as well let me Zoom this a bit and let's go in the console now if I add a display name and if I add a room name and if I click on join so I can see I am able to bind my form values which is user and room okay but one thing what I'm not liking is if I try to click on join I can still see the empty values okay which means I have to add the validation so I will be using the validations to disable this button so that user will not be able to click it okay so to do that right I will go on the button and I will use a attribute called as disabled okay and I will say join room form dot invalid okay if my form is invalid then please disable the button so if you see now I am not able to click this button see I'm not able to click if I add the correct value and then if I be able to see the button get enables and now if I click on join I can see the values as well okay so the form is ready for this join okay so now it's time for us to design the chat screen okay so now what will happen right so whenever I am on this join page whenever I click this join so I have to Route it to the chat screen okay so how can I do that so let's go in your TS file and you have to again inject a router service so router equals to inject not this one router okay and now what you will do right so once your form is valid then you can say this dot router dot navigate okay and you have to specify the route where you want to go so for p it's chat okay so versus either click on join room he will go to the chat page so let's see if that is working so let me put my display name and the room name and if I click on join see I am able to come to the chat Works page okay now let me just design that page right now so again I will be using the code snippet so let me just do that all right so this is how the the screen looks like like this is what the HTML code we have for the chat screen okay and also I need to add a lot of CSS I know because this requires a lot of let me just show you how it looks without CSS so if I go in the browser so this is how it looks like for now okay so we can say welcome to dummy room and all of this user type message and the connected user okay so I have to write a lot of CSS okay so what you can do right you can just follow the code snippet what I will provide on the patreon and you can take it from there so once I add the series can you see there is tons of CSS what I have added to implement that so here you can see I can you guys can just take a screenshot or you can just pause the video and just you can write down all the CSS if you guys need it so this is how the CSS side looks like okay so this is what my join is my online button my image my inbox people inbox message topspace recent heading search bar this is my heading search what is on the top okay so this is my H4 heading tag whatever I will be creating all right this is my search bar inbox this is my channel that people in box chat and I will keep all of this for you in the video but if you still want it you can take it from the patreon directly or you can just become my member and you can just ping me on telegram or Instagram and I can just give you the access for this particular repo okay so once you add this CSS now if you go on the browser this is how it looks like okay so we have the header on the top we have the sleeve button the connected user the dummy connected user the message to type and we will also have the chat screen once we have the messages coming from the backend okay so this is how this screen also looks like now the last task for us to do is the the welcome page like once we leave the chat so we will should go on the page again okay so let me just design that as well so if you go in the welcome page we have to write some something here so let me again take it from the code snippet this one is very straightforward this is just have a container with row offset and some messages for you guys okay and this also has a router link so that this will route you to the join room if someone clicks that all right so now let me just go on the welcome page and this is how this looks like we just need to add some background color and then we are good to go so to do that let me just copy the CSS for the same and let me just go here and paste it okay after adding this to classes if I save the changes this is how it looks like okay so someone will click on the join room now so again he will route it back to the join room page all right so in this way we have completed the designing part of your join room the chat room and then your welcome page okay so this is how it looks like now our next job is to connect everything with the server okay like once I join the group I have to send it to the server that has the user Hazard and what not okay so to do that right I will have to create a service in angular so just let me just go ahead and create a service so I will go inside this service app okay what I can do right I can directly make use of the angular CLI to do that so I will say NG G for Generate s for service and service name is chat okay so we are going to create a chat service and in this chat service we are going to add all the logic to do the connection with your backend now let's see what we have to do here okay so first of all we have to establish the connection and to do that right we are using a signalr package what we have already installed so let me just import that so you will say import Star as signalr okay and this is coming from at the rate Microsoft slash signalr okay so once you imported this now you can use that to start the connection so to establish the connection this is what we have to do so first of all let's go ahead and create a property called as connection and let's give it a type for now as any and what we will do right we'll make use of the signalr so we'll say new signalr DOT there is something called as Hub connection Builder so let's add that Hub connection Builder Okay and then we'll say dot with URL okay so with URL what is this URL this is nothing but your backend URL what you will have Okay so let's just take a head uh http.localhost localhost 5000 okay 5000 and then slash chat okay so now a lot of people will ask like what exactly this link is this link is nothing but your backend URL okay so let me just do some changes in the back end so that my port should run on 5000 so let me open up my backend okay and all you have to do is go in the properties go in launchetting.json and in the HTTP right you don't need to launch your browser so you can make this as false and also you can change your application URL to localhost 5000 okay and save the changes okay so this is what I have took in my Hub connection Builder so this Hub connection Builder will build a connection with my backend Port which is look on local 5000 and this chat is coming from The Hub so if you remember that in the program.cs we have added a chat Hub which was routing on this slash chat okay so in this way we will be able to build the connection okay so once this is done right so what you need to do right you have to configure the login for example you want to check the logging what is happening okay in the what do we say that if the connection is done if there is any error so you can configure the logging in your Hub so how we can do that you can just say signalr you can just configure login and you just have to specify the type of logging is it a information is it a warning or is it what okay so I'll say log level DOT log all the information okay in the console and then we'll just have to say dot build okay in this way you will be able to build your connection all right and now once the connection is built you can start the connection so to start to start the connection right you will have to create a method so let's write here start connection okay now what you will do right for creating a method you'll have to create a async method will say public a sync and then you have to say start start the connection so let me just add a try catch okay so in the try what you will do you will start The Connection by saying await this dot connection dot start okay so I know this is not giving me any intelligence because I have put here as any so let me just change it to HUB connection okay and this is coming from signalr okay signalr.hub connection so now if you're able to say uh connection dot so now you'll be able to see all the method which is exposed by this connection so we have to say start okay and in this way it will start your connection and if there is any error so you can catch it in this block you can log them so console.log error that's it okay for example if you want to reconnect if there is any error and you want to again want to reconnect so you can add a set timeout here and this will after every specified time this will reconnect so for example this is what I'm saying so you can create a set timeout okay you will you can reconnect every five second and you can again say this dot start okay this dot start that's it if you want to if you wish to do if you don't want to do then it's fine you can just close the connection that's it if there is any error in this way you will be able to create the start so this will start your connection so now we are able to start the connection so now what we need to do next is we have to do the three things what we have created in the back end so the first thing is we have to join the room second thing we have to do is send messages and the third thing we have to tackle is leave chat okay so we will be creating those three methods just below this okay so for joining the room what you will do right you'll just create a public a sync join room and you just need to pass user and you have to pass room name okay so you can take room as a group or you can it's all up to you okay so this is nothing but group or you can also call it as room so you have to pass two things to join the room okay and let's return this and we'll say this dot connection dot invoke okay so now what I want to do here invoke what does this invoke means okay so let me give a very good example here suppose if you want to do a API call from front end or I would say from angular to.net so what you do so in dot net you will have a endpoint created where you have a route correct but when you are doing it with signalr so what we have we have something called as invoke okay and this invoke accepts an argument called as method name which means for example if you want to invoke a method which is already a part of your backend for example as I told you write the chat Hub okay so this is my mediator so in this chat Hub I have a method called as join rule okay and from angular I want to invoke that method so this is what the Hub connection provides me so I have added a connection here on this URL and this Hub connection is built already and I have started the connection now I am able to invoke the method in the chat Hub okay because this chat up is mapped right so I can call that method by calling invoke so all you have to do is you just have to specify the method name which is join room okay so once you click on this join room what you need to do right so if you see this join room we are passing an object which is user connection and this user connection has two things your user and room okay so this is what you need to pass as well so what I will pass I will create a object okay I'll create a object and inside that I will pass user and I will pass room that's it okay and in this way you will be able to invoke the method invoke the method okay now we have to do for send message again for send message what is the method the method name is send message which means whenever the user is sending a message I want to invoke this method that's it so now what what it will be very easy again for you guys to understand now so public a sync send message okay all you need to do you just have to pass a message so message of type string and again you want to invoke right you want to invoke this method so what you will do you will just say return this dot connection dot invoke okay and just pass your method name so I want to call this method name of the charter so just take that and paste it here so this should match that's why I did a copy paste because this name should match okay and what is the argument this guy needs okay this guy needs a message so that message you can pass it here as the argument message that's it easy right now let's do the same thing for the third one which is leave for leave right it is very straightforward which means now if you are leaving the chat which means you are stopping the connection like okay I'm done with it now I want to stop the connection so as simple as that you'll just say public a sync leave chat and now what you will do you'll just say return this dot connection dot stop see we have a method exposed it is stopped that's it so in this way your three method is ready so now these three will be able to communicate okay so these three methods are done in our chat service but now how will I able to get the messages for example if someone has joined the room okay so I got a message right that user has joined this group correct so how will I able to catch that event okay to catch that event we have something called as on okay so for that I will use the Constructor here and I will say this dot connection dot on okay connection dot on if I open this bracket and this guy straight away say okay which method you want to listen which method are you expecting so if you see here right whenever I join a group whenever I join a group the context ID gets added in the group in the room and then I am saying something called as send a sync and there is a method which is receive message okay which means I I want to listen to this receive message okay so whenever something happens whenever something uh your chat Hub is sending to the client when you say client dot group so to this group please send this message so this is sending via this event receive message so this is what you want to listen now so I will say connection dot on on what method receive message okay and now do you have any arguments after that yes I have three arguments argument one who is the user who is sending the message argument to what is the message okay and if you see we have one more received message it has three arguments like user connection room one two and this three so we have a user you have a message and we have a time as well so the same thing we will add it here as well for all the message because we have one two and three okay so we have three times this year so we will use a single one by saying the first argument should be the user itself okay so let me open up that bracket callback so user is what I will receive second thing I will receive a message again of type string and the third thing I will receive is message time if you guys have any confusion why I use message time okay let me just add it here so it's it's not a problem okay so argument one is user argument two is your message and argument 3 will be your date time so let me add it here as well so date time dot now what time the message has been sent okay same thing I can add it here as well whenever the user disconnects so date time dot now that's it okay so now I will have so for this receive message I will be receiving three arguments which is coming from the back end okay now we have all three all three we have to use it so now what I'll do I'll just do console log to all of those three okay let me just do a console.log so first thing will be my user okay and this will be my user let me copy paste okay now I'll just take this one as well control V Ctrl V this will be my message this will be my message time okay this I have to change it to message and this I have to change it to message time okay so now whenever I receive any message so I will console log them okay so this is the first thing this is the first event which we want to listen okay if you remember right we have created one more event one more event so we are sending one more sentencing so just see how many sender thing we have so we have one sender sync okay this is covered second sentencing okay yes this is also covered third sentencing yes this is also covered and then we have one more sender sync and the name is connected user okay we also want to get this connected user event so what we will do we'll create one more on even on so I'll say this dot connection dot on okay and on this time what what I should write here I should write here the exact same name connected user okay connected user and what this guy will give me what this guy will give me this guy will give me a i enumerable this guy will give me a list of strings correct so this guy will give me users okay so I can just write it like this users and then I can just do a console.log console.log users and I'll just use it like this that's it okay which means now I'm able to listen to both of the events okay now let me save all the changes okay so now I can say that my service is ready okay so my chat service is ready where I have a connection property then in the Constructor I'm listening to all the events which is to receive message and connected user and then I know how to start the connection I know how to join room send the message and leave the message or like leave the chat group okay now I want to use them in my components so let's go in the join component and use this one okay so what happens now here so if you see I have already added all the forms and everything here so whenever user click on join room the join room button which is present in the UI this is the button I'm talking about so I want to trigger that service okay so let's inject the service chat service inject chat service okay and now what I will do right uh no need of okay router navigation we need so let me just take the values from here so I can say const let me restructure it users comma room and this is coming from this dot form dot value I just restructured it and now what I can say that I can say this dot chatservice dot join room and join room needs two arguments first you need to pass the user which is coming from this form and then second name you have to pass the room itself okay and this actually we are returning it right so we are returning a promise can you see this is a promise so what you can do here right you can say dot then if your problem is Success if your promise is Success then you will navigate then you will navigate to the chat screen which means now you can go to the chat screen and do the chatting but if there is any error so you can catch it here can catch that in this exception and you can just display it in the error okay just do a log or you can use the toast message to display the error that's it okay so in this way we will we are able to do this join okay let's save all the changes okay compile successful now let's open up your backend and now we have to run the backend first okay so let's run the back end and then only we can do the demonstration okay now let me click on run okay so I think there is some error that it is complaining me about the routing inside configure okay so let's see your program that's yes it is complaining there about the routing oh yes uh we don't have any route so that's the problem so we have to make use of app.use routing okay so I think we have removed it but we have to use it that only we can use the endpoints and stuff okay so we have to add this app.use routing because we have a Swagger endpoint and all those okay so let me just save this file and again let me run the application so once I added that my application is running on localhost 5000 now let me open up my angular as well and let me open up my console so if I go in the console if I refresh everything seems okay now let me go here and add a display name so let me add the first name and let me add the second name oh sorry the the group name and now once I click on join let's see what happens okay so once I click on join I can see there is some error I am getting that connection is not yet started okay so let's see how do we fix this one so let's go in your service and check okay so because uh this is failing because we haven't started the connection okay so we have created the connection but we are not starting it so let's go in the Constructor and call that method this dot start okay and by this your connection will get start so let's save the changes and let's go on the browser again and refresh so once I refresh I'm getting some new error now and I know this is one of the famous error that I have been teaching like for so long that the cars issue okay and we are facing this course here so let's see how do we fix the chords issue here so let's go in the back end inside the program.cs we have to add a course policy so how we will add that course policy let's see that so just go on the top here and you just have to add Builder dot Services dot add course okay and in the course you can add the options and here you just have to add a default policy so you can say options dot add default policy you can assign it to the Builder and then Builder will add all the necessary thing like Builder taught with Origins so origin you can choose it here that what is the origin of your angular this is HTTP colon localhost four two double zero okay and then with we can also say allow any header allow any credentials or any method so we have to do that as well and then allow any credential okay so in this way your cars will get configured but this is not everything right yes your services is configured but you have to use it in the middle way okay so just go here in below the routing and you can say app dot use course okay so once you add this save all the changes and just refresh your backend again okay so once you restart now let's see if we still face that's a mirror so once I refresh the page I can see that my connection has been established I guess so here I can see yes so my connection is done so let me just do one more thing so that I can say confirm that my connection is established so what I will do right over here I will just add a console okay I'll just add a console that my connection is established okay so let's add a console.log established okay so save the changes and now you can see the message connection is established in the chat server so which means now we will be able to join the room so now let's add the name and add the JavaScript and let me remove all the console for now all the console messages and now if I click on join so see once I clicked on join red I'm able to see lot of consoles here like console messages the first one is who is the user the user is let's program what is the message the message that she has joined the group what time this message came and who is the connected user so there is only one user which is Shashi Kumar okay let me add one more instance of that okay so let me add one more so let me add a new user now so this console will again get updated I'll just have a look here I'm not gonna refresh it so let me add one more user JavaScript and click on join okay now I can see one more message here again I got a message from let's program bot that Abhishek has joined the group this is the message and now the connected user change from two from one to two Okay now which means we are able to get the real time message from your chat okay so now what you need to do is you just have to store all of those message and you have to display them here on the UI okay so now let's see how we can do this so to store all the messages what we will do will make use of behavior subject now okay so let me just show you what I'm trying to say so let's create a property first a behavior subject property and this will be public and this will be message messages with a dollar sign okay and this will be my new Behavior subject I'll specify the type as any for now that's it and this will have the initialize value as empty okay so this will be an empty list and second I will have to also store the connected user correct so I will create the same property connected users with a dollar sign and this will be my new Behavior subject again the type I can specify is of string array of string okay and then I'll specify it as empty okay so this is done so these two things are done and also right so this will act as my so these two will store the observables okay and what I will do right I will take those messages as list and error whatever it is and I will pass them on so for this I will have to create one more property called as public and this is the normal message messages okay and this will be of type any and this is my array and same thing I'll do for the users as well so I'll see public [Music] users of type array of strings and this is empty initialize okay so this is what I have so I have this for property two are my behavior subject and two are my normal property okay which are empty empty area all right so now what I will do right so whenever my user is whenever I'm joining a room like someone joins my room okay so at that time I am invoking that message correct so I have been working the message so here I can see I'm getting all the message detail here okay so all I need to do is I have to store those messages so what I will do I will just say here this Dot message okay this Dot message is equals to and then what I will do I will say I'll spread this message the previous messages so this dot messages okay comma and then I will be storing the user information which is the user then the message which is coming from the signalr and the message time okay so this will add the so this will be my previous messages and this will add an extra object okay and now once the message has been added here so once the message is updated with the new message what I will do I will just say this dot messages dot next okay and this next will send this value this dot messages that's it okay again remove all this console not required anymore same thing I have to do for users as well so let me remove the console first and then I will say this dot connected users dot next and I will pass the users which is coming from the back end if you remember when I logged in with Chachi I got one array and then when I joined with Abhishek I got another so I got list of uh strings like which are listed user so this is what I'm passing it to the connected user that's it okay so now I'm able to store the connected users and I'm able to store them as messages now I want to display them okay so why I did this because I want to pass this message to some different components so that's why I use the service to do that now I want to pass these two information connect result message to my chat to my chat component okay so let me inject that here so we have chat service we will use inject inject the chat service and now let's implement the on init interface implements on init okay and this will ask you to implement the interface and always use it below the property declarations yes now here I will just call I'll just subscribe those things okay so first of all I want to store the messages here so I'll just say messages type any and this is an empty okay and now here I will say this dot chat service dot messages dot subscribe okay so either you can directly go ahead and subscribe to your response and then you can restore it in the message you can say this dot messages equals to message or your response what you are getting okay because this is an observable right so Behavior subject so you can do dot next and you can do dot subscribe so you say dot next big to add the stream to add the data in your stream and you say dot subscribe to use the data okay whatever the data you have in that stream okay so in this way you will be able to update this property messages okay now from this chat component I want to send messages correct so for that let me create a method send message okay and in the send message so if you remember right I have a button here just below it so this is the button which will help me to send the message okay I'll just show you on the UI how it looks like so we have this button which once you click on that button it will send a message okay so to do that right I will have to use a property to store the whatever users are typing like for example here right if I type something here so and this is my button okay I'll fix it with the icon don't worry but this is my button so if I click here so the message should send so I have to store this value right the input value so what I will do I'll just create a property called as input message okay and let me add a string literal this is my of type string and I will make use of NG model so it's up to you if you want to use NG model or if you want to directly go ahead and use the event event binding so both you can do that okay so I'll prefer NG model but to use NG model the first thing is to do is we have to import the forms module because NG model directive is a part of your forms module okay so once you add this forms module now you can use NG model on this input okay so this is how the NG model looks like NG model and in this NG model you will bind your value so this is two-way data binding and you will add your input message property here so the value got binded okay and now what you will do right now what happens so for example whenever you are doing a key press okay so whenever you do a key press at that time also you have to call suppose you suppose you click enter okay so if you do a enter at that time also you want to call okay you want to call that method so you want to call a method called as send message okay so there are two ways by which you can send them message also once you click something and you hit enter so the message should send or else if you click on this button the message should send okay so to do it via the input enter so what you can do here is you will see something called as key down okay key down DOT enter okay so whenever you do Enter key is pressed so what you will say you will say send message is called okay or if someone is clicking the button then at that time also you want to call the send message okay and the send message what the send message will do so if you remember we have a chat service in the chat service we have created something called as send message but this send message accepts us message parameter okay so what we will pass you'll pass the input message whatever user has clicked okay so we will pass the input message here okay so once you pass the input message so again this is returning a promise so once the promise is Success so how you say that so promit dots dot then it is a success if it is success then you will just refresh then you will just make this input as empty okay but if there is any error you can catch it in the cache block by saying catch error and you can console log okay you can log it in the console to see what is the error okay and that's it so your send message is also done in the component level okay let me save all the changes now now you have to handle the leave chat okay so again to do that let's create a method leave chat and whenever the leaf chat is clicked you have to call the service the chat service dot the leave chat service what we have created okay again this Leaf chat is also returning a promise so we can say dot then if it is a success then what you will do right you will just do this dot router dot navigate so you have to navigate to the welcome page like okay my chat is done now let's again go back to the welcome page so to go to do the routing let me import sorry let me inject the router okay so router is injected and now you can make use of router here so I will say this dot router dot navigate where you want to navigate I want to navigate to welcome page which is welcome okay and this is done and I can catch the error as well so you'll say catch block if there is any error then you can just do console that's it okay so in this way your all three method you are able to use it here okay let's save the changes and now let's see let me just do a console.log also to see the messages and stuff if it is coming in this component or not it's also a console.log messages save the changes now let's go here and see if this is working so you can see connection is established and now what I will do right I'll just say let me first connect so let me click on leave chats if I click on leave chat it should route but it is not doing because we have created the method but we are not using it so if you go on the top we have this button leave chat so just go here and add a click event click should call leave chat okay thing or not let's go on the browser again and now when I click on this leave chat I will be coming on to the welcome page again and now I can click on join now if you want to join it again okay so now everything is working fine now our task is to show all the messages here so to show the message I will be using this div block so inside that I will add all the message history but before that let's see if we are able to get the messages in the console or not so for that you just have to write a console.log here and this log will we can see all the message is coming or not okay so let's join a room click on join once you join I can see the message and I can see what all things I'm getting I'm getting a message I'm getting message time and user okay if I add some message here and I hit enter I can see I got two message and the second message is from Shashi the message is whatever I have typed and also I got what time the message was sent which means I have these three object here okay so these three property I have to use it on the HTML all right so in the HTML we will be targeting this particular div so you can locate here and let me add a code snippet and let me explain you that code okay so what I did is right so here this is how my code looks like here and I know I'm getting a lot of error here so we will fix that okay so what we will do right so we will have a NG container because we are getting a array of messages so that's why you're using NG container and then we have this big div okay so inside this div we are applying a class NG class and based on some condition I will be applying this Dynamic classes okay so if the user If the message is coming from If the message is not coming from the logged in user then apply this class if the message is coming from the logged in user then apply this class okay so this is what I have added let me zoom out a bit so that you can now you can see it more better all right and now then I have a div here again with the NJ if condition which has an image okay so what I am doing right if the message is coming from an incoming user then I'm displaying a profile image okay and if the message is again not coming from the logged in user so this is what the classes we have received message and this is how the message is showing that we are displaying it here in this particular div but if the message is coming if the message what user has sent is done by the logged in user then this is what the div we are displaying okay so now we are playing with NJ if condition to do hide and show okay based on the condition okay so now the question is what is this logged in username this logged in the username is nothing but what we will be doing what we will be storing it in the local storage so what we will do right we'll have to so what we will do that we have to create this property in the TS file okay so we'll create a property called as logged in username and let me keep this is blind okay so how we able to get this logged in username okay so whenever you are trying to join a room at that point of time you can store this user okay so what we will store it in the session store is not in the local but in the session storage okay so we'll say session storage session storage dot set item so give it a key which is user and give the value to it which is again user okay so this will store the user in the session storage and this session storage you have to use it here okay so now you will say session storage dot get item and pass in the key the key was user okay and this will give you the logged in username okay so by this we can just like from whom the message is going and coming let's do a quick demo to see that if everything is working or not let's go in the browser and let me go and add my display name and let me add the room name click on join can you see I'm able to see the message on the top that Shashi Kumar has joined the group and this is coming from let's program bot and at what time it is coming this also it is displaying okay to display this time right what I have used I have used some inbuilt pipe coming from angular which is date pipe and I have passed the argument called as medium because of this passing this argument medium I am able to get the time value as well okay in the day all right so this is how the message look like now this message is coming from so this is my incoming message so that's why it is in this side and this is in white color but if there is an outgoing message from the current user if I say if I say something like hi from Shashi yeah enter so this is n blue color and this is my outgoing message okay let me create one more tab here and let me showcase that the same thing all right let me create a tab here localhost and let me add a display name with a different user with the same room and click on join okay now I can see I got a message here to Shashi that Abhishek has joined the group and again this is a incoming message and now if I type anything here if I hit enter so this goes like this to the different user okay and now if the user is passing some message and hit enter so even he is getting that message okay so now everything is working fine okay now the only problem what I see here is on this on this button even if you click on this button it works but it's just a blank button right so we need to update this button okay so to update this slide I'm using a font awesome icon okay how can we add a phone to some icon it's easy just go on this website font awesome w3school click on this link and you just have to copy this copy this and go in your index.html and just paste it below the bootstrap link just paste it and refresh then you will be able to see the type okay let's go back to again add your username JavaScript and click join and now you can see this icon of plane okay now if you type anything hit enter and the message disabled you're able to send the message okay so in this way we are able to create this message sending and all of those now let me show you one problem now so if I enter the messages so if I'm entering the message can you see I'm I'm getting a lot of message okay already now but if you see right I have to scroll down to see my latest message if I'm typing anything can you see my message is getting down and down so what I need to do right always I want to scroll to the bottom so whenever my message is sending I have to scroll it to the bottom okay so let's see how I can I can fix this issue so to fix this issue right you have to know the two Concept in angular so the first one is the template okay so what is a template reference in angular and second thing you have to know about the life cycle hook okay uh the lifecycle hook name is few check I know a lot of people have don't even use this kind of lifecycle hook but this is where the importance of those life cycle hooks comes in okay so let me just showcase you how can we how we can do that how we can achieve that okay so now let's go in your chat component.html and let's target this div okay message history and let's create a template reference okay how do we create that by adding a hash and let me give a name as scroll scroll me okay so this is my template reference and this template reference I can access it in the TS file okay how can I access by using view child okay so by virtual can access this template reference so let's go here and add a view child and this view child again has to be imported so if you go on the top this is imported already from angular slash core okay and in this future you just have to give the name whatever you have created there scroll me so this is my template reference and now here you can create this property private and this is my scroll container okay and this cold container this will be of type Elementary and again this is coming from angular slash core and you have to import it here this imported by default once you press tab okay and now you will have to make use of the interface you have to implement the interface after view check okay as this is the interface so it's a contract so you have to implement the entropy okay so let's copy this interface and just paste it below the NG on init okay inside this NG on in it what you need to do right we have to scroll to bottom okay we have to scroll to bottom so what you will do right in this you will say whenever the view is checked you will have to check if the container is scrolled to top or not likes it is always in the top of it or not so whatever you'll say this dot my container which is my scroll container dot native element okay dot scroll scroll down okay and now what you will do right you will just assign it a new value okay so what will be that new value whenever the it is happening scroll top so you will give a scroll top whatever the scroll height it is so what you will do you'll say this dot container scroll container dot native element dot scroll height so once you assign the scroll height to the scroll top then it will always be on the on it will be always scrolled and it will be always in the bottom okay so once I save the changes let me show you if it is working or not again let me add this join here and let me add some bunch of messages so now if you see whenever I type any new message just look at the scroll bar here so now it is always in the bottom so this is my new message so let me add it and if I hit enter I'm always in the bottom okay so in this way you we will be able to fix this issue where we have to always scroll bottom and how did we achieved it by using template reference Variable View child and after view checked lifecycle hook okay so this is what we have implemented now let's see what we have to do next so here on the left if you see right we are getting this dummy connected user so we have to replace it with the actual users okay so how can we do that let's see so if you remember that we have already created a observable so we just have to subscribe that observable here so however we can use that it's very easy what you will do right so you can directly use the chat service correct so what you will do as you have already injected the chat service so you can just go here in the chat component.html scroll up where we have the connected users and here if you see right we have this inbox chat so again this is a list of what we say users so we will have to make use of NG container okay and in the NG container you will have to add this particular bar so you have to repeat this okay so wherever you see this dummy customer your dummy connected user you have to give change this name with what you are getting in the list okay so I will add a NG container just here and I will be using ng4 now I'll say let user of this dot my service was chat service dot connected user so as this is an observable so I can subscribe to it by saying a sync pipe so if you use a async pipe you can directly subscribe and unsubscribe so this is one of the features okay so I showcase you both the way by which you can do it so for the input messages right I was able to subscribe it here and then I am storing it in the message but if you want to directly do it the same thing you can apply it here as well so what you will be doing here so we'll say this dot chatservice dot messages and then you can just say a sync so what is the benefit of this async this will help you to subscribe and also this will help you to unsubscribe by default once the page component are destroyed this will directly unsubscribe your observable so this is the benefit of that okay so I just showcase you both so whatever feel what if I always recommend this way but it all depends on Person to Person how they use okay or else you will have to write your own engine destroy and do the unsubscription there okay so now again let's just focus here so this is my NG container and I'll copy all of this div code and I'll put in this NG container okay now based wherever we have this dummy user we will be removing it and then I will update it with the user what I'm getting okay so let me add this string concatenation and I think I'm done alright so now this will display the image of the user and this will display the name Dynamic name which is coming from the observable and that's it so now let me just do some refactoring and let me remove this unnecessary space save all the changes and let's see if everything is working all right so to do the testing for this so let me again add the name and let me give the room name and click on join okay so once I click on join I'm able to see the message here which is correct but I can see some unnecessary record okay so the main reason for this record could be that once we are leaving the group there is something we are missing okay so let's go in your backend code and let's see what what is the thing what we are missing okay so if you see here right so this is the on disconnect so this is what we are doing so we are first checking if there is any connection ID oh okay so there is one mistake what we have did here that once we are removing the connection so there is no such code what we have written to remove the context ID okay because this is the connection what we are storing right this is a Singleton service and this will store all your connections once I refresh the code once I what we say restart the application then it might get null or it might get empty but for now we are not able to remove it like we are not removing it is the problem so what we will do here whenever the user clicks on disconnect so whenever it is getting disconnected so what you will do let me stop the application for now and now what I will do here right I'll just say connection connection dot remove okay what you want to remove you want to remove the context ID so you'll say context dot connection ID okay that's it and once you do this now everything should be okay now let's save the changes here and rerun the application all right the application is running again now let's go back on the UI let's click on leave chat and click on join our room now let's add the again let's try to do the demonstration so I added the name I added the room name as well and join now I can see the single user let me create one more instance of this and let me add a new user now with the same room name and then click on join yes I'm able to see okay now if I click on the leave room I come on this home page if I go back again if I okay if I check here in the first instance I can see Abhishek has left the group and there is only one user but if he again wants to join he can join the room again so he can click on his name click on the room name and click on join and he's back again and he will see the same message here so Abhishek has left the group and again he has joined the group okay so in this way we are able to also show the connected user on the left hand side and we can show the message here on the right hands okay now there is one feature what I wanted to display you that okay here you can see their name is also inconsistent so this is showing dummy room name but the room name what we joined was JavaScript okay so what you will do right so to purchase this record again we will have to store it somewhere okay so we will be using session storage to do the same so once you go on this joint room component okay so here what she will do right he will add one more item so you will say session storage session storage dot set item and in that item you just have to specify the room and you can give the value which is room okay so this will save the value in the session storage okay and now to use that in the chat component what you will do you'll do the same thing here you will say room name and you will just say session storage dot get item and you'll pass in the key which is room okay and now this value we can use it in the UI so you can just go here and there will be a dummy component here so we can remove this get rid of this static name and we can add our Dynamic name based on what user select okay now save the changes and let's do a demo for this one again okay now if I click on join now here so there is some way something that I need to do the reset connection okay so what happens right so whenever you are disconnecting clicking on disconnect you have to reset the connection okay so to do that right either you can just refresh the browser to handle it automatically or else what you can do that you can create a set timeout okay so how do we handle the reconnection so what you will do right so whenever user clicks on leave chat okay so what you do right you just start him to the navigate if everything is so so what we will do right so we will do add here a set timer to just to add a synchronous operation so you can make it zero as well it's fine and what you will do right you will just say location Dot reload so what it will do right it will just go on your welcome page and it will just your page and by reloading the page it will do the reconnection that's it so let me just show you in the console actually so if I inspect element here now if I join the room with the display name give the room name click on join okay I have joined the room now once I click on the leave chat okay so there is one user who has joined in connection is a start so if I click on leave chat what will happen right so this will again refresh the page and now you can click on join now and if the correction is again established okay now you can click your name again click the room name and you can click on join so still it works if you don't add that side timeout then this will not allow you to join the room again because the connection is disconnected and you're trying to connect it so it might give you multiple messages so to get rid of that you can do that step okay okay so let's do a quick demo to see if everything is working fine let me add a display name and let me give a room name and click on join yes I can see the group name here I can see the connected user I can see the message and everything fine let me add the second user in the same group click on join now see everything is working let me send some few messages just to see if everything is working real time yeah it works fine let me add few more random text yes it works fine let me also see uh if the scroll bar is working fine because I want to see the message always below right so I don't need to scroll it manually so it's doing for me by default okay so that's how we have handled that as well now let me show you one more thing that if what if what happens if I try to join a new room uh like if one more user wants to join the room so the third user is trying to join but the room name he selected is different okay if it clicks on join so he has joined to a different group and whatever message he will send right so this will not be getting received to this group member because this was the beauty of this so this is basically helps you to do a group chat okay so this can be done so if you want to do a group chat with this group so you have to specify the correct name okay then only it will join then it will allow you to write the message to that particular set of group okay all right so that's it from this today's video where we have learned about how to create a chat application by using signalr and angular if you have loved my content then please give it a thumbs up and consider subscribing to my channel if you really have any suggestions for me for this video like how can I improve this or any other thing then please please mention them in the comment section or else you can also connect with me on my other social handle like LinkedIn Instagram or telegram I will also request you guys if you love this content then consider sharing it with your friends also so that they can learn this beautiful Tech also if you want the code for this particular application so you can head over to my patreon and you can just become my member and you just need to add your GitHub ID so that you can access this code base just mention the anyway whoever is my members so they will be getting access to this repo but if you really want this code like you want to implement this and you want to test it then you can just become a member write down your ID and you can get the code base or else if you are implementing this by your own and if you are facing any doubt or any issue then that's not a problem you can connect with me on Instagram or telegram we can discuss over there as well if you have any doubt related to this topic also I will be releasing a Blog version of this video on my blog website which is let's program dot in so you can head over there and you can also go ahead and check out all my blogs so you can just mark this as a bookmark if you really want to learn good things about angular.net core and lot of things alright so that's it from this video I hope you guys have enjoyed it and let's see you guys next time until then bye bye and keep learning guys

Channel: Let's Program

Views: 9,703

Keywords: Web Development, Angular, .Net, SignalR, Chat Application, Real-Time Communication, Group Chat, User Authentication, Front-end Development, Back-end Development, JavaScript, TypeScript, CSS, HTML, Programming, Coding Tutorial, Software Development, Web Design, Chat Room, Messaging App, Chat Server, Angular Project, .Net Core, Web Application, Online Chat, Technical Tutorial, Development Tools, Coding Tips, Code Examples, Web App Development., Angular begineer, Angular tutorials

Id: 9ualnuQRiPo

Length: 78min 48sec (4728 seconds)

Published: Fri Sep 29 2023