SignalR en ASP.NET Core: Aplicación de Chat en Tiempo Real

En este artículo, vamos a construir una aplicación de chat en tiempo real usando ASP.NET Core y SignalR en Visual Studio. Cubriremos todos los pasos necesarios, desde la configuración del proyecto hasta el manejo de conexiones y grupos de chat. Además, incluiremos ejemplos detallados y explicaciones claras sobre cómo implementar SignalR en diferentes versiones de ASP.NET Core.

 

¿Qué es SignalR?

SignalR es una poderosa biblioteca de ASP.NET Core diseñada para facilitar la comunicación en tiempo real entre el cliente y el servidor. Entre sus características principales se encuentran:

• Comunicación bidireccional: Permite a los servidores enviar mensajes a los clientes conectados y viceversa, sin la necesidad de peticiones constantes.
• WebSockets: SignalR usa WebSockets para las conexiones cuando están disponibles, y recurre a otros protocolos (como long polling) en su defecto.
• Escalabilidad: SignalR se puede integrar con Redis, Azure SignalR Service o SQL Server para soportar múltiples servidores en aplicaciones de alta carga.

El uso de SignalR es ideal en aplicaciones como:

• Chats en tiempo real.
• Juegos en línea multijugador.
• Tableros de control en vivo.
• Aplicaciones colaborativas (como editores de texto compartidos).

 

 

Configuración del Proyecto en Visual Studio

Crear el Proyecto

1. Abre Visual Studio y selecciona Archivo > Nuevo > Proyecto.
2. Selecciona Aplicación Web ASP.NET Core y haz clic en Siguiente.
3. Nombra tu proyecto, por ejemplo ChatAppSignalR, selecciona la ubicación donde quieres guardarlo y haz clic en Crear.
4. Elige la plantilla de Aplicación Web (Modelo-Vista-Controlador).
5. Dependiendo de la versión de .NET Core que prefieras utilizar:
   • Para .NET Core 3.1, selecciona esta versión en el desplegable.
   • Para .NET 5, selecciona .NET 5.
   • Para .NET 6 o superior, selecciona la versión más reciente disponible.
6. Haz clic en Crear para generar el proyecto.

Instalar SignalR

SignalR no está incluido por defecto en todos los proyectos de ASP.NET Core, por lo que necesitas instalar el paquete de SignalR. Sigue estos pasos:

1. Haz clic derecho sobre tu proyecto en el Explorador de Soluciones y selecciona Administrar Paquetes NuGet.
2. En la pestaña de Examinar, busca Microsoft.AspNetCore.SignalR y selecciona la versión adecuada para tu versión de .NET.
3. Haz clic en Instalar.

 

 

Configuración de SignalR en ASP.NET Core

Configuración con Startup.cs (para .NET Core 3.1 o .NET 5)

Si estás usando .NET Core 3.1 o .NET 5, el archivo Startup.cs sigue siendo parte fundamental de la configuración. Aquí te mostramos cómo configurar SignalR en estas versiones:

Abre el archivo Startup.cs y asegúrate de que SignalR esté registrado en los servicios y mapeado en las rutas del middleware:

public class Startup
{
    public void ConfigureServices(IServiceCollection services)
    {
        // Agregar SignalR al contenedor de servicios
        services.AddSignalR();
    }

    public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
    {
        if (env.IsDevelopment())
        {
            app.UseDeveloperExceptionPage();
        }

        app.UseRouting();

        app.UseEndpoints(endpoints =>
        {
            // Mapear el Hub de SignalR en la ruta /chatHub
            endpoints.MapHub<ChatHub>("/chatHub");
            endpoints.MapDefaultControllerRoute();
        });
    }
}

• ConfigureServices: se agrega SignalR al contenedor de servicios de ASP.NET Core.
• Configure: se define la ruta /chatHub donde los clientes podrán conectarse.

 

Configuración con Program.cs (para .NET 6 o superior)

Para las versiones más recientes de .NET (6 o superior), el archivo Startup.cs ya no es necesario, ya que la configuración del servidor se realiza directamente en Program.cs:

var builder = WebApplication.CreateBuilder(args);

// Agregar SignalR al contenedor de servicios
builder.Services.AddSignalR();

var app = builder.Build();

app.UseRouting();

app.UseEndpoints(endpoints =>
{
    // Mapear el Hub en la ruta /chatHub
    endpoints.MapHub<ChatHub>("/chatHub");
    endpoints.MapDefaultControllerRoute();
});

app.Run();

La funcionalidad es la misma: registrar SignalR y mapear los Hubs en las rutas del middleware.

 

 

Crear el Hub

Un Hub es la clase que maneja la comunicación entre el cliente y el servidor. Para nuestra aplicación de chat:

1. Crea una nueva carpeta llamada Hubs dentro del proyecto.
2. En esa carpeta, crea una clase llamada ChatHub.cs con el siguiente contenido:

using Microsoft.AspNetCore.SignalR;
using System.Threading.Tasks;

public class ChatHub : Hub
{
    // Enviar mensaje a todos los clientes conectados
    public async Task SendMessage(string user, string message)
    {
        await Clients.All.SendAsync("ReceiveMessage", user, message);
    }

    // Enviar mensaje a un grupo específico
    public async Task SendMessageToGroup(string groupName, string user, string message)
    {
        await Clients.Group(groupName).SendAsync("ReceiveMessage", user, message);
    }

    // Unirse a un grupo (sala de chat)
    public async Task JoinGroup(string groupName)
    {
        await Groups.AddToGroupAsync(Context.ConnectionId, groupName);
    }

