In this post I will show how to use SignalR in an Angular project with an asp.net core backend.
One good use case of this is status updates in the UI from a long running process on the server. Instead of polling for server updates in the client code, SignalR provides the glue to push notifications directly to the client from the server. SignalR works best over websockets since this is the best way to open a two way channel between client and server. In legacy browsers, SignalR will fall back on other protocols though.
There are two parts to setting up SignalR. I will discuss both in the following sections.
The first step is to enable SignalR on the server by bringing in the required .Net middleware. I have included the relevant pieces from Startup.cs below:
Aside from just including the SignalR library I am also mapping up a hub endpoint. Hubs are key to SignalR since they define the two way communication between client and server. Hubs expose server endpoints that can be called by the client, but also initiate server pushes. We will see an example of this in the following Hub code:
In my hub I have defined a method called SendMessage. Think of this as the public server side api. Internally my hub method calls Clients.All.SendAsync with the argument “ReceiveGreeting”. This is an example of a server side push that will end up calling a client side method called ReceiveGreeting.
I have included my Angular component below:
The first step is to establish a connection to the hub by calling the hub endpoint we wired up on the server. Next we invoke the SendMessage hub method that we discussed in the previous section. Notice how I am also defining an event to capture any push notification of type ReceiveGreeting from the server. Basically this code snippet will make a call to the server side hub and receive an asynchronous server push in return.
Since my code uses two different types of technologies, Angular and .Net, I have decided to go with a language agnostic build system called Bazel for my demo. The main benefit of this is that I can build Angular Typescript and C# code in the same build step.
You can download my sample code if you are interested in trying it out yourself.