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

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.

Installazione SignalR

dotnet add package Microsoft.AspNetCore.SignalR.Client.Core 8.0.10

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/Notify.cs

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);
    }
}

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.

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

// Registrazione servizio 
builder.Services.AddSignalR();


// Registrazione endpoint SignalR
app.MapHub<NotifyHub>("/notify");

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.

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/microsoft-signalr/6.0.1/signalr.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
<div id="notification-container"></div>

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

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; }
}

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

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();

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

@page
@model IndexModel
@{
    ViewData["Title"] = "Home page";
}

<div class="text-center">
    <button class="btn btn-primary" onclick="connection.invoke('CreateNotify', 'Benvenuto su CosminIrimescu.COM')">
        Invia Notifica
    </button>
</div>

Per testare l’implementazione, ti basta aprire 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.

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.