En este post vamos a ver la creación de una aplicación web de un chat  en tiempo real mediante SignalR con Blazor WebAssembly. 

Los pasos a seguir son los siguientes:

• Crear un proyecto de aplicación Blazor WebAssembly hospedado
• Adición de la biblioteca cliente de SignalR
• Agregar un concentrador de SignalR
• Agregar servicios de SignalR y un punto de conexión para el concentrador de SignalR
• Agregar código de componente de Razor para chat

Al final de este post, tendrá una aplicación de chat funcional

 

Antes de comenzar este post, se recomienda instalar un editor.

https://dotnet.microsoft.com/download

 

https://dotnet.microsoft.com/download/dotnet/thank-you/sdk-5.0.100-windows-x64-installer 

 

 

 

 

Creación de un proyecto de aplicación Blazor WebAssembly hospedado

Siga las instrucciones para su elección de herramientas:

Se requiere Visual Studio 16.8 o posterior y el SDK de .NET Core 5.0.0 o posterior.

1. Cree un nuevo proyecto.
2. Seleccione Aplicación Blazor y luego Siguiente.
3. Escriba BlazorSignalRApp en el campo Nombre del proyecto. Confirme que la entrada de Ubicación es correcta o proporcione una ubicación para el proyecto. Seleccione Crear.
4. Elija la plantilla Aplicación de Blazor WebAssembly .
5. En Avanzado, active la casilla ASP.NET Core hospedado.
6. Seleccione Crear.

Adición de la biblioteca cliente de SignalR

• En el Explorador de soluciones, haga clic con el botón derecho en el proyecto BlazorSignalRApp.Client y seleccione Administrar paquetes NuGet.
• En el cuadro de diálogo Administrar paquetes NuGet, confirme que Origen del paquete se ha establecido en nuget.org.
• Con Examinar seleccionado, escriba Microsoft.AspNetCore.SignalR.Client en el cuadro de búsqueda.
• En los resultados de la búsqueda, seleccione el paquete Microsoft.AspNetCore.SignalR.Client y, después, seleccione Instalar.
• Si aparece el cuadro de diálogo Vista previa de los cambios, seleccione Aceptar.
• Si aparece el cuadro de diálogo Aceptación de la licencia, seleccione Acepto si está de acuerdo con los términos de la licencia.

Agregar un concentrador de SignalR

En el proyecto BlazorSignalRApp.Server, cree una carpeta Hubs (plural) y agregue la siguiente clase ChatHub (Hubs/ChatHub.cs):

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.SignalR;

namespace BlazorSignalRApp.Server.Hubs
{
    public class ChatHub : Hub
    {
        public async Task SendMessage(string user, string message)
        {
            await Clients.All.SendAsync("ReceiveMessage", user, message);
        }
    }
}

Adición de servicios y de un punto de conexión para el concentrador de SignalR

1. En el proyecto BlazorSignalRApp.Server, abra el archivo Startup.cs.
2. Agregue el espacio de nombres para la clase ChatHub en la parte superior del archivo:C#Copiarusing BlazorSignalRApp.Server.Hubs;
3. Agregue servicios de middleware de compresión de respuesta y SignalR a Startup.ConfigureServices:

 

public void ConfigureServices(IServiceCollection services)
{
    services.AddSignalR();
    services.AddControllersWithViews();
    services.AddRazorPages();
    services.AddResponseCompression(opts =>
    {
        opts.MimeTypes = ResponseCompressionDefaults.MimeTypes.Concat(
            new[] { "application/octet-stream" });
    });
}

1. En Startup.Configure:
   • Use el middleware de compresión de respuesta de la parte superior de la configuración de la canalización de procesamiento.
   • Entre los puntos de conexión de los controladores y la reserva del lado cliente, agregue un punto de conexión para el concentrador.

 

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    app.UseResponseCompression();

    if (env.IsDevelopment())
    {
        app.UseDeveloperExceptionPage();
        app.UseWebAssemblyDebugging();
    }
    else
    {
        app.UseExceptionHandler("/Error");
        app.UseHsts();
    }

    app.UseHttpsRedirection();
    app.UseBlazorFrameworkFiles();
    app.UseStaticFiles();

    app.UseRouting();

    app.UseEndpoints(endpoints =>
    {
        endpoints.MapRazorPages();
        endpoints.MapControllers();
        endpoints.MapHub<ChatHub>("/chathub");
        endpoints.MapFallbackToFile("index.html");
    });
}

Agregar código de componente de Razor para chat

1. En el proyecto BlazorSignalRApp.Client, abra el archivo Pages/Index.razor.
2. Reemplace el marcado con el código siguiente:

 

@page "/"
@using Microsoft.AspNetCore.SignalR.Client
@inject NavigationManager NavigationManager
@implements IAsyncDisposable

<div class="form-group">
    <label>
        User:
        <input @bind="userInput" />
    </label>
</div>
<div class="form-group">
    <label>
        Message:
        <input @bind="messageInput" size="50" />
    </label>
</div>
<button @onclick="Send" disabled="@(!IsConnected)">Send</button>

<hr>

<ul id="messagesList">
    @foreach (var message in messages)
    {
        <li>@message</li>
    }
</ul>

@code {
    private HubConnection hubConnection;
    private List<string> messages = new List<string>();
    private string userInput;
    private string messageInput;

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

        hubConnection.On<string, string>("ReceiveMessage", (user, message) =>
        {
            var encodedMsg = $"{user}: {message}";
            messages.Add(encodedMsg);
            StateHasChanged();
        });

        await hubConnection.StartAsync();
    }

    Task Send() =>
        hubConnection.SendAsync("SendMessage", userInput, messageInput);

    public bool IsConnected =>
        hubConnection.State == HubConnectionState.Connected;
        
    public async ValueTask DisposeAsync()
    {
        await hubConnection.DisposeAsync();
    }
}

Ejecutar la aplicación

1. En el Explorador de soluciones, seleccione el proyecto BlazorSignalRApp.Server. Presione F5 para ejecutar la aplicación con depuración o Ctrl+F5 para ejecutarla sin depuración.
2. Copie la dirección URL de la barra de direcciones, abra otra instancia o pestaña del explorador, y pegue la dirección URL en la barra de direcciones.
3. Elija cualquier explorador, escriba un nombre y un mensaje, y haga clic en el botón para enviar el mensaje. El nombre y el mensaje se muestran en ambas páginas al instante: