Source code
Code available at GitHub
About SignalR
Full documentation available here
Fundamental concepts
SignalR acts as an abstraction layer over remote procedure calls (RPC), streamlining their use. It primarily employs the WebSocket network protocol, but can fallback to other transport protocols like HTML5 or Comet when necessary. A key concept in SignalR is the Hub, which facilitates communication between clients and the server, allowing clients to invoke server methods and vice versa. Hubs are transient, meaning they should not store state. To call methods outside a hub, IHubContext is used. SignalR supports strongly typed hubs, reducing the risk of runtime errors - there is no need to use strings for method names. Hubs can target all connected clients, specific connections, groups, or individual users. Additionally, SignalR integrates with ASP.NET Core authentication, associating users with each connection. Authentication data is accessible within the hub via HubConnectionContext.User, similar to WebApi.
Server side:
- any server platform that ASP.NET Core supports
Client side:
Use cases from sample project
Retrieving status of executed tasks with single client
Retrieving status of executed tasks with two clients plus run request that returns result only to caller
Client executes method on server side to get number of running tasks
Requirements
.NET
Install SignalR NuGet package
Microsoft.AspNetCore.SignalR
Angular
Install SignalR npm package
npm install @microsoft/signalr
Configuration
This section describes the application setup details related specifically to SignalR - surprisingly there is not much to do in scope of configuring the app. Things like CORS, HTTPS redirection, etc. are not covered here. For sake of the sample project simplicity the authorization concept was ignored.
.NET
Program.cs
builder.Services.AddSignalR();
app.MapHub<TasksHub>("/tasksHub");
app.Run();
Core parts of the sample project
.NET side
webapi/Api/TasksApi.Core/TasksHub.cs
Contract for strongly typed Hub
public interface ITasksStatusClient
{
Task TasksStatuses(IReadOnlyCollection<TaskDto> tasks);
Task TaskStatus(TaskDto task);
Task<int> RunningTasksCount(int tasksCount);
}
Hub implementation
public class TasksHub : Hub<ITasksStatusClient>
{
private readonly ITasksStatusService _taskStatusService;
public TasksHub(ITasksStatusService taskStatusService)
{
_taskStatusService = taskStatusService ?? throw new ArgumentNullException(nameof(taskStatusService));
}
public async Task<int> RunningTasksCount()
{
return await Task.FromResult(_taskStatusService.RunningTasksCount);
}
}
webapi/Api/TasksApi.Core/TasksStatusService.cs
Example of calling the method on client side
public Task ExecuteTask(TaskDto task)
{
return ExecuteTaskInternal(task, (t) =>
_tasksStatusHubContext.Clients.All.TaskStatus(t));
}
public Task ExecuteTask(TaskDto task, string connectionId)
{
return ExecuteTaskInternal(task, (t) =>
_tasksStatusHubContext.Clients.Client(connectionId).TaskStatus(t));
}
public async Task RemoveTask(int id)
{
_taskStorage.Delete(id);
await _tasksStatusHubContext.Clients.All.TasksStatuses(_taskStorage.GetAll());
}
Angular side
angular/src/app/services/signalR/tasks-signalr.service.ts
Build hub connection
constructor() {
this.hubConnection = new HubConnectionBuilder()
.withUrl(environment.signalRBaseUrl + "tasksHub")
.build();
}
Establish connection with hub, executed in root component under OnInit method.
public start() {
if (this.hubConnection == null) {
return;
}
this.hubConnection
.start()
.then(() => {
console.log('Connected to tasks hub.');
this.connectionId = this.hubConnection.connectionId ?? '';
})
.catch(error => console.log('Tasks hub connection error: ' + error));
this.hubConnection.on('TasksStatuses', (tasks: TaskDto[]) => {
this.tasksStatusesSubject.next(tasks);
})
this.hubConnection.on('TaskStatus', (task: TaskDto) => {
this.taskStatusSubject.next(task);
});
}
Close connection to hun, executed in root component under OnDestroy method
public stop() {
if (this.hubConnection == null) {
return;
}
this.hubConnection.stop().then(() => {
console.log('Disconnected from tasks hub.');
});
}
Call method on service-side
public getRunningTasksCount(): Observable<number> {
return new Observable<number>((subscriber) => {
this.hubConnection
.invoke<number>('RunningTasksCount')
.then((count) => {
subscriber.next(count);
subscriber.complete();
})
.catch((err) => {
subscriber.error(err);
});
});
}
