SignalR in ASP.NET and C# - Building real-time functionalities

hello and welcome to tutorial CU my name is Yannick and in this video I want to give you a brief introduction into signalr and how you can use it to build any kind of application real-time web functionality such as any kind of chat application for example [Music] so here I got like one web application but I opened it two times so I got two clients right now one on the left side one on the right side the last one is called Peter the right one will give it a name Mark let's say Peter hi now we're gonna send it and as you can see it's updating in real time on both sides we don't have to refresh right so it's just like kind of a websocket you maybe understand that it's some real-time broadcasting right hi Peter how are you you can see now I send it on the right side on the right client and on the left client it updates so right now it's uh just hosted at my localhost for sure but if you would upload it anywhere and we would have 10 well uh 10 clients then 10 clients will be able to shed in real time without the need of refreshing the page now chat applications are just an example you can for sure use that kind of real-time broadcasting for nearly everything else wherever it makes sense for your specific business use case alrighty so now let's get started let me show you how you can build that on your own so I will not write the entire code I will just walk you through what you have to do in detail so that it really doesn't take too long and you can still follow along or just sit there and watch the video and become an amazing developer just by paying attention awesome so here we need a nuget package and it's called Microsoft asp.net core signalr common so things have changed back in the days you were able to Simply use that Microsoft asp.net core signalr but as you can tell this package version is deprecated so right now we have to use signalr common awesome now go ahead install the package and that's it what we have to do on this side now if we go to our program and scroll down we can see that we add to our service container signalr right so add signalr service to the specified service collection Now by adding this we are able to set up and Signal our Hub which we can use to connect to so that clients connect to our signal R Hub now if we scroll down and that's very important we have to make sure that we for example specify a specific Hub where our clients can connect to for example I set up a chat Hub right that's the class I've connected I will just get to that in a second and I called it or I registered at the endpoint slash chat so if you have different well real-time functionalities you can register much perhaps for sure now we configure an endpoint for that so we have that map Hub right that's the functionality that is getting provided from signalr now that class that I use here chat Hub let me just go into that it's basically a new class and it's inherited from The Hub class from signalr that's very important and inside here the rear magic starts to happen right here we got another magical thing that's our c-sharp progress Academy it's a self-paced online course in video format right and it teaches you full stack sea drop development to boost your career helping you to land your very first job as a developer or earn more money as an experienced developer so I'm absolutely confident to say that this is the fastest way on how you can progress as a c-shock developer so go ahead check it out right now you can find the link in the description below or popping up right now at the top right corner and please never forget to subscribe to our Channel if you haven't already because you are interested in becoming a better developer and we can help you with that so that's enough reason for you to go ahead and click on that subscribe button right now also if you like that topic signal or an HP make sure to give this video a thumb up alrighty now let's continue before we take a look at that send message method right here let's switch over to the index page which is really showing the graphical user interface which you have just seen right so here you can write down your name that's just basic HTML we got a button for sure and we also have our discussion list where all the chat entries the messages will get displayed now very important we need to add the signal our package for the front end right here now let me open up something there we go that's JS deliver right that's a CDN a Content delivery Network where you can simply grab that package it's called add Microsoft signalr and as you can tell this is the client right so we need a signal our server we already installed the package and now we need clients so for that kind of broadcasting we have clients that connect to the hub as I said to the signalr server let's call it like that and then you can simply say okay the client send the message right and then the server receives that message and forwards the information to all connected clients that's basically how networking in such a scenario is working alright so go ahead and copy that over if you need it as I said make sure it's Microsoft signalr it's the HP net core signalr client that's very very important now afterwards as I said since that's declined we need to connect the client to our Hub so our hubs like our signalr server right and clients need to connect to servers so here we set up a connection new signalr Hub connection Builder right it uses our URL so our server URL from our asp.net core application it's hosted in my localhost so it's using my localhost slash chat and it's slash chat because in our program CS we set up the hub for slash shed so we connect both of them together so that all of our clients connect to the correct Hub now afterwards we'll build that right here and then we start the connection so simply call connection start and then we just catch for any well errors that could appear so that we can see them in the console right now next up we simply grab our button right here we add an event listener on the click event so nothing really special so once you click that send button we get the input from the user field right so what's your name and then we grab the message from the message input so let's say hi Peter or whatever now that info gets saved here nothing special as I said and then we simply take the connection and we invoke so we run right invoking is nothing else than just calling a method or a function for example we want to invoke the send message method and we want to provide to information User and message so this is optional you can also only in just submit the information about the message for example no problem but it's crucial it's very important that you make sure that this signature so send message first parameter second parameter is matching the structure of your Hub I will get to that in a second now afterwards we simply catch for any specific error series something appears that we get the information about that now the signature review sent message user message let's take a look at our chat Hub that we have just created right chat hub you can see we got a public async task it's called send message right so it's the same name and it has the same signature well parameters user and message it's very important that both of them are matching send message use a message sent message user message and now as I said just keep in mind Peter is connecting to our Hub he says in the chat hi he clicks on send message he sends that information to our Hub right send message and now it will get broadcasted to all connected clients so the server will now tell every client hey Peter send a message here's his input or his name and his input so he wrote down most message right and now we're going to invoke on all clients something which is called receive message that's also just a functional method I will get to that in a second but just make sure to understand that so Peter wants to send something so he writes down hey he sends it our Hub takes note of it and submits all connected clients of that Hub that Peter has sent something now the server as I said notifies Everyone by invoking the receive message method and submitting the information that we want to forward so for example Peter's name and Peter's message now let's switch over to the last step in the indexes HTML if we scroll down you can see that we have a listen here connection on receive message right and that's exactly the one that we are sorry invoking right here received message so once we send that to the client and we are well listening to that event or to that web call we can then just invoke that party once it appears we will simply we are simply taking user and message again we're building just a small string user then a colon and then the message we create a list item and we append it to the list which is called discussion which you can find right here that's basically what's happening so Peter wants to send a message The Hub takes note of it and enforce the information to all connected clients by invoking the receive message method or function great so let's start our application again just to take another look on it but as you can see it's pretty straightforward once you understand how that kind of connection broadcasting or real-time functionality however you want to name it is working right so if we write down Peter test now since Peter himself is a client he will also get the Callback well kind of callback he will also get the information from The Hub the receive message event so this is why he also sees his own message right and that's it for this video so if you have learned something new if you are a better developer now make sure to subscribe to our Channel smash the like button right down into the comment section below what you want to see what.net topics you're interested in for sure check out our C sharp progress Academy because it turns you into a better c-sharp developer and that's what you for sure are interested in so thanks for watching and see you next time foreign [Music]

Channel: tutorialsEU - C#

Views: 18,163

Keywords: Tutorials, Tutorial, Programming, Course, Step by step, programmer, learn how to, c#, .net, .net core, dotnet, core, asp, asp net, c sharp, csharp, programming, signalr asp net, javascript, visual studio, example, real time, websockets, chat application, signalr, realtime, web sockets, long polling, .net core signalr, asp.net core, aspnetcore, asp.net, how to, coding, machine learning, microsoft, web development, tutorial, angular, code, js, azure, dev, computer science, chat, net 7, dotnet 7

Id: LEImpa77irI

Length: 10min 29sec (629 seconds)

Published: Tue Feb 07 2023