Como crear una aplicacion Blazor


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:

2 respuestas a “Como crear una aplicacion Blazor

  1. Repuestos Moviles diciembre 16, 2021 / 1:09 pm

    Howdy very nice web site!! Man .. Beautiful .. Superb .. I’ll bookmark your web site and take the feeds also…I am glad to find a lot of helpful information here in the put up, we’d like develop more strategies in this regard, thanks for sharing. . . . . .

    Me gusta

  2. Garage Door Repair Sun City enero 6, 2022 / 6:31 pm

    After study a few of the blog posts on your website now, and I truly like your way of blogging. I bookmarked it to my bookmark website list and will be checking back soon. Pls check out my web site as well and let me know what you think.

    Me gusta

Deja una respuesta

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Salir /  Cambiar )

Google photo

Estás comentando usando tu cuenta de Google. Salir /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Salir /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Salir /  Cambiar )

Conectando a %s

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.