Desarrollo de una Aplicación de Chat en Tiempo Real con SignalR en Blazor Server

Aplicación de Chat en Tiempo Real con SignalR en Blazor Server

Introducción

SignalR es una biblioteca de ASP.NET Core que facilita la implementación de comunicaciones en tiempo real en aplicaciones web. En este tutorial, aprenderás cómo desarrollar una aplicación de chat en tiempo real utilizando SignalR en una aplicación Blazor Server.

Paso 1: Configuración del Proyecto

  1. Crear un Nuevo Proyecto Blazor Server: Comienza creando un nuevo proyecto Blazor Server en Visual Studio o mediante la CLI de .NET:
dotnet new blazorserver -n MiProyecto

Instalar el Paquete de SignalR: Añade SignalR a tu proyecto Blazor Server mediante NuGet:

dotnet add package Microsoft.AspNetCore.SignalR --version 5.0.1
Paso 2: Creación del Hub de SignalR
Crear un Hub de SignalR: Crea una clase para tu hub de SignalR, por ejemplo, ChatHub.cs
using Microsoft.AspNetCore.SignalR;
using System.Threading.Tasks;

public class ChatHub : Hub
{
    public async Task EnviarMensaje(string usuario, string mensaje)
    {
        await Clients.All.SendAsync("RecibirMensaje", usuario, mensaje);
    }
}

Paso 3: Configuración de la Comunicación SignalR en Blazor Server

  1. Configurar SignalR en el Startup.cs: En el método ConfigureServices, registra el hub de SignalR:
builder.Services.AddSignalR();

Configurar SignalR en el Middleware: En el método Configure, habilita SignalR:

app.UseEndpoints(endpoints =>
{
    endpoints.MapHub<ChatHub>("/chathub");
    endpoints.MapBlazorHub();
    endpoints.MapFallbackToPage("/_Host");
});

Paso 4: Implementación del Cliente Blazor

  1. Crear la Interfaz de Usuario del Chat: En una página Blazor, por ejemplo, Pages/Chat.razor, crea la interfaz de usuario del chat con un campo de entrada de texto y un área de visualización de mensajes.
  2. Configurar la Conexión SignalR en el Cliente Blazor: En el código de la página Blazor, configura la conexión SignalR y maneja los eventos de mensajes:
@page "/chat"
@using Microsoft.AspNetCore.SignalR.Client

<h1>Chat en Tiempo Real</h1>

<input @bind="mensaje" />
<button @onclick="EnviarMensaje">Enviar</button>

<ul>
    @foreach (var msg in mensajes)
    {
        <li>@msg</li>
    }
</ul>

@code {
    private HubConnection connection;
    private List<string> mensajes = new List<string>();
    private string mensaje;

    protected override async Task OnInitializedAsync()
    {
        connection = new HubConnectionBuilder()
            .WithUrl(NavigationManager.ToAbsoluteUri("/chathub"))
            .Build();

        connection.On<string, string>("RecibirMensaje", (usuario, msg) =>
        {
            var mensajeFormateado = $"{usuario}: {msg}";
            mensajes.Add(mensajeFormateado);
            StateHasChanged();
        });

        await connection.StartAsync();
    }

    private async Task EnviarMensaje()
    {
        await connection.SendAsync("EnviarMensaje", "Usuario", mensaje);
        mensaje = string.Empty;
    }
}

Paso 5: Prueba del Chat en Tiempo Real

¡Ahora deberías poder ejecutar tu aplicación Blazor Server y acceder a la página de chat para comunicarte en tiempo real con otros usuarios! Puedes abrir múltiples instancias de la aplicación en diferentes navegadores o pestañas para probar la comunicación en tiempo real.

La integración de SignalR en una aplicación Blazor Server permite implementar fácilmente funcionalidades de comunicación en tiempo real, como un chat. En este tutorial, has aprendido cómo desarrollar una aplicación de chat en tiempo real utilizando SignalR en una aplicación Blazor Server. Con estos conocimientos, podrás agregar comunicaciones en tiempo real a tus aplicaciones web Blazor de forma rápida y sencilla.

Te puede interesar...

Deja un comentario