[archived] Expose Values for Real-time Consumption with SignalR in ASP.NET Core

Instructor: [00:02] Let's start with the folder structure having a separate client and server folder. In the server folder, we'll create a new Web API with the .NET CLI and the command .NET new Web API.

[00:17] Having done that, let's head over to our startup.cs file. For accepting request from a different origin then the one our servers running on, we have to add cores to the pipeline end, of course SignalR as we want to use it as well.

[00:37] As we did not install the new Git package for the SignalR yet, let's do that next. Please pay attention that this is a prerelease of SignalR core and not the final version. So, things may change over the while.

[00:52] After installing the package, let's take a look at our startup.cs again. The extension method add SignalR is no now, and we can use course and signal R in our pipeline now.

[01:04] We can configure that in the configure method. First, let's use course and for the sake of simplicity, and this demo, we'll allow any header method origin and credentials. Please do not use that in one of your production applications as it accepts really every request from everywhere.

[01:26] However, we have to use SignalR as well and configure some routes which can be invoked from the client to take advantage of SignalR. We can use useSignalR and pass in parameter into method and call map up, mapping a route passed as a string which can get called from the client to a class which represents the interface which can get invoked.

[01:48] These classes are called hubs. Let's create this message hub next. Therefore, we create a folder called hubs and a class message hub in that. This is a normal C# class which in here it's from the hub class from the SignalR namespace.

[02:07] Inside that we can place a method called send, which takes a string parameter called message, and broadcasts this message to all connected clients. We take response as the event name and pass the given message as parameter. Let's let our startup class know about this message hub and head over to our client where we find three JS files and one HTML file.

[02:37] The SignalR file comes from just the SignalR npm package directly, but you can also download it from GitHub. I just copied it here. You can find the links in the description of this video. As SignalR does not need jQuery any more, we only have jQuery include it here to make access to the DOM elements easier. Otherwise, we would not need it for using SignalR.

[02:59] The index.html is just a file which provides an input, we can type text in, a button to file our request, and an unordered list to apply items too. The file check.js should contain a logic. Let's start there.

[03:17] First, we define the URLs. As a server is running on the local hubs Port 5,000, we also have to define the SignalR out we mapped in the startup.cs, as this is our URL/messages. Then, we can establish the SignalR connection and register on an event we send from the server called response.

[03:41] This is the identifier we gave in the hub method. The second parameter is the fat arrow function, which takes the given parameter, so we will log it out and just append it to our HTML list.

[03:54] After that, we can start the connection. This returns the promise and we can log out the success. Finally, we have to add a click event template to our button which will call invoke on our SignalR connection to that given route which is mapped to the hub which is created.

[04:12] The first parameter is the method we want to invoke. The second parameter is the parameter we want to pass. At the end, we will set the input. That's it. Let's start our server in client via console and see that in the browser.

[04:28] I open two different browsers to see the message is going around. On the right hand side in the console, we can see that the connection was established, and we cannot type something in the text box and send it.

[04:40] With the click on the button in the JavaScript invokes the method on the SignalR connection, calls the hub and broadcasts the message to all connected clients. We do catch the event on the other side, console log it out, and you can see that we append the sent messages at the list.

[04:57] Fine. That works. How about the server invoking actions to a normal put, post, patch, or delete request? We can also handle that with SignalR. Let's take a look at our controller, we can file request to.

[05:13] First, we can create a constructor and as we add it SignalR to a services in this startup method, we can simply inject a generic interface IHubContext into our controller, with our hub getting passed as the type. Let's concentrate on the post method, so I can rid of all the other methods here just to keep it simple.

[05:41] In the method, of course beside the normal post actions, we can call the same method and send an event called item posted, and we're just passing the value we get given in the request body.

[05:57] Let's run this now and head over to our client HTML and add a new button, and just call it server invoke. With an id post message, and add a click handler to it, which just pose a hard code of string called "hello" to the backend.

[06:21] Let's add the URLs and register to the event the server composed now.

[06:24] [pause]

Instructor: [06:40] Oh, and let's fix the type of here. Now, let's start the browser again and click the new button. You can see in the console that the injected IHubContext broadcasts messages, and also as the client invoke of the hub directly still works.

[06:56] This is how you can send and receive messages with SignalR and ASP.NET Core.