{"id":28451,"date":"2019-07-09T00:00:00","date_gmt":"2019-07-08T22:00:00","guid":{"rendered":"https:\/\/blexin.com\/applicazioni-real-time-con-signalr-asp-net-core-e-angular\/"},"modified":"2021-05-20T18:56:39","modified_gmt":"2021-05-20T16:56:39","slug":"real-time-applications-with-signalr-asp-net-core-and-angular","status":"publish","type":"post","link":"https:\/\/blexin.com\/en\/blog-en\/real-time-applications-with-signalr-asp-net-core-and-angular\/","title":{"rendered":"Real-time applications with SignalR, ASP.NET Core and Angular"},"content":{"rendered":"\n
\"\"<\/figure>\n\n\n\n

Suppose we want to create a monitoring web application, that provides users with a dashboard able to display a range of information, which are updated over time.<\/p>\n\n\n\n

A first approach is to periodically call an API at defined time intervals (polling<\/em>) to update data on the dashboard. There\u2019s a problem, anyway: if there are no updated data, we are unnecessarily increasing the network traffic with our requests. An alternative can be the long-polling<\/em> technique: if the server has no available data, it can keep the request alive until something happens, or the preset timeout is reached, rather than send an empty response. If new data are present, the complete response reaches the client. A completely different approach is to reverse roles: the backend contacts the clients, when new data are available (push).<\/p>\n\n\n\n

Remember that HTML 5 has standardized WebSocket, a permanent bidirectional connection, that can be configured with a Javascript interface in compatible browsers. Unfortunately, there must be complete support to WebSocket, both on client and server side, to make it available. We need then to provide for alternative systems (fallback<\/em>), that allows our application to run, no matter what.<\/p>\n\n\n\n

Microsoft has published in 2013 an open-source library called SignalR<\/strong> for ASP.NET<\/strong>, which has been rewritten in 2018 for ASP.NET Core. SignalR abstracts from all details related to communication mechanisms, and it chooses the best one among those available. The result is the possibility to write the code, as if we are always in push-mode<\/em>. With SignalR the server can call a JavaScript method on all its connected clients, or on a specific one.<\/p>\n\n\n\n

We create an ASP.NET Core project with a web-api template, deleting the sample controller, that has been produced. With NuGet, we add Microsoft.AspNet.SignalR<\/em> to the project, in order to create a Hub<\/strong>. The hub is the high-level pipeline able to call the client code, sending messages containing name and parameters of the requested method. Objects sent as parameters will be de-serialized using the appropriate protocol. The client searches in the page code a method corresponding to the name and, if it finds it, it invokes it passing de-serialized data as parameters.<\/p>\n\n\n

\nusing Microsoft.AspNetCore.SignalR;\n\u00a0\nnamespace SignalR.Hubs\n{\n\u00a0\u00a0\u00a0\u00a0public class NotificationHub : Hub { }\n}\n<\/pre><\/div>\n\n\n
As you probably know, in ASP.NET Core the management pipeline of a HTTP request can be configured adding some middleware<\/strong>, that intercepts a request, adds a configured functionality and let it proceed to the next middleware. The SignalR middleware must be configured in advance, adding in the method ConfigureServices<\/em> of the Startup<\/strong> class the extension method services.AddSignalR()<\/em>. Now we can add the middleware to the pipeline, using the extension method app.UseSignalR() in the Configure<\/em> method of the Startup class. During this operation, we can pass configuration parameters, including the route of our hub:<\/p>\n\n\n
\napp.UseSignalR(route =>\n{\n\u00a0\u00a0\u00a0\u00a0route.MapHub<notificationhub>("\/notificationHub");\n})\n<\/pre><\/div>\n\n\n
An interesting scenario, that allows us to look at another interesting feature in ASP.NET Core, is the hosting<\/em> of a SignalR Hub in a background worker<\/strong> process context.<\/p>\n\n\n\n
Imagine we want to implement the following use case:<\/p>\n\n\n\n