    // Salir de un grupo
    public async Task LeaveGroup(string groupName)
    {
        await Groups.RemoveFromGroupAsync(Context.ConnectionId, groupName);
    }
}

En este Hub, hemos creado métodos que permiten:

• Enviar mensajes a todos los clientes conectados.
• Enviar mensajes a un grupo específico (una sala de chat).
• Unirse a grupos y salir de ellos.

Este código es esencial para manejar la lógica del chat y permite que los usuarios interactúen en diferentes "salas".

 

 

Crear la Interfaz de Usuario

Con el servidor configurado, necesitamos una interfaz para que los usuarios puedan enviar y recibir mensajes. En este caso, vamos a utilizar HTML y JavaScript para interactuar con SignalR.

Abre el archivo Index.cshtml en Views/Home y reemplázalo con el siguiente código:

<!DOCTYPE html>
<html>
<head>
    <title>Chat en Tiempo Real</title>
    <style>
        body {
            font-family: Arial, sans-serif;
        }
        #messagesList {
            list-style-type: none;
            padding: 0;
        }
        #messagesList li {
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
    <h1>Chat en Tiempo Real</h1>
    <input type="text" id="userInput" placeholder="Tu nombre" />
    <input type="text" id="messageInput" placeholder="Escribe un mensaje" />
    <button id="sendButton">Enviar</button>

    <ul id="messagesList"></ul>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/microsoft-signalr/5.0.11/signalr.min.js"></script>
    <script>
        const connection = new signalR.HubConnectionBuilder()
            .withUrl("/chatHub")
            .build();

        connection.on("ReceiveMessage", function (user, message) {
            const li = document.createElement("li");
            li.textContent = `${user}: ${message}`;
            document.getElementById("messagesList").appendChild(li);
        });

        connection.start().catch(function (err) {
            return console.error(err.toString());
        });

        document.getElementById("sendButton").addEventListener("click", function () {
            const user = document.getElementById("userInput").value;
            const message = document.getElementById("messageInput").value;
            connection.invoke("SendMessage", user, message).catch(function (err) {
                return console.error(err.toString());
            });
        });
    </script>
</body>
</html>

Este archivo contiene una simple interfaz donde los usuarios pueden ingresar su nombre, escribir un mensaje y enviarlo. La lógica en JavaScript se conecta al Hub de SignalR para manejar los mensajes en tiempo real.

 

 

Probar la Aplicación

Para probar tu aplicación de chat:

1. Ejecuta el proyecto en Visual Studio.
2. Abre varias pestañas en tu navegador y carga la aplicación en cada una de ellas.
3. Ingresa un nombre de usuario y escribe mensajes. Deberías ver que los mensajes se muestran en todas las pestañas, lo que indica que SignalR está funcionando correctamente.

Si deseas probar con múltiples usuarios en diferentes dispositivos, puedes usar la URL generada por el servidor en esos dispositivos (por ejemplo, localhost:5001 o la dirección IP de tu servidor).

 

 

Optimización y Escalabilidad en Producción

La optimización y escalabilidad de una aplicación que usa SignalR son cruciales cuando se enfrenta a múltiples usuarios y un alto volumen de tráfico. Aquí te damos algunas recomendaciones clave para asegurar que tu aplicación esté lista para producción:

Escalabilidad Horizontal

Si tienes varios servidores que manejan solicitudes, SignalR necesita coordinarse entre ellos para mantener las conexiones en sincronía. Las siguientes soluciones ayudan a escalar la aplicación:

Redis Backplane:

Redis actúa como un backplane que permite que los mensajes enviados desde un servidor se distribuyan a todos los servidores del clúster. Esto asegura que todos los usuarios conectados reciban los mensajes, sin importar a qué servidor están conectados.

Para implementar Redis Backplane, agrega el paquete NuGet Microsoft.AspNetCore.SignalR.StackExchangeRedis y modifica tu Startup.cs o Program.cs:

services.AddSignalR().AddStackExchangeRedis("localhost:6379");

Azure SignalR Service:

Si despliegas la aplicación en Azure, puedes usar el servicio administrado de Azure SignalR para manejar la comunicación en tiempo real. Este servicio administra automáticamente la escalabilidad y la latencia, permitiendo una integración sencilla con tus aplicaciones.

Uso Eficiente de WebSockets

Habilitar WebSockets:

SignalR usará WebSockets cuando sea posible, ya que es el protocolo más eficiente para la comunicación en tiempo real. Asegúrate de que tu servidor tenga habilitados WebSockets, especialmente si estás en un entorno de hosting que pueda tenerlos desactivados.

Para habilitar WebSockets en IIS o Azure App Service, verifica la configuración de tu servidor o despliegue.

Reintentos y Reconexiones:

Asegúrate de que los clientes implementen una estrategia de reconexión para casos donde la conexión se interrumpa. SignalR tiene soporte integrado para esto:

const connection = new signalR.HubConnectionBuilder()
    .withUrl("/chatHub")
    .withAutomaticReconnect()
    .build();

Balanceo de Carga

Balanceadores de carga como NGINX o Azure Load Balancer se pueden configurar para distribuir las conexiones entrantes de manera equitativa entre los servidores, manteniendo la eficiencia y reduciendo la latencia.

 

 

Conclusión

Este artículo ha cubierto cómo implementar SignalR en una aplicación ASP.NET Core usando Visual Studio, abarcando la configuración tanto para versiones anteriores como .NET 5, como para versiones más recientes. La inclusión de ejemplos prácticos como un chat en tiempo real permite a los desarrolladores comprender mejor el uso de SignalR en aplicaciones web modernas. Además, hemos proporcionado guías de optimización y escalabilidad, esenciales para llevar la aplicación a producción en entornos de alto rendimiento.