Real Time con SignalR y .Net 6

Desde hace un tiempo las aplicaciones pueden recibir notificaciones desde el servidor. Actualmente, no es necesario estar refrescando la pantalla para saber si tenemos algún cambio disponible, el servidor puede notificarnos. 

En la familia de componentes de .Net tenemos SignalR. Vamos a ver una pequeña introducción a este componente mediante un ejemplo simple de las manos de .Net 6 y Minimal API.

SignalR ¿Que es esa cosa?

SignalR es una biblioteca para desarrollar en aplicaciones ASP.NET funcionalidad real time de una manera sencilla y rápida. Básicamente, lo que podemos hacer es notificar a los clientes que estén conectados a medida que la información esté disponible del lado del servidor.

Algunos escenarios para usar esta tecnología son:

• ‎Aplicaciones que requieren actualizaciones de alta frecuencia desde el servidor. Ejemplos: juegos, las redes sociales, votaciones, las subastas, mapas y aplicaciones gps.‎
• ‎Paneles y aplicaciones de monitoreo. Ejemplos: paneles de control de la empresa, actualizaciones de ventas instantáneas o alertas de viaje.‎
• ‎Aplicaciones colaborativas. Ejemplo: Aplicaciones de pizarra y el software de reuniones de equipo.
• ‎Aplicaciones que requieren notificaciones. Las redes sociales, el correo electrónico, el chat, los juegos, las alertas de viaje y muchas otras aplicaciones usan notificaciones.‎

Debemos tener presente que la tecnología que usa por detrás es WebSocket. Esta les permite a los navegadores realizar esta conexión bidireccional.

Pre-requisitos

• Visual Studio 2022
• .Net 6.

Creando el Servidor

Lo primero que debemos hacer es crear un servidor. Para esto abriremos una consola y ejecutaremos los siguientes comandos:

dotnet new web -o MySignalRServer
cd MySignalRServer
dotnet add package Microsoft.AspNetCore.SignalR

Con estos comandos creamos el servidor y agregamos la referencia al paquete Microsoft.AspNetCore.SignalR que será la que utilicemos en nuestro MySignalRServer.

Creando el HUB de conexión

¿Qué es un HUB? es HUB es donde cada uno de clientes se conectarán, junto al servidor, para comunicarse entre ellos. Imagenemoslo de la siguiente forma, en lugar de tener un controlador de ASP.NET tendremos un HUB que será utilizado por SignalR. En nuestro proyecto crearemos una clase llamada PrincipalHub, veamos el código:

using Microsoft.AspNetCore.SignalR;

public class PrincipalHub: Hub
{
    public async IAsyncEnumerable<DateTime> Streaming(CancellationToken cancellationToken)
    {
        while (true)
        {
            return DateTime.UtcNow;
            await Task.Delay(3000, cancellationToken);
        }
    }
}

Vemos que el método devuelve un IAsyncEnumerable. Por otro lado, estamos enviando un parámetro CancelationToken que nos permitirá cancelar el llamado por alguna razón conveniente. Lo siguiente es agregar la configuración de SignalR y crear la ruta del servidor. Iremos a nuestro proyecto y abriremos el archivo program.cs y completamos con el siguiente código:

var builder = WebApplication.CreateBuilder(args);
builder.Services.AddSignalR();

var app = builder.Build();
app.MapHub<MainHub>("/current-time");

app.Run();

Ahora para ejecutar nuestra aplicación podemos presionar F5 en Visual Studio, o bien, podemos ejecutar desde la consola con el siguiente comando:

dotnet watch run

Creando el Cliente

Vamos a crear ahora un cliente que se conecte que será el que consuma los eventos informados por el servidor. Crearemos un proyecto de consola, mediante la consola:

dotnet new console -o SignalRClient
cd SignalRClient
dotnet add package Microsoft.AspNetCore.SignalR.Client

Tenemos los paquetes necesarios para nuestro cliente. Lo siguiente será crear una clase llamada PrincipalClient y completamos con el siguiente código:

using Microsoft.AspNetCore.SignalR.Client;

public class PrincipalClient 
{
    public static async Task ExecuteAsync()
    {
        var uri = "https://localhost:7054/current-time";

        await using var connection = new HubConnectionBuilder().WithUrl(uri).Build();

        await connection.StartAsync();

        await foreach (var date in connection.StreamAsync<DateTime>("Streaming"))
        {
            Console.WriteLine(date);
        }
    }
}

Vemos que en la clase tenemos definido un método el cual consumirá los datos enviados por el servidor. Vemos que generamos un objeto conexión que realizará la comunicación con el server. Por último, vamos al program.cs y completamos con la siguiente línea de código.

await PrincipalClient.ExecuteAsync();

Solo debemos ejecutar:

dotnet watch run

El resultado será una salida de consola como vemos en la imagen:

Conclusión

Vimos cómo rápidamente creamos un ejemplo de la mano de SignalR y .Net 6. Creamos un servidor que envía la información y un cliente que lo consume. Esto es solamente el principio de esta maravillosa librería. En futuros post veremos más en detalle SignalR y sus virtudes.