Using SignalR in ASP.NET Core & React to Send Messages

hello everyone how you all doing today today what we're gonna do is we're gonna build signal R and then we're going to integrate it into asp.net core and we're also going to build it into a react app so what's going to happen is that we'll build up an API and an end point where we can actually send the message and then we'll build some components in react so we can actually send the message to the dotnet core the asp.net core API application and then send the message back to the reactor all done through signal R so let's get going that so create an asp.net core API application so need to select SP dotnet core web application like so let's give it a name around the code the react signal art and we will create that always takes a few moments here we go so we need to select API so let's select that and create it so yep loading up the project now so yep put all our boilerplate files in there need to make a slight change to the launch settings it's what happens is that it always loads up the weather forecast when you actually run it through either iOS Express I'm going to change it because we're going to create a client app folder and that's where our react app will sit we don't wish to update now you don't really want to watch that day so we've done that next thing we need to do now is we need to go ahead and create the react app so let's go ahead and do that how small is that it's really small no does it seem to work does it oh well I have to I'll have to live with that going to source repos we created around the code react signal are yes so let's go in there so what we need to do now is we need to load up the terminal and now we need to create our react app so let's go ahead and do that so we do yawn create react app and then we're going to call it we're gonna put it in a client app folder so we specify that and we want to use typescript so hopefully that will go ahead and create it for us takes a few moments now you can create a react app through visual studio but the only problem is is that I couldn't find a way of doing it so it created it as typescript it's always doing it as JavaScript for some reason that anyways so we're going to go ahead and do that then after that we need to go back to our asp.net core application we need to install a few things first so we need to install Microsoft asp.net course par services and spa services extension so let's go ahead and do that so it's Microsoft HP net core got small services it's still creating the react app at the moment so it might be a little bit slow but it will get there probably shoulda waited for the reactor to finish but anyways you yeah that's like this might be the final bit then we might have our react app no it's still doing something else at the moment and it's like it's done now okay and well yes I live along a main road so you hear sirens going past that's they come down here a lot put it that way the emergency services right so snow it's still doing stuff at the moment this is basically what it creates in our react app so we're in our client app folder and then yeah it's created a couple of TX TSX files which is typescript we were only really going to be working with the app file in this demonstration that's right so we've managed to also add our spa services then we need to add another one in as well but I'm gonna wait until they react apps finished till it's decided it's taken taking a while isn't it yeah really don't know what's going on there but anyway Setzer at least get it ready so yeah we're gonna need spa services extension as well it's what's included in that is the reactive element server so what we can do is we can use Visual Studio to actually build the react app when we're running the application so it's really quite good so still it's still doing stuff done right react apps all done all being well let's go ahead and install this extensions what's this to enable tax rate compilation in your project piece install a little bit later I think it causes problems we might have to install that but we'll leave it for now cool so that's all done so what we need to do now is we need to make a few configure a few changes to our startup file so that's like that up can be a little slow at this point so you just bear with me on this but here we go so we've got our configure services here what we need to do is we need to add the spa add spa services even not server services add spa static files now what we need to do with that is we need to configure the root path to go there so let's go ahead and do that and it's configured that root path and it's going to be in our client app and then what it will do is it will build all the react files to the build folder so we need to just tell Visual Studio tell the asp.net core application to do it in there so that's all done that's all good need a semicolon there boys work need to make another change as well and this is where we need to use spa so single page application in case you didn't know so it's go in there and do that again we need to set the source path in here so we set to client app we don't need the build folder in this one and we need to specify that if its development I only want to be running this in development we need to use the react development server and we need to specify a script or start and if we go back to our react file if we look at the package dot Jason so that will represent where can I find it there's scripts and start so you got that's basically well it's going to run react scripts that start so when it's running in development mode it's gonna run that script which is cool so we've got need a semicolon there so that's all good yeah that well let's just check and make sure this is a working first because be a bit of a crime if we did all this did all the work and the application isn't even working so what want now is to run our react app through Visual Studio through this web application so we're just going to run the application and see what happens so it takes a few moments so what we're going to be doing after this is we're actually going to be adding signal are in both projects so we're going to add it in the react app first and then we're going to add it into the asp.net core application as well so here we go we've got it loading up it's thinking about it still thinking about it so this is one of the reasons why you won't want to run the react development server in production mode you you've almost got two servers running at the moment and it's just not needed what you do is just build all the react files and I think converts it into JavaScript for abduction because otherwise you'd be waiting here a long time as well here we go so it's loading up there we go so it says edit source at TSX and safe to reload so if we go into the app ESX you can see exactly rendering what's actually in that file so that's all good so we can stop this for now what we need to do next is we need to go ahead and add signal our into our react application first let's go ahead and do that it's going to wake up so it's what is it it's Microsoft signal are there is another one ASP Nick core signal are but I think that one's out a day I think this the latest one it's three point one point five and that's the one I'm using and I've actually done the wrong command there I've actually done the one for the NuGet package manager console I need to do a yarn add so let's go ahead and do that that's the command I need to run in a minute well it's sort of like that so people do yarn yarn at Microsoft signal are hopefully this time it will work yeah that's good so all is good on that if we have a look I need to relate the package file again but what we can do is we can actually see that it's installed so that's have a look we sit in there kind of actually sit in there to be honest so I would have thought it would have added it in there I can't actually see it in there I might run that one more time just to make sure because I'm not convinced that actually it's no it didn't actually I was pointing it to the wrong place that might cause some issues anyways let's go ahead and do this see what happens why we're doing that we might as well go ahead and install it on dotnet application and we need to its microsoft asp net core signal our client so that's what we need for that is that looking better now before we do that reopen it yeah there it is it's up the top there Microsoft signal our three point one point five now we're going to install it subtly the same version on here and I've lost that let's go ahead and do that again store the package so we will have to do some configurations in our dotnet application in the met right that's all added so let's go ahead we need to now do some configuration so we're in the startup that's convenient what we need to do is in configure services which is up here we just need to add signal R and hopefully it'll be on there there we go add signal that's all good there is a signal our core as well don't know what the difference is between the two what will go ahead with that one for now next what we need to do is we need to create a signal our message hub so let's go ahead and do that we're going to call it message hub so what we're going to do is we're going to send messages from the reactor to the dotnet core and then the dotnet core app will react will send a message back to the react saying it's got the message so relatively straightforward nothing too complicated in this demo so we call the folder hubs and let that create itself so yeah that's so good just need to wait a few moments create the folder and then we're going to call this message hug so that's going to go ahead and create it what we then will need to do is we'll need to basically route the hub to a particular endpoint so we're going to route it to forward slash message so I'll show you how to do that in a minute we need to inherit the hub I believe yes just hub there's anything else we need to do with that we need to just load in the assembly as well which is going up there much less v-net core signal are that's all good so we've got a hub in place we need to so we've done that we need to map the hub next so we can do that down here so if we we need to go into endpoints map hub and then we call it message health anyway yep called it message hub and then yet we're going to route it to a forward slash message so that's so good nice so what we need to do next is we need to create a controller so we're going to get rid of this weather forecast one this default one anytime today yeah I think there's a few issues running a react app with typescript so it isn't normally this slide so I'm not too sure what's going on with this it shouldn't be taking this long but anyways we've done that let's create a new empty controller let's click on add so we're going to call it message can shoulder and it's gonna route to API forward slash message when it wants to cool so yes we need an empty controller and we need to create it as a message controller so add that on so what we're gonna do in our message controller is we're gonna inject our message hub into it and then we're going to use the message hub to send out a message through one of the methods in it so here we go so what we need to do first is we need to specify this API controller it gives you all your jason stuff and everything we also need to specify the route which will be API for such message so that'd be the route for the controller and then we need to create a new method or our new view isn't it action it's an action isn't it controller action view specify the fact that it's we're going to be doing a post method in it so we've got that on there oh no first we need to do a constructor and we need to pass in the actual hub for it so I'm at hub that we created which was message hub you have to pass it in through this eye hub context for some reason so that's okay so we've passed that through there normally do this is a c-sharp thing normally do a not null check with c-sharp 9 it's going to become a lot easier you just need to add an exclamation mark but that's not going to be out to the end of the year believe it's released with dotnet 5 so it's just do a read-only property up here and then what would do it is will store our message hub in here so let's go ahead and do that so we can do that equals message hub right so that's that all good we're gonna change the name of this no we're not cuz we've already done that what we need to do next is we just need to create a new class we'll call it message post we're just gonna have a string in here message so what we do is when we send the JSON over we're going to have a key of message and have the message inside that key so it's basically going to parse it automatically into this message post class so so we go in there so that's all good so next thing we want to do is we want to make this asynchronous so we're gonna have a task in there and we're gonna include the async key keyword there that's all good what we're gonna do next is so basically every time this method is here it will basically send a message to all clients that's we're going to specify in here saying that we've basically received the message so that's what we're gonna do now so we go to message hub all clients so you can just one word just one point with that is that you can specify users as well so if it's for one particular user you can do that but we're not gonna look into that today we're just gonna send it to all clients at the moment so this is all clients that are connected through signal are so we're going to create a sin to react method which you'll see in their react app in a minute and it's going to be the message and then we'll use the message post message has been received so we're gonna do that and then we're just going to return a 200 response we're not going to actually return anything other than that so it returns an OK there as you can see getting an error there's some reason - sure why arts expecting a semicolon it's why okay so that will return a 200 response or will is good on that nice so that's all good now we can move over to our react app and we're going to make some changes into this app class here so what we need to do first is get rid of all this for now what we're going to do is we're going to create a new react FC action component I believe it stands for so we need an arrow up there so first thing we need to do is we need to build up the hub connection for signal our side that's so it's going to be new signal our which is probably going to what it's going to throw an error but what we can do now we should be able to import it all then well so we say import on Microsoft that signal our is that right no it is case sensitive so is that working no we don't seem to be doesn't seem to like that at the moment or does it you know it's not picking that up for some reason let's go ahead and let's see what's happening let's see so cannot find the module at the moment which is weird because I'm pretty sure we installed it but we did have that issue didn't we where it went in the wrong folder so curious to see if that still causing an issue maybe if I remove that there and that one because yeah it should be able to find it's definitely in there so if we close that down and reopen it back up let's at least have a go and see if we can actually see if this actually runs because it might just be that it might be an intellisense problem wouldn't surprise me let's serve our children will actually run so it's having to think about it because it could be something to do with case-sensitive as well but wouldn't folks say so no it's still complaining about an error can't find the module so we might need to reinstall that because it's definitely complaining about it at the moment so let's go ahead and do that let's give it another guy see what's going on there why we're going ahead and do that they I think we're build up our react application obviously we're going to get the errors with signal are for the time being which is bit of a pain but we'll get for it so we need to find the hub connection builder and then we'll say we've URL so this will be our URL which we declared in the dotnet core application so with URL and then we can just run the build like so are we having any luck so that it's not bizarrely it's not actually fair enough error well certainly it's only phone and air out there for some reason I'm just gonna check I've got the spelling right as well oh there we go silly May it's so full with slash that was missing so always the silliest problems isn't it nice so we can actually go ahead and do this now hub connection start so we've got that there so that's built up connection we're building our connection with signal are and we're starting it up now what we're going to do here is well place are going to build up a list of all the messages so there we go list of string and then what we're going to do is we're going to build up a message react function component and what that's going to do is basically show all the messages it's going to add to this list that we've just created and then it's going to show all the messages all the responses it gets back on the asp.net core application so we're going to create a message crops and that's basically going to store our connection so yep declare it as a signal hub application now we're going to create our messages react component so it's a react FC and what we're going to do here is we need to pass in a generic type of message props which is what we just created at the top there so let's go ahead and do that so yep we've created that it's gonna throw a message because we're not actually returning anything at the moment now we're gonna set up an actual use state so what we do is we fire something to the use day to actually update the react component the actual component so there might be a better way of doing this but this is the way we're going to do it for now is we're basically gonna every time a message is created it's basically going to set a new date which will allow us to update the messages there might be a better way of doing it but I think for now this should work all being well so let's go ahead and do that so there we go got you state then it's throwing an arrow for that we need to basically import it into the file so we should be able to do a quick fix yeah add use state into the react folder so that's all good now we're gonna use the effect as well and this allows us just to run it once I believe because otherwise every time we're updating the messages it's going to keep on update in this next line of code and this is basically going to create the syn to react so it's going to look out for any messages that get sent through that obviously if you remember in our controller on our asp.net core application we're going to be firing it following a message through that method and this is basically going to allow it to listen to it so let's have a look so what we need to do is we need to go to message props so that's what we passed in there got our hub connection and we've got unsend to reiax its lowercase s at the beginning I mean we've got our message so message is gonna get passed through so I can show you that in the controller again I've got that open so yeah so yeah it's gonna be passed in frozen string so we've called it message in here basically call in the parameters message and we're going to push it into this alright just list the right up here that we've created so we've got that there then we're going to set a date of new day and what that's basically going to do is it's basically gonna refresh this messages function component here so it can basically because what we're going to do in a minute is we're going to actually render all the messages stored in the list and we're going to return that so that is literally what we're going to do next so you need to make to add that voice it will not work and then yes so now we need to do a return and we do list map message so we're going to pass in the message and the index now it likes to have unique keys every time so we're going to add a unique key in here so we would do message and then we're passing the index so so now it's got a unique key every time which is good so we've got a P there as well and then what we're gonna do there do we need to do anything yes we need to pass in the message of course we do so every message that's in there it's gonna be wrapped around a P tag which is all good also getting an error at the moment so we need to close off these empty brackets nice so we're getting an error there we need to import that in and it's partly react library so you've got you state and use effect there that's all good so what we need to do we just basically need to call this into our app and then it will basically return a list of all our messages which is good so let's go ahead and do that so we passing the messages we need the hub connection which is up here so it's this hub connection here we need to pass in a reference to it so go ahead and do that right that's so good we're not getting any errors now it's good it's open well we should be able to run that through our asp.net core application and what we're going to do is we're going to use postman to test out the message in so we're going to basically use postman to run this method this Gregg method so how are we getting on it's still building at the moment but yeah what we do is we'll send an API a post HTTP POST verb request to this message controller and because this hasn't got any special route is going to go automatically to the create method so that's going to be set as a default so here we go so yeah it's loading up our client app which is all good I'm gonna load up postman while it's thinking about doing that so here we go we've already set up the test method anyways we need to change the IP tax I think it's four four three five one and we're doing it as an application Jason I'm going to send the message for it so once the application loads up yeah it's empty at the moment but once we run our request through postman it should come up with the message that's that it states in here basically the message whatever message we're sending has been received let's go ahead and see if that works so hopefully we get a 200 response which we do that's all good and yeah you can see it's already added that to our client app which is all good but let's just send another one and just make sure that it's storing all the messages for us so we're just going to say hello world I think people still use that don't they don't know they used to about 15 years ago right hello world yep so we got 200 response there you go you can see so that's all work and that's all good so what I want to do finally is at the moment we use in postman but I sort of want to build the functionality to be able to do it in our react app so we have a text box and a button it's gonna be a lot lot easier look a lot better to demonstrate as well what I also want to do is just demonstrate it in another browser so I have two clients set up because the good thing about signal are is that all clients connected in this instance will see the same message so let's go ahead and do that so what I need to do is I need to create a new function component in here I'm going to call it send message so it's part of the react function component so we've got that in there what we're gonna do is we're going to set up a string of message and this will basically represent what's in our text box so we're going to use the state again oh by default is going to be empty so we've done that what we need to do next is we basically need to set up a function where when the Texas change we need to be basically updating this message that doesn't seem to be any sort of built-in two-way binding which I think there might be with angular but not with react I don't think so so we set up a message change and then we need to pass in the event as a parameter so it's change event and it's of HTML input we're going to set up her input element to store all our text in right that's that done so so we've got that there so we just check that there's an event and an event target because the event targets gonna actually have the value of the textbox in there so we've done all that and then we just need to call this set message up here and so that will basically go in there and we need event target of value that will have the actual value so we've got that in there that's all good lastly what we need to do is we need to well first of all actually jumping ahead of myself here this will actually do the return so we're going to do a label here and it's the label is going to specify enter your message got that in there after that this is where we're going to do our input type text and the on change we're gonna fire it up to this message change function here so just simply wrap it around curly brackets like that and you can see it's already gone through and we also need to specify the value of message so that will be let's do that let's close that off that message is basically up here so when you set the message it will so when you basically run that it basically sets the message in that variable there right so that's all good right we just lastly we need to create a button so when we click on the button where you're going to send it off to our API and then that will send a message back to our application or all clients that are connected to it so we're gonna have a button and it's going to be add message and we're gonna have to create an on-click and this is gonna be message submit which we haven't created yet so it's gonna fry an error that is what we're gonna do now so that's before we do that let's just sort out the errors that we'll get in here that's so good needs to have a forward slash in so yeah the anti-area are getting at the moment it's a fact that message submit doesn't exist so let's go ahead and do that so message submit so we need to once again pass in an event the event is reactive topped mass event so wrap that in curly brackets once again we check to see that the event actually exists and if so we use the fetch method so what we do is we'll call our endpoint so it's local host I've got the number for 4:35 one API message so we can do that and then we need to specify that the method is a post method and then headers we then need to specify those we're sending through application Jason we're sending through Jason so we need to accept it and then we need to specify a content type of application Jason nice that's all good and then the body what we need to do is we need to do use the JSON string of five to convert it into a JSON and then we'll pass through the message so the message will be there and this message here it's basically going to correspond if we go back to our controller it's got to correspond to that message post here and as you can see we're using the message post as a parameter in the create method so that's all good I think so yet last thing we need to do is once we sent it off we just need to reset the message back to an empty string right so that's what we need to do next last thing we need to do actually before we can run it is we need to include our send message function component in our app so we can actually send the messages so we need go ahead and do that so it's all good yep we need to just add an empty curly an empty end tag at the end right that's so good we must stop saying that actually you can say no let's run our application and see if it's all gonna work I think it will and while I'm there I'm going to show you having two applications connected and I can show you how it works well basically how it works it basically show you that how many applicants are how many clients you've got connected they all show the same message so we've got our Firefox here so we'll hook it up to the same URL so yes yeah invalid security certificate should still be able to run night little surprise though that doesn't do it on crime it only does it on Firefox for some reason not too sure why at anyways so it's still loading up at the moment all being well though it shouldn't take too much longer and what we should have is we should have a text box and a button and at this point we won't actually have any messages because we haven't send sent anything at the moment so that's our Chrome and it's just loading up in Firefox now so whilst it's actually doing that I might just make sure and test that it's actually working so let's send a message to us oh no that didn't work did it why did that not work it's quite again nope that didn't work for some reason we hooked it up all right didn't we you've got some message in there just want to check that we've hooked it up all properly message submit it's just check and see if we're getting an error from the API because it could be something to do with that we can see what's going on here so if we go into developer tools and hopefully that will load up let's just see if we get we might be getting an error hopefully we are so what we get in all that's ah yes that's why let's continue that maybe that should be alright now yes so it's got the connection let's try that again yes there we go finally got it working so to send another one yes that's better right and as you can see in Firefox because it's already been connected to the client to the signal are it's basically received the message as well so let's send a message in Firefox and let's see if Chrome or Chrome application or running it in Chrome will actually be able to receive the message so let's go ahead and do that let's put hello world again cool so yet you can see Chrome and Firefox they both show the same messages so yeah that's all I've got for you today hopefully going forward will implement the clients bit and sort of maybe go for specific clients so we can basically only send messages to particular clients we may have a look at that and if you've got any suggestions and just give me a chat in them in the comments below and for more articles visit around the code comm all right a lot of dotnet articles in there so go ahead and check that out and subscribe to my youtube channel around the code calm for the slash youtube and follow me on twitter it's at the round at around the code so thanks very much for watching and I will see you next time you

Channel: Round The Code

Views: 17,528

Keywords: SignalR, ASP.NET Core, ASP.NET Core MVC API, React

Id: YU-isq-PQ_Y

Length: 46min 55sec (2815 seconds)

Published: Wed Jul 01 2020