26 Ottobre 2024
SignalR in ASP.NET Core: Notifiche in Tempo Reale
Qualche anno fa mi sono trovato davanti ad un progetto che richiedeva un sistema di notifiche in tempo reale. Analizzando i vari casi d’uso, uno in particolare sembrava complesso: gli utenti dovevano ricevere notifiche su tutte le schede aperte del browser. Con SignalR, quella che sembrava una sfida si è rivelata un gioco da ragazzi.
Se preferisci vedere subito il codice completo, puoi trovare il progetto su GitHub: SignalR.NET
Cos'è
SignalR
SignalR è una libreria per .NET che facilita la comunicazione in tempo reale tra server e client. Permette lo scambio di dati bidirezionale, rendendo semplice l’implementazione di funzionalità come chat, notifiche e aggiornamenti in tempo reale nelle applicazioni web. Utilizza tecnologie come WebSockets, fallback automatici e connessioni persistenti per garantire una comunicazione fluida e reattiva.
Implementazione
Per prima cosa, crea una nuova applicazione ASP.NET Core Web App con pagine Razor è successivamente installa la libreria necessaria per registrare il servizio di SignalR.
1. Installazione SignalR
<![CDATA[dotnet add package Microsoft.AspNetCore.SignalR.Client.Core 8.0.10]]>
2. Creazione HUB
Il hub è il punto centrale di comunicazione in SignalR. Immagina un hub come un dispatcher che gestisce tutte le comunicazioni tra server e client. Quando un client vuole inviare un messaggio, lo invia all'hub, che poi può inoltrarlo ad altri client. L'hub gestisce automaticamente connessioni, disconnessioni e il mantenimento dello stato delle connessioni.
Hubs/NotifyHub.cs
<![CDATA[using Microsoft.AspNetCore.SignalR;
namespace SignalR.NET.Hubs;
public class NotifyHub : Hub
{
public async override Task OnConnectedAsync()
{
await Groups.AddToGroupAsync(Context.ConnectionId, "users");
await base.OnConnectedAsync();
}
public async Task CreateNotify(string message)
{
await Clients.All.SendAsync("Notify", message);
}
}]]>
Importante !
I gruppi in SignalR sono come “stanze virtuali” dove puoi organizzare le connessioni dei client. Immagina di avere un’applicazione dove gli utenti possono seguire diversi argomenti o categorie.
3. Registrazione SignalR
Una volta creato l'Hub, il prossimo passo è duplice: registrare SignalR come servizio nell'applicazione e configurare l'endpoint che i client utilizzeranno per stabilire la connessione.
Program.cs
<![CDATA[using SignalR.NET.Hubs;
var builder = WebApplication.CreateBuilder(args);
// Add services to the container.
builder.Services.AddRazorPages();
builder.Services.AddSignalR();
var app = builder.Build();
// Configure the HTTP request pipeline.
if (!app.Environment.IsDevelopment())
{
app.UseExceptionHandler("/Error");
// The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
app.UseHsts();
}
app.UseHttpsRedirection();
app.UseStaticFiles();
app.UseRouting();
app.UseAuthorization();
app.MapRazorPages();
app.MapHub<NotifyHub>("/notify");
await app.RunAsync();]]>
Configurazione client
Dopo aver configurato SignalR lato server, è necessario procedere con la configurazione del client per verificarne il funzionamento. In questa sezione importerai la libreria SignalR via CDN e implementerai la logica delle notifiche con CSS e JavaScript.
1. SignalR via CDN
Per velocizzare l'implementazione, puoi importare la libreria SignalR client direttamente via CDN. In alternativa, è possibile utilizzare NPM.
Oltre all'import della libreria, è necessario aggiungere un container per le notifiche.
Pages/Shared/_Layout.cs
<![CDATA[</footer>
@await RenderSectionAsync("Scripts", required: false)
</body>]]>
Importa via
NPM
2. Un pò di Stile
Per rendere l'esempio più accattivante, è necessario aggiungere del CSS al tuo progetto. Questo stile gestirà l'aspetto e le animazioni delle notifiche, creando un effetto di comparsa fluido dal lato destro dello schermo.
wwwroot/css/site.css
<![CDATA[html {
font-size: 14px;
}
@media (min-width: 768px) {
html {
font-size: 16px;
}
}
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}
html {
position: relative;
min-height: 100%;
}
body {
margin-bottom: 60px;
}
#notification-container {
position: fixed;
bottom: 20px;
right: 20px;
z-index: 9999;
}
.notification-toast {
background: #333;
color: white;
padding: 15px 25px;
margin: 10px;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
animation: slideIn 0.3s ease-out;
}
@keyframes slideIn {
from { transform: translateX(100%); opacity: 0; }
to { transform: translateX(0); opacity: 1; }
}]]>
3. Connessione e Gestione delle Notifiche
Per completare l'implementazione, è necessario aggiungere la logica JavaScript che gestirà sia la connessione con SignalR che il sistema di notifiche. Il codice si occuperà di stabilire e mantenere la connessione con l'hub, gestire la ricezione dei messaggi e mostrarli all'utente attraverso notifiche eleganti.
wwwroot/css/site.js
<![CDATA[const connection = new signalR.HubConnectionBuilder()
.withUrl("/notify")
.withAutomaticReconnect()
.build();
connection.on("Notify", (message) => {
showNotification(message);
console.log(message);
});
function showNotification(message) {
const toast = document.createElement("div");
toast.className = "notification-toast";
toast.textContent = message;
document.getElementById("notification-container").appendChild(toast);
setTimeout(() => toast.remove(), 5000);
}
async function startConnection() {
try {
await connection.start();
console.log("Connesso a SignalR!");
} catch (err) {
console.error(err);
setTimeout(startConnection, 5000);
}
}
startConnection().then();]]>
4. La Ciliegina sulla Torta
Per completare l'implementazione di SignalR con un tocco finale, aggiungi un pulsante nella pagina Index. Questo pulsante sarà il tuo punto di test: quando lo cliccherai, invierà una richiesta al server che a sua volta trasmetterà una notifica a tutte le sessioni attive della tua applicazione.
Pages/Index.cshtml
<![CDATA[@page
@model IndexModel
@{
ViewData["Title"] = "Home page";
}
<button onclick="connection.invoke('CreateNotify', 'Benvenuto su CosminIrimescu.COM')">
Invia Notifica
</button>
]]>
Il modo perfetto per testare il sistema ?
Apri più tab del browser e premi il pulsante – vedrai le notifiche apparire simultaneamente in ogni finestra, dimostrando il potere della comunicazione real-time.
Conclusione
Aggiungere un sistema di notifiche real-time può dare quel tocco in più alla tua applicazione, soprattutto quando si tratta di mantenere gli utenti informati attraverso più tab del browser. SignalR rende questo compito sorprendentemente semplice.
Implementare SignalR nel mio progetto mi ha fatto capire quanto sia importante non sottovalutare l’impatto che le notifiche in tempo reale possono avere sull’esperienza utente. Approfondire la sua conoscenza mi ha aperto gli occhi su possibilità che, se ignorate, ti fanno perdere l’opportunità di creare applicazioni veramente interattive e reattive.
Una volta che avrai integrato SignalR nei tuoi progetti, ti chiederai come hai fatto a farne a meno fino ad ora. La sua semplicità d’uso, unita alla potente gestione delle comunicazioni cross-tab, lo rende uno strumento prezioso per ogni sviluppatore .NET che vuole portare le proprie applicazioni al livello successivo.
E tu, che ne pensi? Hai già implementato sistemi di notifiche real-time o hai scoperto altri usi interessanti per SignalR? Condividi la tua esperienza nei commenti!
