Building Real-Time Applications With SignalR & .NET 7

if you want to build real-time applications in.net you need to know how to use signal R it's a library that allows you to connect your clients to your server and you can use it to send messages notifications and real-time updates in this video I'm going to show you the basics of signalr so that you can get started with building real-time applications to get started with signalr we need to install the signalr nougat package so I'm going to search for signalr and the nougat package that I want to install is the Microsoft SP net core signalr client so let's go ahead and install it and let's configure what we need to start working with signal R so the first thing you want to do is introduce the required Services by calling Builder services at signalr this is going to register the signalr specific services with dependency injection the next thing you need to are working with signalr is a hub I'm going to introduce a class which is going to represent our Hub and I'm going to call it chat Hub so let's make it public and sealed and I want to inherit from the base Hub class which is coming from signal r a signalr hub is a central component that allows your clients to connect with your server and for your server to send messages to your clients it exposes a lot of methods and properties for doing this and let's start by overwriting the unconnected async method so this method is invoked whenever a client connects with your Hub if I try to access the Hub instance by calling this I'm going to see some of the properties and methods that I have access to the client's property allows you to access the clients that are connected to this Hub instance and then you can do things like send messages to all of your client friends maybe send message to a specific client signalr also has a concept of groups you can take a subset of your clients and put them inside of a group and then you can send messages only to this specific group and then there's also the Hub caller context which gives you some contextual information of the current client which is connected to your Hub now this could be null if you are accessing your hub from the server side but we're going to talk about this a little bit more later so let's do this whenever a new client connects to our signal R Hub I'm going to send a message to all of my clients by saying clients all and then I can invoke the send async method which is going to allow me to communicate with my clients so the first argument is a method that I want to invoke on my client side so let's call it receive message if I have this method defined on my signalr client then it's going to be invoked with whatever arguments I pass from the back end the argument is going to be just a simple message saying who is the client that just connected I can do that by accessing The Hub caller context by accessing the context property and I have access to the connection ID which uniquely identifies this client I can send a message saying this connection ID has joined and then signalr is going to take care of sending this message to all of my clients now that I have my Hub I need to expose it somehow so that my clients can connect to it I can do that by saying map Hub and specifying my chat Hub class and then I can specify a route which you can use to connect to this Hub so let's say this is the chat Hub and now I can use this route to connect my clients to the chat Hub I'm going to add a breakpoint inside of my unconnected async method and let's start our server I'm actually going to use Postman to connect to my signalr Hub and I can do that by creating a websocket request I already created one ahead of time and I'm going to walk you through how you can do that you need to specify a route to connect to your signalr Hub you use the WSS protocol which stands for websocket and specify the route to your API and then you specify the route matching The Hub that you actually want to connect to in this case it's going to be the chat Hub to actually connect to the hub you just need to send this message I'm going to add some blog posts in the description of this video explaining this in more detail so when I send this message I'm going to hit the breakpoint in my chat Hub and access the unconnected async method as you can see we have the connection ID assigned to this client and then I'm sending a message to all of my clients including the one I'm just connecting with stay stating that this connection ID has just joined this Hub so I'm going to press continue and let's examine what we get back in Postman at the bottom we get a message that we successfully connected then we have the message that we sent to signalr specifying the protocol and version that we want to use and after that we have the actual message that we received back from our Hub so this is the message that the Hub sent to the client saying this is their target so the target is the receive message method that should be specified on the client in our case that doesn't exist because this is just a postman request and then there's the arguments matching the message that we sent back from our server which is the connection ID and then has joined the other messages that you see here are just heartbeat messages that the Hub is going to be sending to our client every 10 or so seconds so this is how you can connect to your hub from Postman now I'm going to show you how to invoke a message on your hub from the client let's define a new method on our chat hub which I'm going to call send message it's going to accept a string argument representing the message that I want to send in the body of My Method I'm going to access all of my clients and I'm going to send the value of this message to all of them so this is a broadcast message we're going to be sending to the receive message method defined on our client and for the content of this message let's say this connection ID is saying this message I'm going to start my server again and head back to postman first I need to connect with my Hub again so I'm going to send the connection message and I get back a message saying that this connection ID has joined and then how do I invoke a message from my client on the Hub so I need to specify a different message format it contains the arguments array that I want to send to my Hub then the target is the send message method the final Hub if I send this message to My Hub here's the request sending this message to My Hub so it's sending the test message to this method and then this is the response that gets broadcasted from my Hub to all of my clients saying the target is receive message and the argument is this connection ID just said test message so this is a simple way to implement some sort of chatting functionality between your clients I showed you how you can invoke a method from the client on your Hub but sometimes it could be interesting to be able to invoke a message on the client from the server side this can be particularly useful when you want to send notifications or some real-time updates to your clients so that they can react accordingly on the user interface so here's how you can do that and I'm actually going to start by making our Hub strongly typed what this means is you can define an interface that is going to represent the messages that are Exposed on your client so I'm going to create an i chat client interface and this should represent the methods that are available on my client I'm going to Define our receive message method on my client with a string message argument and then this is what I'm going to call on my clients how do I use this on my Hub well I need to inherit from the generic Hub and specify my chat client so what's going to happen now is the send async method allowing you to send to some specific method on your client is no longer going to be available you have to use the methods that are Exposed on your strongly typed client the benefit is you don't have to use strings to identify methods on your client you can use the ones exposed by your chat client interface instead of send async I can invoke the receive message method and just pass it the message that I want to send and the same applies here so we're going to be sending this message now the chat Hub becomes a strongly typed signal or Hub and I wanted to show you how to send messages to your clients from the server let's add an endpoint to our minimal API and I'm going to give it a round of broadcast I'm going to accept a message that I'll be sending as a query parameter and then I need to inject the actual magic which is my I Hub context for the generic arguments I'm going to specify my chat Hub and my I chat client I'm making my Hub contact strongly typed because my chat Hub is also strongly typed and this will give me access to the methods that are Exposed on my my chat client interface so let's define the body of my endpoint and I'm going to make it asynchronous so I call my broadcast endpoint on my API and using my Hub context I can access the chat Hub I can then get the clients that are connected to my Hub and invokes a message on all of my clients I could also make it specific by calling the clients method and specifying which connection ID I want to use but to make things simple I'm just going to broadcast to all of my clients and I have access to the receive message method on this client and we're just going to pass it the message that we receive on this endpoint and then from our endpoint I can just say return results and for example no content I'm going to place a breakpoint here and let's start our API we're back in Postman and I'm just going to connect to my chat hub so my connection is established and I'm going to head over to Swagger here's my broadcast endpoint I can use it to send a message to my API and when I click execute I'm going to hit the breakpoint in my minimal API endpoint and we're going to use our Hub context instance to send this message to all of our clients so if I step over this and I move to my Postman window you're going to see that we did receive this message from our Hub so the target is the receive message method defined on our client and the arguments contain the message that we send through our endpoint and the Hub context to all of our clients connected to this Hub instance so using the Hub context you now have a powerful mechanism for sending messages in real time to your clients signalr is an amazing library for building real-time applications and if if you enjoyed this introductory video then make sure to smash that like button and until next time stay awesome

Channel: Milan Jovanović

Views: 57,536

Keywords: signalr, signalr tutorial c#, signalr asp.net core, signalr react, signalr clean architecture, signalr c#, signalr .net, signalr .net 7, signalr websockets, signalr notification, signalr messaging, signalr hub, signalr client, signalr strongly typed hub, signalr async, signalr .net core, signalr hubcontext, signalr ihubcontext, signalr sendasync, signalr tutorial, signalr 101, signalr introduction, signalr basics, signalr postman, signalr postman websocket request

Id: 9_pRk7PwkpY

Length: 12min 22sec (742 seconds)

Published: Tue Jul 04 2023