Real-Time ASP.NET Core 3 Apps with SignalR Succinctly®
CHAPTER 10
Creating the Chart Hub
Start by creating a new folder called Hubs in your realtimechart application. Inside this folder, create a class called ChartHub. Your solution will look as illustrated in Figure 32.
Figure 32: Adding the Chart Hub
The code of your new ChartHub class will look like Code Listing 19. We have not added any logic to it regarding SignalR.
Code Listing 19
namespace realtimechart.Hubs { public class ChartHub { } } |
The next thing we are going to do is to add an interface to our project. For simplicity's sake, we will just add the interface to the Hubs folder.
Right-click your Hubs folder and select Add > New Item from the context menu. Select an interface and call your interface IChartClient. Click Add.
Figure 33: Adding IChartClient Interface
Once your interface has been added, change the code to look like Code Listing 20.
Code Listing 20
using System.Threading.Tasks; namespace realtimechart.Hubs { public interface IChartClient { Task ValueReceiver(double chartValue); } } |
We can now go ahead and flesh out our ChartHub class using the IChartClient interface. Modify your ChartHub class as illustrated in Code Listing 21.
Code Listing 21
using Microsoft.AspNetCore.SignalR; using System.Threading.Tasks; namespace realtimechart.Hubs { public class ChartHub : Hub<IChartClient> { public async Task ValueSender(double chartValue) { await Clients.All.ValueReceiver(chartValue); } } } |
At this stage, your solution should look as illustrated in Figure 34. You should have the ChartHub class with the IChartClient interface in the Hubs folder.
Figure 34:The Solution So Far
We now need to go and configure the Startup class. Go ahead and open your Startup class. Add the SignalR service to your ConfigureServices method, as seen in Code Listing 22.
Code Listing 22
public void ConfigureServices(IServiceCollection services) { services.AddRazorPages(); services.AddSignalR(); } |
In the Configure method, go ahead and add the following endpoint: endpoints.MapHub<ChartHub>("/chartHub"). Your code should look like Code Listing 23. This maps the path /chartHub to the ChartHub class.
Code Listing 23
app.UseEndpoints(endpoints => { endpoints.MapRazorPages(); endpoints.MapHub<ChartHub>("/chartHub"); }); |
After adding everything to your Startup class, your code should look like Code Listing 24.
Code Listing 24
using Microsoft.AspNetCore.Builder; using Microsoft.AspNetCore.Hosting; using Microsoft.Extensions.Configuration; using Microsoft.Extensions.DependencyInjection; using Microsoft.Extensions.Hosting; using realtimechart.Hubs; namespace realtimechart { public class Startup { public Startup(IConfiguration configuration) { Configuration = configuration; } public IConfiguration Configuration { get; } // Use this method to add services to the container. public void ConfigureServices(IServiceCollection services) { services.AddRazorPages(); services.AddSignalR(); } // Use this method to configure the HTTP request pipeline. public void Configure(IApplicationBuilder app, IWebHostEnvironment env) { if (env.IsDevelopment()) { app.UseDeveloperExceptionPage(); } else { app.UseExceptionHandler("/Error"); app.UseHsts(); } app.UseHttpsRedirection(); app.UseStaticFiles(); app.UseRouting(); app.UseAuthorization(); app.UseEndpoints(endpoints => { endpoints.MapRazorPages(); endpoints.MapHub<ChartHub>("/chartHub"); }); } } } |
Once you have finished configuring your Startup class, it’s time to create the client application, which we’ll do in the next section.
- 80+ high-performance ASP.NET Core controls, including DataGrid, Charts, and Scheduler.
- Lightweight and responsive.
- Modular and touch-friendly.
- Built-in themes.