Real-Time Chat | Using React, .Net 5.0 and SignalR

hey welcome back in today's video we're going to build this real-time chat application in reactant.net 5.0 we're going to use the signalr library which uses websockets to communicate between the clients and the server looking at the application the landing page will serve as the lobby and here we can put the name we want to use and the room we would like to join once we join we can see the connected users on the left as well as a message from the my chat bot saying mark has joined coding and as you can see johnny was already connected and this is because i have another browser open that represents this connection now if mark goes ahead and types a message everyone connected to this room will receive it now johnny can reply with a message and if he goes ahead and clicks the leave room button then his connection will be closed and we can see a message on mark's screen that johnny left the chat and connected users got updated this video will be focused more on the use of signal art in real time chat communication i expect you to have installed pitches to the 2019 as well as npm and node.js i'm really excited to build this application with you as a reminder the link to the repost will be in the description below if you haven't already don't forget to subscribe and let's get started when using http we make a request from the client to the server and the server sends a response back this is a one-way communication to initiate a websocket connection we first send a request to upgrade connection to websocket we call this a handshake and this is achieved with the http protocol once we have upgraded connection to websocket we get a bi-directional communication where the client can send messages to the server as well as the server can push messages to the client and this connection will stay alive until it is closed now signalr which is the library we will be using first attempts to establish a websocket connection if possible and the signalr hubs api makes it very easy to make calls from a server to connect the clients and from clients to the server with this in mind let's start by building our service so i have opened visual studio 2019 and we're going to click on asp.net core empty click next let's call it chat service pick location click next we're going to select that net 5.0 click create now that we have our project let's create a new directory called hubs so let's right click on chat service to add and do a new folder and let's name it hubs let's now create a new class inside hubs and let's name it chat up this class is going to extend from hub and let's make sure we're using microsoft.asp.net core dot signal r so we're going to start by implementing the join room method this method will be called whenever a user submits their name and the room they want to join so let's start typing public async task join room and then this is going to get an object which we are about to create let's name it user connection let's go ahead and right click on chat service and create a new class and let's name it user connection now this class is going to have a couple properties so let's say a string let's name it user and the second property is going to be the room so one has a name the other one has the room okay let's save this file let's go back to our chat hub so at this point we will have the username we'll have the room and then the connection id will get it by default from the context object of the hub class so let me show you how simple it is to send messages to the clients so we can simply do await client dot all dot send async and if you can see here this takes a string method and then it will take a cancellation token and then also it can take whatever parameters we want to pass now this string method will be the name of the method or function that we have in our front end so we can say something along the lines receive message and then we can pass in some value we want say hey hey everyone now this would route hey everyone to all clients and the method to receive it will be the receive message method in the front end don't worry if you don't get it yet it will make more sense as we go ahead and create a new variable let's call it private read-only string let's call it bot user this would be the name of the bot and if we do public chat hub and inside here we can say that our bot user will be equal to my chat bot now let's update this call and let's put here bot user and also let's send the message along so we can say user connection that user has joined and we can say to room user connection that room so cool we're passing along the bot name and also a message saying the user has joined you know this particular room now the problem is we're passing this to every client and we only want to pass it to the people connected in that room and this is where groups come in handy because we can group connections together and to do that whenever someone joins a room what we can do is await and say groups that add to group async and say context that connection id and user connection that room now this would add the specified connection this incoming connection to a group in our case a group is just the room we're passing and now we can update clients at all instead of doing clients.oh we're going to do group and we're going to say we want the user connection that room group that's the one we want and then we want to send that message to that group so now we have to map the incoming request to our hub and for that we're going to go to startup let's scroll down and let's get rid of this we can say endpoint that map hub and in here we're going to do chat hub let's make sure we're using that using chat service that hubs and let's map it to chat let's go up to configure services and let's do services dot add signal r and we'll come back to the startup file to add a course policy and until then so that you see what error you get i'm not going to add it but keep in mind we'll come back to this let's give it a shot now and try to run our application and it seems to be up this is a good time to switch gears now and start working on a front end so now we're going to create our react project and we're going to do so by using the create react app so let's make sure we install that first so we can do npm install minus g create react app and now we can do npx create react app and let's name it my chat that front end once that finishes let's open up that directory and let's do code and that and this will open visual studio code for us so we have visual studio code open in that directory feel free to use any text editor you like so the first thing we're going to do is let's go ahead and install bootstrap and also signal r let's go over here to terminal new terminal and over here we can do npm install at microsoft slash signal r be patient that will take a minute or two but after that let's do npm install react bootstrap bootstrap okay now that it's done let's open source and let's open appdress and let's import the css so we can do import bootstrap slash dist slash css slash bootstrap that been that css if we go to app css we're going to actually delete all this stuff and i don't want to bore you guys with a bunch of css so there's going to be a link in the description to the repo specifically this is going to be another link to css file and i want you to copy that and paste it in here so the link in the description is going to take you to this css file the app.css and then all we're going to do is click this little button right here it says copy file content and head back to visual studio code let's now paste it in here and save this file and we'll be using all these classes now we're ready to start building our first component which would be the lobby this is where the user puts their name and the room they want to join and they click join so let's go ahead and create a folder so let's right click on source and add a folder let's name it components and inside components let's create a lobby.js file let me say lobby lobby.js let's now do const lobby equal to and this is going to take something but let's leave it blank for now and in here we're going to have a little form so we can say return form and it's going to be class name equal lobby just to give it some style okay and inside here we want to have a form that group and inside there we're going to have a form that control and this will have a placeholder of name and unchange we're going to do something with it and let's do another one it's going to have form control it's going to have a placeholder equal to room and on change we're going to do something and then right here we're going to have a button and it's going to have a variant of success and it's going to be a type submit and disabled it's going to be disabled if there is uh either a name or a room so we're going to fill up in a second and then let's name it join and then out here let's make sure we are doing export default lobby all right so now let's fill up the stuff we're missing so let's use the use state to keep the state of the user and the room so we can do const user set user equal to use state and for those of you not familiar with the use state not user but use state this is a function this is set user so we call this the function we pass in a value and that value gets set in this variable and you'll see in just a second where we're going to use it so let's also do a const room and set room equal to use state okay so now on this change every time the user types the name we want to get that value so we're going to pass e and we're going to say set user to e that target that value so essentially we're going to be setting the value that the user is typing to set user using this as a function and this is going to have the value same thing here we're going to do e set room we're going to do e that target that value now let's disable the join button if there's not a user or there's not a room basically means if either of these is missing the join button is going to be disabled so once the user puts their name and the room they want to join they're going to click on join and that's going to submit the form so what happens when they submit the form well we just want to call a join room function and we're going to pass in that user and our room and that join room function we're going to get it as a parameter so let's do join room and now we're getting the join room function and then inside here it's time to do the unsubmit so we can do on submit and this is going to be equal and we're going to get an event and let's do e dot prevent default and this is basically going to prevent the page from refreshing and then we're going to call the join room function and we're going to pass in user and room i know we haven't specified this function yet we haven't created anywhere but we will now last thing we're missing here is to do the imports we're missing so let's do import form and then also button how would it be and also let's import the use date from react and let's save this file and if you haven't noticed yet we haven't set up the project to use redox and we won't in this application we're just going to be passing props if you want to see some of that feel free to check out some of my other videos so let's head back to app.js now and let's let's delete all this stuff and we're actually going to try to keep this simple as possible so we're gonna keep all of our signalr functions and things right here in our app.js let me also delete the logo okay and now we can do const app there you go so let's try doing a return let's do it div and this will have a class name of app and here we have an h2 and let's call it my chat and let's do an hr and class name and if you skip this part of the video some part of the video make sure you copy the app css that is in the description and just paste it in our app that css file and this will let you use the class names like line and app and so forth all right let's now return the lobby and let's actually pass in join room with that said let's create our join room function and we're gonna do it right here in app so let's do const join room and this will be an async function and we're gonna pass in user and room okay let's wrap everything in a track hatch so we can do try let's do catch and we can pass the error and just do console.log e so this function takes in a user and a room and this function is going to create a connection with our service and it's going to razer all the listeners it's going to start the connection and then if it needs to invoke any methods it will well let's start a step at a time let's create a connection let's first import the things we're going to be using and use so far so let's import lobby since we have that defined down there in the return so let's do from component and lobby and also let's import hub connection builder and log level from microsoft signalr so let's go now and say const connection equal to a new hub connection builder with url so remember for me my servers is running and port 44345 so i'm going to copy this and then we're going to do for slash chat which is the mapping url we set in our setup file we can then set up some logging this will lock the console so we can do configure logging and then we can pass log level of information that way we can see what's going on and this will log information warnings and errors and at the end let's do it that build all right we have ourself a connection now let's set up a method or a function that would receive a message from the server so in our server we mentioned about this receive message function right so let's add that we do that is we do connection and then we do that on and then we name it the same thing so let's say receive message this way the server can push messages to the client or the client and then here we're going to pass a user and a message okay for now to see if it works let's just try to console log message these are actually called handlers and once you specify all of them then you're good to start the connection so we can do await connection that start and after this we can invoke any method we want and the point of this join room is to invoke the join room method right so we're going to send a message to the server so let's do a wait connection that invoke and then we called it join room back in our server so let's we have to have the same name and then let's pass in user and room so to recap and try to explain this a different way i want to make sure you get this right so whenever we join room we pass in the user and the room we create a connection we set up the handlers we start the connection and then we invoke the join room method so whenever we invoke this we're going to pass the user and the room to this method it's going to be linked and this is going to be the magic of signalr this method is going to do the groups things that we just did earlier and then it's going to send a message to receive message and that received message is going to be this guy now if everything is successful let's make sure we are storing that connection so we can do const connection and then set connection and then we're going to be using the use date just like we did previously and then down here we can say set connection and we pass in connection let's make sure we are importing u-state from react let's now save this file let's open public go to index.html and down here on the body let's add a background color let's make it look a little nicer so we can do style and we can do background color and let's do hashtag 66d9ff okay and save this file so let's try to run it now and see if it's at least building so we can do npm start hey so this is great news our app is up and running so this is really good if we notice and the console we can see that we have a warning there saying connection is assigned value but never used don't worry about that we're going to be using the connection so ignore this for a moment let's try to have some names so we can do john and then we want to join the coding room and then let's try to hit join see what happens so we actually got an error we have it being blocked by course policy this is actually the browser blocking us since we're making a cross-domain request as you can see the ports are different on the servers than on our front-end application and this is the air i mentioned before that we will get and i want you to get exposure to it if you haven't seen it before so let's go to our service and the startup file and let's add a policy there to fix this so we're here on the startup file so let's do under configure services let's add service services that add course and let's pass in options and in here we can do options dot default policy and we're going to pass a builder and in here we can do builder that with origins and let's do http localhost 3000 this is where the front application is currently running at let's do allow any header allow any method and allow any credentials okay and if we scroll a little bit down now under use routing and here the order actually matters because this is a pipeline let's do app that use course all right let's save this and let's run our service again now that our service is running let's refresh this page and let's do again john and let's do coding as a room and hit join and look at that we had we have a connection websocket connection and then we actually received the message john has joined coding this is pretty pretty cool and really good progress notice that this message was from our console log but these were from the logger we set up when we set up the connection okay so now back to our code what we're doing here is whenever we receive the message we're just doing a console.log but let's actually store that somewhere and for that let's just create a const let's do messages and let's do set messages and do a new state and whatever we put inside here is is to be initialized so we can initialize it with an empty array so that means that messages the beginning is going to be just an empty array and then as messages come in what we can do is do set messages and let's pass in messages whatever messages we have so we can do it like this and then we can keep the message we already have by using the startup edit operator and then add the new message coming in which will be user comma message let me auto correct that and there you go all right so now that we have the messages what we can do is create some components to display the messages let's go ahead and create a new file under components and let's call it chat.js so the zoo const chat and we're going to be passing in messages let's do a diff here let me how to format this do an alt shift if you're in windows and then let's do div i can type let's do class class name equal to chat and in here let's create another component that will render this so let's right click on components again and do a new file and let's name this one message container that jazz and this component is really the one to actually display the messages so we can do const message container we're going to pass in messages and then we can do return div and let's do a class name of message container and inside here let's map through messages so we're gonna go through every message so it's gonna be m and let's also pass in index and now we can do a so here we can do it div and let's have a key which uniquely identifies this component index and then class name let's make it user message and let's have another div this will have a class name of message pg primary and then let's do mdap message so it's actually our message and now let's display the user so we can do div class name from user and let's do m dot user forgot to add parenthesis here so let me add it here and also in front of this there you go get rid of the space for now and then we can do export default message container all right let me save this file and let's go back to chat so now that we have our message container to display our messages all we really got to do is use that so we can do message container and we automatically got that import and then we can do messages equal messages okay close it there and then out here down here we can do export default and chat save this file and let's go up another level to app and if we scroll down here to the return we can have a check here and see if we have a connection if we don't have a connection let's display the lobby so the user can put their name and the room they want to join but once we have a connection let's actually display the messages or the chat component so we can do if not connection then we want to display lobby if not let's just display the chat so we can do chat let's do messages equal to messages and let's close this and let's close the curly braces alright let's save this file and it says chat is not defined right here on the error so let's make sure we are importing this so we can actually copy this thing and i'm gonna do chat and chat there we go save this and let's go to our browser okay so we're back at browser so now let's put the name and a room we want to join and we should receive some message from our server saying that we connected to that room so let's say we do mark and we do coding and we enter and there you go it says mark has joined coding and this is a message from our my chatbot pretty cool and now that we can receive messages let's make sure that we can also send them okay back at the code so in order to send a message we're gonna do something really similar to what we did here in this invoke join room right so let's create a new function to send a message so down here leave some space and we can do const send message async and we're going to pass message and inside here let's do a try and catch let's log this error and here we can do a wait and we can do connection that invoke and now we can name the method that we want remember we haven't created this on our server yet but we can pick the name now we can say we're going to call it send message and we're going to pass in message okay so someone is going to be calling send message they're going to pass a message and then our connection is going to invoke the send message method this is going to live on our server side and we're going to pass in message to it cool okay so let's come down here and let's pass in send message to our chat save this file and let's go to chat now and we're going to be passing it to here so let's do send message and now let's create a component so that we can pass this function to that component will be a form to get the user message that they're typing and the submit button to send the message so let's right click on components and add a new file let's name it send message form dot js all right so let's go ahead and do const send message form and this is of course going to get the send message function and we're going to return the form and inside here let's do an input group and here we're going to have a form control and we can have a placeholder message and we're going to have it on change that we will fill up in a second okay and now another thing we should have is the button right so let's do an input group that append and then inside here we can have a button variant equal primary type equal to submit and we will disable it depending if we don't have a message so we'll add that in a second but let's have a send as the name and let's make sure we are doing export default send message form so let's store the message that the user is typing and for that we're going to do use state let's do const message and set message equal to you state oops okay and now on change we're going to pass in e as an event and then we'll set message e dot target that value so we're going to set that as that and then we're also going to set the value of this input box to be message all right now let's do disabled if there's not any message go ahead now and do a submit so we can do on submit and we're going to pass in well it's going to be an object first of all but we're going to pass an e okay let me out of format this there you go and then we can do e that prevent default so the page doesn't reload on submit and then we can call our send message function that we've been passing in and we pass in the message the users typed and lastly let's set message to empty and since we set the value of this info box to be message then that's going to clear out so let's save this and let's go back to chat so now at the chat all we got to do is render a component so we can do send message form and we can do send message there you go and equal to send message okay and that got imported let's save this file and okay we're getting errors we are missing okay we forgot to import those so let's make sure we add that so let's let's go back to send message form and let's import these and if you didn't miss it good for you you are definitely ahead of me let me do this real quick so form control and let's also import use date from react all right let's save it now and see what happens there you go successfully all right so let's go to the browser and check this out okay so the input box is showing up nicely and the button and it's disabled at first so let's do hello and we have some messages not a function all right let's see what happened there and i'm gonna leave this as part of the video just to help some of you that may run into issues like these so it says send messages not a function so i'm just going to check for typos first of all so send message looks like it's highlighted so it should be fine let's go to chat send message and let's highlight it this one is highlighted this one's not send okay i'm missing an s here so that's the issue all right i'm gonna save this and i'm gonna go back to the browser okay so back in the browser i'm going to try sending hello again so let's click on send and notice the error message we get here it says fail to invoke send message due to an error on the server and it says method does not exist and this is very accurate because we actually haven't created this in the server and this is why login is so cool and so important all right so next step let's go back to our service and let's add that method okay so we are back at our service and we want to have a method so the client can call to send a message right and this message that the client is sending is going to be routed to every other client that is in that same room now there's a couple of things we don't know we don't know who the user is and to what room they have joined and this is because we are not keeping any records of it so we do get the connection id that's a good thing but we don't know who the user is for that connection id or the room for the purpose of our application we're going to be using a dictionary where the key is going to be the connection id and then we're going to have the user and the room as the value and this is going to be only one instance through the life of the application so that means this dictionary is going to be a singleton so we want to go to startup and let's register a singleton here so we can do services that add singleton there you go and then we can do add dictionary and then we can do a string comma and then this is going to be the object that we're going to be using for this this case is going to be a user connection and we're going to pass in options and let's just instantiate this so we're going to do new dictionary string user connection and we're missing a parenthesis all right let's save this file all right let's go back to chat hop now and let's make sure we inject this using dependency injection we can do private read only i dictionary string user connection connections and then up here we'll do i dictionary string user connection connections so this is going to give us that instance that we created and we just gotta assign it here connections equal to connections cool so now all we got to keep track is whenever the user joins we'll do connections and then we'll have the context that connection id as a key it's going to be equal to that user connection this way we now are keeping track of it and now we're ready to implement our send message method so we can do public async task send message and that's gonna get get a string message and inside here let's do a quick if and do connections that try get value so that's going to get a value if if if there is one so we can do context that connection id and then this is a way to get a variable out of it user connection user connection and inside here so this returns true or false if there is a value with that connection id as the key it's going to get the value out of this variable so we can use this inside here so we got to do here is a weight client that group by user connection that room and then we can do that send async and then we'll send it to receive message which is the method we the function we specify in the client it's going to receive the messages comma and then we'll say user connection that user and we'll send the message okay i hope that makes sense so to go over it connection is dictionary and we try to get that value based on this connection id which is the key so we get that user connection which is just the user the name that they put in the room and then with that we try to send a message to the clients group and so since we have that stored we know who the room is what the room is so we can just you use user userconnection.room and then when we do send async we're going to send it to receive message and we're going to use the user that way the name displays in the message and we're actually going to pass in the message cool let's run the service now and let's head back to the browser so back at the browser i did a reload and i'm going to try to do mark and do coding and try to join that room it looks good mark has joined coding let's try to send a message now let's do hello and awesome we can see hello and we can see the name mark in there i now open another browser since this should be sending messages to everyone in that room and i'm going to try to join with another person so let's say we do john and we do coding and look at this it says john has joined coding from my chatbot pretty cool and then we can say hello from john so we send that we get hello from john in our chat and then we get hello from john in mark's view pretty cool just for the sake of it let's try to join omar to a different chat so let's do c sharp and it joined omar has joined c-sharp but it didn't say anything on mark's view and if we write hello everyone we only get it on this chat because they're on a different room so that works as expected pretty cool let's head back to our code now and implement the option to leave the room that way the user can join a different one we're back at the front end and let's add a function to basically stop our connection so we can do const close connection async and let's do a try and catch and then i saw console.log e awesome inside here all we got to do is await connection that stop and this will stop our connection now we should add a handler whenever the connection stops this way we can clear whatever or do whatever we need to do in our case we can do connection [Music] that on close there you go and then passing e and we can do set connection we can clean that out and also set messages let's also clean that out now let's go down and let's pass in close connection actually let me do a new line here let's pass in close connection to our chat there you go and let's head over to our chat and in here we're going to get the close connection function so close connection and i don't think this is as big to make a component just keep it simple so we can do class name equal to leave room and then let's just do a button here button variant equal to danger it shows up red then on click let's do close connection we're going to call that and let's name it leave room there you go one more thing let's make sure we are importing button from react bootstrap cool so there's going to be a button showing up now in red it's going to say leave room whenever you click on that you're actually gonna execute the close function close connection function which is the closed connection function right here that's gonna stop the connection and our handle is gonna get triggered too and it's going to clear the connection that we currently have and the messages okay so if now we try to join let's do mark and coding and it says mark join coding and we see this red button leave room so let's click on it and there you go we got connection disconnected now let's go back to our service and when that unclosed event happens we want to send a message to every user in that room saying that this particular person left the chat okay so we're back at the back end and i stopped the service from running so let's add a public and we actually want to override this method so it's going to be a task on this connected async there you go that how to complete it for us which is good news and we can do if connections that try get value context that connection id similar to what we did earlier so we're going to get a user connection so basically if that connection exists in our dictionary we want to remove it since that person is now gone so we can do context dot connection id there you go and by the way this is a way to safely remove it without getting an exception if you try to remove it and it doesn't exist you can crash your program now that we have removed it let's send a message we can do clients that group user connection that room and then we can do send async to receive message and then we can do bot user and here we can do some something like user connection that user has left that's good enough all right let's save this and let's run the service again and keep in mind the undisconnected just like we did on the front end is something that we are overriding from the signalr library so these are executed every time the there's a disconnection right so this is not something that we have to expect explicitly call so this is something that is automatically called so i'm back at the browser and actually i have two browsers open and i join mark ii coding and i'm gonna join joan to coding as well and they're both in the same chat now so if i say hello they're in the same chat right so now if i click leave room okay now i should say john has left okay in the chat and the message was sent from my chatbot so pretty cool i'm very happy that you have made it this far in the video we have one more thing to do and is create a component to list the connected connected users on the left of the chat but before we do that let's take a look at this say we do hi and there's multiple people typing and do hi again hi and then it doesn't automatically go to the latest message so let's fix that and then we'll do the connected users so to fix this we're gonna go back to the message container and we're gonna use two hooks to fix this so we're gonna do import use effect and use ref from react now let's do const message ref use ref think about it as this is gonna be keeping a reference of something right now we're gonna do ref equal to message ref and now with the use effect so we can do use effect and the use effect takes function first and the second argument is a list of dependencies so every time something here changes the code is going to be run so every time messages change we're going to execute this function so in this case we only have this an array right so in this case we only have one dependency which is messages every time that changes this runs so that's pretty much it so if message ref so let's make sure that this is not going to blow up on us so let's do message ref that current and in here we can get the scroll height and client height and this is how you get the value out of it we just do message ref that current so now that we have the scroll height and client height we can do message ref that current that scroll to and left zero top will be scroll height minus client height and then the behavior will be smooth and there you go semicolon and i actually have a typo here there you go all right i'm going to save this file so let's quickly recap so we created this usref and we have a reference to this diff and what we do is every time messages change we're going to run this function let's make sure this is not null or anything like that so it doesn't explode on us and out of the message ref that current we take out the scroll height and klein height and with that we can scroll to and we calculate the top by subtracting scroll height minus client height and the behavioral is going to be smooth now let's go back to our browser and check this out so we're back at browser and now if we start typing hi notice how it automatically scrolls to the bottom and this is exactly what we wanted so we're back at the code and now we're focusing on creating the showing the list of connected users in that particular chat and let's start off by creating a handler so we can do connection that on and this one doesn't exist yet so let's create say users in room and we're gonna get the uh just the users all right so our server is gonna push the users and we're gonna get it here so let's start somewhere and we can just use a let's do const and say users set users equal to use state and this would be an empty array at the beginning and then in here we can just do set users and pass in users and i have a couple of typos so this room there you go and comments there you go and let's not forget to update i missed it oh here let's not forget to uh on close let's clear up set users to be back to a empty an empty array we can now pass users to our chat component so we can do users users there you go i want to save this and i'm going to go to chat and inside here we can just get users and let's create a component to to handle the showing the connection of the users so let's right click on components and new file and let's call it connected users that dress this component can be really tiny we can do const connected users and then of course we're passing in users and right here we can return immediately a tiff and let's have a class name equal to user list and we can do h4 and we can have connected users so that's the title and then in here let's do users map so we're going to go through every user let's pass in index as well and actually i'm missing open parenthesis here okay there you go and let me close it as well and then in here we can do age six say the key is just going to be the index and let's close it here and then let's just show you the u which is the user and at the end let's do export default connected users and save this file let's go back to chat and on top of this div let's do connected users and we're going to pass users users and let's close this save this file and connector user is not defined so let's make sure we are adding this so i'm just going to copy this and paste it in here say connected users connected users save that and now it's successful cool so let's go to our service now and let's make sure we are pushing those users that are connected and disconnected to right here to this handler this way users will get updated and we can display them so we need to make sure we are doing that properly so let's go to the service and add that okay so we are back at the service and we want to make sure the servers the service pushes to the clients all the users in that particular room so we need to make sure we do this every time a new user joins a room and whenever user is disconnected so we know we'll have to add something to the drone room and also to the on disconnect async so i think we should probably start with just sending the information itself so let's do a public and let me stop this from running so we can do public task send connected users and then this is going to take a string and a room and then in here we can do var users and we can do a little link to get this out of the dictionary so we can do connections that values it's going to get all the values and then we can do it where oops and then we can do c from connection and then c or c that room equals to the room coming in to this method so room and then we want to select just to see that user so this is going to just return the users that match with the room passing into the method okay so once we have the list of users let's just return to the client that group there you go group passing the room and then we can do send async to users in room i believe we called and we can pass in the users and make sure you're using system.link for that query to work cool all right so now on this connected we want to do what was it connected send connected users and we want to pass user connection dot room to it so we pass it here that way he knows to update the list and also on join room we want to do it as well so we want to do a wait send connected users and then do user user connection that room all right let's save this and let's run our service and go to our browser okay so now back at the browser let's do mia and let's do coding cool look at that so connect to users we have mia in the chat pretty nice now on this side let's do john let's do coding and john has joined coding and then we see mia and john so let's say we leave the room and john left the room let's say john joins now let's say javascript okay and they're independent pretty cool and with this we have reached the end of this video there are many many features you can still add to this chat so feel free to play with it and improve it any way you like if you do anything cool feel free to ping me add it to the messages linkedin or somewhere i would love to see what you came up with like i always say if you want to continue to improve and get better make sure you practice practice practice i believe in you and i'll see you on the next one

Channel: Asiel Alvarez

Views: 5,749

Rating: 4.9560437 out of 5

Keywords: React, ReactJs, ASP.NET Core, .NET Core, .NET Core 3.1, .NET Core 5.0, Dot Net Core, Fullstack, Full-Stack, Full Stack, Full Application, Complete Application, React and .NET Core, ASP.NET Core Web Api, Endpoints, LINQ, Full Stack Development, Bootstrap, Application Development, Full Course, Computer Science, C#, JavaScript, Integrating, notifications, real time chat, chat, chat application, signalr, websockets, service, web service, two way communication, messages

Id: nEQvA5HfEDE

Length: 67min 20sec (4040 seconds)

Published: Thu Apr 29 2021

Reddit Comments

[u/addMoreCoffee]

Oh man, I actually had a coding assignment that covered this exact stack two days ago. Thanks for sharing!