Uso de ASP.NET Core SignalR con Blazor

  • Artículo
  • Tiempo de lectura: 52 minutos

En este tutorial se describen los conceptos básicos de la creación de una aplicación en tiempo real mediante SignalR con Blazor.

Obtenga información sobre cómo:

  • Crear un proyecto Blazor
  • 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 tutorial, tendrá una aplicación de chat funcional.

Requisitos previos

Aplicación de ejemplo

No es necesario descargar la aplicación de chat de ejemplo para este tutorial. La aplicación de ejemplo es la aplicación final ya operativa que se crea siguiendo los pasos de este tutorial.

Ver o descargar el código de ejemplo

Creación de una aplicación Blazor WebAssembly hospedada

Siga las instrucciones para su elección de herramientas:

Nota

Se requiere Visual Studio 2022 o posterior y el SDK de .NET Core 6.0.0 o posterior.

  1. Cree un nuevo proyecto.

  2. Elija la plantilla Aplicación de Blazor WebAssembly . Seleccione Siguiente.

  3. Escriba BlazorWebAssemblySignalRApp en el campo Nombre del proyecto. Confirme que la entrada de Ubicación es correcta o proporcione una ubicación para el proyecto. Seleccione Siguiente.

  4. Active la casilla ASP.NET Core hospedado del cuadro de diálogo Información adicional.

  5. Seleccione Crear.

  6. Confirme que se ha creado una aplicación hospedadaBlazor WebAssembly: en Explorador de soluciones, confirme la presencia de un proyecto Client y un proyecto Server. Si los dos proyectos no están presentes, vuelva a iniciar y confirme la selección de la casilla ASP.NET Core hospedado antes de seleccionar Crear.

Adición de la biblioteca cliente de SignalR

  1. En el Explorador de soluciones, haga clic con el botón derecho en el proyecto BlazorWebAssemblySignalRApp.Client y seleccione Administrar paquetes NuGet.

  2. En el cuadro de diálogo Administrar paquetes NuGet, confirme que Origen del paquete se ha establecido en nuget.org.

  3. Con Examinar seleccionado, escriba Microsoft.AspNetCore.SignalR.Client en el cuadro de búsqueda.

  4. En los resultados de la búsqueda, seleccione el paquete Microsoft.AspNetCore.SignalR.Client. Establezca la versión para que coincida con el marco compartido de la aplicación. Seleccione Instalar.

  5. Si aparece el cuadro de diálogo Vista previa de los cambios, seleccione Aceptar.

  6. 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 BlazorWebAssemblySignalRApp.Server, cree una carpeta Hubs (plural) y agregue la siguiente clase ChatHub (Hubs/ChatHub.cs):

using Microsoft.AspNetCore.SignalR;

namespace BlazorWebAssemblySignalRApp.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 BlazorWebAssemblySignalRApp.Server, abra el archivo Program.cs.

  2. Agregue el espacio de nombres para la clase ChatHub en la parte superior del archivo:

    using BlazorWebAssemblySignalRApp.Server.Hubs;

  3. Agregue servicios de middleware de compresión de respuesta y SignalR a Program.cs:

    builder.Services.AddSignalR();
builder.Services.AddControllersWithViews();
builder.Services.AddRazorPages();
builder.Services.AddResponseCompression(opts =>
{
    opts.MimeTypes = ResponseCompressionDefaults.MimeTypes.Concat(
        new[] { "application/octet-stream" });
});

  4. En Program.cs:

    • 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.
    app.UseResponseCompression();

if (app.Environment.IsDevelopment())
{
    app.UseWebAssemblyDebugging();
}
else
{
    app.UseExceptionHandler("/Error");
    // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
    app.UseHsts();
}

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

app.UseRouting();

app.MapRazorPages();
app.MapControllers();
app.MapHub<ChatHub>("/chathub");
app.MapFallbackToFile("index.html");

app.Run();

Agregar código de componente de Razor para chat

  1. En el proyecto BlazorWebAssemblySignalRApp.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

<PageTitle>Index</PageTitle>

<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();
    }

    private async Task Send()
    {
        if (hubConnection is not null)
        {
            await hubConnection.SendAsync("SendMessage", userInput, messageInput);
        }
    }

    public bool IsConnected =>
        hubConnection?.State == HubConnectionState.Connected;

    public async ValueTask DisposeAsync()
    {
        if (hubConnection is not null)
        {
            await hubConnection.DisposeAsync();
        }
    }
}

Ejecutar la aplicación

Siga las instrucciones para las herramientas:

  1. En el Explorador de soluciones, seleccione el proyecto BlazorWebAssemblySignalRApp.Server. Presione F5 para ejecutar la aplicación con depuración o Ctrl+F5 (Windows)/⌘+F5 (macOS) para ejecutarla sin depuración.

    Importante

    Al ejecutar una aplicación hospedada Blazor WebAssembly, ejecute la aplicación desde el proyecto Server de la solució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:

    SignalRBlazor sample app open in two browser windows showing exchanged messages.

    Cita: Star Trek VI: The Undiscovered Country ©1991 Paramount

Creación de una aplicación Blazor Server

Siga las instrucciones para su elección de herramientas:

Nota

Se requiere Visual Studio 2022 o posterior y el SDK de .NET Core 6.0.0 o posterior.

  1. Cree un nuevo proyecto.

  2. Seleccione la plantilla Aplicación de Blazor Server . Seleccione Siguiente.

  3. Escriba BlazorServerSignalRApp en el campo Nombre del proyecto. Confirme que la entrada de Ubicación es correcta o proporcione una ubicación para el proyecto. Seleccione Siguiente.

  4. Seleccione Crear.

Adición de la biblioteca cliente de SignalR

  1. En el Explorador de soluciones, haga clic con el botón derecho en el proyecto BlazorServerSignalRApp y seleccione Administrar paquetes NuGet.

  2. En el cuadro de diálogo Administrar paquetes NuGet, confirme que Origen del paquete se ha establecido en nuget.org.

  3. Con Examinar seleccionado, escriba Microsoft.AspNetCore.SignalR.Client en el cuadro de búsqueda.

  4. En los resultados de la búsqueda, seleccione el paquete Microsoft.AspNetCore.SignalR.Client. Establezca la versión para que coincida con el marco compartido de la aplicación. Seleccione Instalar.

  5. Si aparece el cuadro de diálogo Vista previa de los cambios, seleccione Aceptar.

  6. 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

Cree una carpeta Hubs (en plural) y agregue la siguiente clase ChatHub (Hubs/ChatHub.cs):

using Microsoft.AspNetCore.SignalR;

namespace BlazorServerSignalRApp.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. Abra el archivo Program.cs .

  2. Agregue los espacios de nombres para Microsoft.AspNetCore.ResponseCompression y la clase ChatHub en la parte superior del archivo:

    using Microsoft.AspNetCore.ResponseCompression;
using BlazorServerSignalRApp.Hubs;

  3. Agregue servicios de middleware de compresión de respuesta a Program.cs:

    builder.Services.AddRazorPages();
builder.Services.AddServerSideBlazor();
builder.Services.AddSingleton<WeatherForecastService>();
builder.Services.AddResponseCompression(opts =>
{
    opts.MimeTypes = ResponseCompressionDefaults.MimeTypes.Concat(
        new[] { "application/octet-stream" });
});

  4. En Program.cs:

    • 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 para asignar el centro de conectividad Blazor y la reserva del lado cliente, agregue un punto de conexión para el centro de conectividad:

      app.MapHub<ChatHub>("/chathub");

    app.UseResponseCompression();

if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Error");
    // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
    app.UseHsts();
}

app.UseHttpsRedirection();

app.UseStaticFiles();

app.UseRouting();

app.MapBlazorHub();
app.MapHub<ChatHub>("/chathub");
app.MapFallbackToPage("/_Host");

app.Run();

Agregar código de componente de Razor para chat

  1. 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

<PageTitle>Index</PageTitle>

<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);
            InvokeAsync(StateHasChanged);
        });

        await hubConnection.StartAsync();
    }

    private async Task Send()
    {
        if (hubConnection is not null)
        {
            await hubConnection.SendAsync("SendMessage", userInput, messageInput);
        }
    }

    public bool IsConnected =>
        hubConnection?.State == HubConnectionState.Connected;

    public async ValueTask DisposeAsync()
    {
        if (hubConnection is not null)
        {
            await hubConnection.DisposeAsync();
        }
    }
}

Ejecutar la aplicación

Siga las instrucciones para las herramientas:

  1. Presione F5 para ejecutar la aplicación con depuración o Ctrl+F5 (Windows)/⌘+F5 (macOS) 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:

    SignalRBlazor sample app open in two browser windows showing exchanged messages.

    Cita: Star Trek VI: The Undiscovered Country ©1991 Paramount

Pasos siguientes

En este tutorial, ha aprendido a:

  • Crear un proyecto Blazor
  • 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

Para más información sobre la creación de aplicaciones de Blazor, consulte la documentación de Blazor:

ASP.NET Core BlazorAutenticación de tokens de portador con Identity Server, WebSockets y eventos enviados por el servidor

Recursos adicionales

Obtenga información sobre cómo:

  • Crear un proyecto Blazor
  • 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 tutorial, tendrá una aplicación de chat funcional.

Requisitos previos

Aplicación de ejemplo

No es necesario descargar la aplicación de chat de ejemplo para este tutorial. La aplicación de ejemplo es la aplicación final ya operativa que se crea siguiendo los pasos de este tutorial.

Ver o descargar el código de ejemplo

Creación de una aplicación Blazor WebAssembly hospedada

Siga las instrucciones para su elección de herramientas:

Nota

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

  1. Cree un nuevo proyecto.

  2. Elija la plantilla Aplicación de Blazor WebAssembly . Seleccione Siguiente.

  3. Escriba BlazorWebAssemblySignalRApp en el campo Nombre del proyecto. Confirme que la entrada de Ubicación es correcta o proporcione una ubicación para el proyecto. Seleccione Siguiente.

  4. Active la casilla ASP.NET Core hospedado del cuadro de diálogo Información adicional.

  5. Seleccione Crear.

Adición de la biblioteca cliente de SignalR

  1. En el Explorador de soluciones, haga clic con el botón derecho en el proyecto BlazorWebAssemblySignalRApp.Client y seleccione Administrar paquetes NuGet.

  2. En el cuadro de diálogo Administrar paquetes NuGet, confirme que Origen del paquete se ha establecido en nuget.org.

  3. Con Examinar seleccionado, escriba Microsoft.AspNetCore.SignalR.Client en el cuadro de búsqueda.

  4. En los resultados de la búsqueda, seleccione el paquete Microsoft.AspNetCore.SignalR.Client. Establezca la versión para que coincida con el marco compartido de la aplicación. Seleccione Instalar.

  5. Si aparece el cuadro de diálogo Vista previa de los cambios, seleccione Aceptar.

  6. 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 BlazorWebAssemblySignalRApp.Server, cree una carpeta Hubs (plural) y agregue la siguiente clase ChatHub (Hubs/ChatHub.cs):

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

namespace BlazorWebAssemblySignalRApp.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 BlazorWebAssemblySignalRApp.Server, abra el archivo Startup.cs.

  2. Agregue el espacio de nombres para la clase ChatHub en la parte superior del archivo:

    using BlazorWebAssemblySignalRApp.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" });
    });
}

  4. 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 BlazorWebAssemblySignalRApp.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();
    }

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

    public bool IsConnected =>
        hubConnection.State == HubConnectionState.Connected;

    public async ValueTask DisposeAsync()
    {
        if (hubConnection is not null)
        {
            await hubConnection.DisposeAsync();
        }
    }
}

Ejecutar la aplicación

Siga las instrucciones para las herramientas:

  1. En el Explorador de soluciones, seleccione el proyecto BlazorWebAssemblySignalRApp.Server. Presione F5 para ejecutar la aplicación con depuración o Ctrl+F5 (Windows)/⌘+F5 (macOS) para ejecutarla sin depuración.

    Importante

    Al ejecutar una aplicación hospedada Blazor WebAssembly, ejecute la aplicación desde el proyecto Server de la solució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:

    SignalRBlazor sample app open in two browser windows showing exchanged messages.

    Cita: Star Trek VI: The Undiscovered Country ©1991 Paramount

Creación de una aplicación Blazor Server

Siga las instrucciones para su elección de herramientas:

Nota

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

  1. Cree un nuevo proyecto.

  2. Seleccione la plantilla Aplicación de Blazor Server . Seleccione Siguiente.

  3. Escriba BlazorServerSignalRApp en el campo Nombre del proyecto. Confirme que la entrada de Ubicación es correcta o proporcione una ubicación para el proyecto. Seleccione Siguiente.

  4. Seleccione Crear.

Adición de la biblioteca cliente de SignalR

  1. En el Explorador de soluciones, haga clic con el botón derecho en el proyecto BlazorServerSignalRApp y seleccione Administrar paquetes NuGet.

  2. En el cuadro de diálogo Administrar paquetes NuGet, confirme que Origen del paquete se ha establecido en nuget.org.

  3. Con Examinar seleccionado, escriba Microsoft.AspNetCore.SignalR.Client en el cuadro de búsqueda.

  4. En los resultados de la búsqueda, seleccione el paquete Microsoft.AspNetCore.SignalR.Client. Establezca la versión para que coincida con el marco compartido de la aplicación. Seleccione Instalar.

  5. Si aparece el cuadro de diálogo Vista previa de los cambios, seleccione Aceptar.

  6. 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

Cree una carpeta Hubs (en plural) y agregue la siguiente clase ChatHub (Hubs/ChatHub.cs):

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

namespace BlazorServerSignalRApp.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. Abra el archivo Startup.cs .

  2. Agregue los espacios de nombres para Microsoft.AspNetCore.ResponseCompression y la clase ChatHub en la parte superior del archivo:

    using Microsoft.AspNetCore.ResponseCompression;
using BlazorServerSignalRApp.Server.Hubs;

  3. Agregue servicios de middleware de compresión de respuesta a Startup.ConfigureServices:

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

  4. 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 para asignar el concentrador Blazor 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();
    }
    else
    {
        app.UseExceptionHandler("/Error");
        app.UseHsts();
    }

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

    app.UseRouting();

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

Agregar código de componente de Razor para chat

  1. 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);
            InvokeAsync(StateHasChanged);
        });

        await hubConnection.StartAsync();
    }

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

    public bool IsConnected =>
        hubConnection.State == HubConnectionState.Connected;

    public async ValueTask DisposeAsync()
    {
        if (hubConnection is not null)
        {
            await hubConnection.DisposeAsync();
        }
    }
}

Ejecutar la aplicación

Siga las instrucciones para las herramientas:

  1. Presione F5 para ejecutar la aplicación con depuración o Ctrl+F5 (Windows)/⌘+F5 (macOS) 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:

    SignalRBlazor sample app open in two browser windows showing exchanged messages.

    Cita: Star Trek VI: The Undiscovered Country ©1991 Paramount

Pasos siguientes

En este tutorial, ha aprendido a:

  • Crear un proyecto Blazor
  • 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

Para más información sobre la creación de aplicaciones de Blazor, consulte la documentación de Blazor:

ASP.NET Core BlazorAutenticación de tokens de portador con Identity Server, WebSockets y eventos enviados por el servidor

Recursos adicionales

Obtenga información sobre cómo:

  • Crear un proyecto Blazor
  • 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 tutorial, tendrá una aplicación de chat funcional.

Requisitos previos

Aplicación de ejemplo

No es necesario descargar la aplicación de chat de ejemplo para este tutorial. La aplicación de ejemplo es la aplicación final ya operativa que se crea siguiendo los pasos de este tutorial.

Ver o descargar el código de ejemplo

Creación de una aplicación Blazor WebAssembly hospedada

Siga las instrucciones para su elección de herramientas:

Nota

Se requiere Visual Studio 16.6 o posterior y el SDK de .NET Core 3.1.300 o posterior.

  1. Cree un nuevo proyecto.

  2. Elija la plantilla Aplicación de Blazor WebAssembly . Seleccione Siguiente.

  3. Escriba BlazorWebAssemblySignalRApp en el campo Nombre del proyecto. Confirme que la entrada de Ubicación es correcta o proporcione una ubicación para el proyecto. Seleccione Siguiente.

  4. Active la casilla ASP.NET Core hospedado del cuadro de diálogo Información adicional.

  5. Seleccione Crear.

Adición de la biblioteca cliente de SignalR

  1. En el Explorador de soluciones, haga clic con el botón derecho en el proyecto BlazorWebAssemblySignalRApp.Client y seleccione Administrar paquetes NuGet.

  2. En el cuadro de diálogo Administrar paquetes NuGet, confirme que Origen del paquete se ha establecido en nuget.org.

  3. Con Examinar seleccionado, escriba Microsoft.AspNetCore.SignalR.Client en el cuadro de búsqueda.

  4. En los resultados de la búsqueda, seleccione el paquete Microsoft.AspNetCore.SignalR.Client. Establezca la versión para que coincida con el marco compartido de la aplicación. Seleccione Instalar.

  5. Si aparece el cuadro de diálogo Vista previa de los cambios, seleccione Aceptar.

  6. 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 BlazorWebAssemblySignalRApp.Server, cree una carpeta Hubs (plural) y agregue la siguiente clase ChatHub (Hubs/ChatHub.cs):

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

namespace BlazorWebAssemblySignalRApp.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 BlazorWebAssemblySignalRApp.Server, abra el archivo Startup.cs.

  2. Agregue el espacio de nombres para la clase ChatHub en la parte superior del archivo:

    using BlazorWebAssemblySignalRApp.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.AddResponseCompression(opts =>
    {
        opts.MimeTypes = ResponseCompressionDefaults.MimeTypes.Concat(
            new[] { "application/octet-stream" });
    });
}

  4. 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.MapControllers();
        endpoints.MapHub<ChatHub>("/chathub");
        endpoints.MapFallbackToFile("index.html");
    });
}

Agregar código de componente de Razor para chat

  1. En el proyecto BlazorWebAssemblySignalRApp.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 IDisposable

<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();
    }

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

    public bool IsConnected =>
        hubConnection.State == HubConnectionState.Connected;

    public void Dispose()
    {
        _ = hubConnection?.DisposeAsync();
    }
}

Ejecutar la aplicación

Siga las instrucciones para las herramientas:

  1. En el Explorador de soluciones, seleccione el proyecto BlazorWebAssemblySignalRApp.Server. Presione F5 para ejecutar la aplicación con depuración o Ctrl+F5 (Windows)/⌘+F5 (macOS) para ejecutarla sin depuración.

    Importante

    Al ejecutar una aplicación hospedada Blazor WebAssembly, ejecute la aplicación desde el proyecto Server de la solució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:

    SignalRBlazor sample app open in two browser windows showing exchanged messages.

    Cita: Star Trek VI: The Undiscovered Country ©1991 Paramount

Creación de una aplicación Blazor Server

Siga las instrucciones para su elección de herramientas:

Nota

Se requiere Visual Studio 16.6 o posterior y el SDK de .NET Core 3.1.300 o posterior.

  1. Cree un nuevo proyecto.

  2. Seleccione la plantilla Aplicación de Blazor Server . Seleccione Siguiente.

  3. Escriba BlazorServerSignalRApp en el campo Nombre del proyecto. Confirme que la entrada de Ubicación es correcta o proporcione una ubicación para el proyecto. Seleccione Siguiente.

  4. Seleccione Crear.

Adición de la biblioteca cliente de SignalR

  1. En el Explorador de soluciones, haga clic con el botón derecho en el proyecto BlazorServerSignalRApp y seleccione Administrar paquetes NuGet.

  2. En el cuadro de diálogo Administrar paquetes NuGet, confirme que Origen del paquete se ha establecido en nuget.org.

  3. Con Examinar seleccionado, escriba Microsoft.AspNetCore.SignalR.Client en el cuadro de búsqueda.

  4. En los resultados de la búsqueda, seleccione el paquete Microsoft.AspNetCore.SignalR.Client. Establezca la versión para que coincida con el marco compartido de la aplicación. Seleccione Instalar.

  5. Si aparece el cuadro de diálogo Vista previa de los cambios, seleccione Aceptar.

  6. 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.

Adición del paquete System.Text.Encodings.Web

Esta sección solo se aplica a las aplicaciones para ASP.NET Core versión 3.x.

Debido a un problema de resolución de paquetes al usar System.Text.Json 5.x en una aplicación ASP.NET Core 3.x, el proyecto requiere una referencia al paquete para System.Text.Encodings.Web. El problema subyacente se resolverá en una versión futura de la revisión de .NET 5. Para más información, vea System.Text.Json define netcoreapp3.0 sin dependencias (dotnet/runtime #45560).

Para agregar System.Text.Encodings.Web al proyecto, siga las instrucciones correspondientes a la herramienta de su elección:

  1. En el Explorador de soluciones, haga clic con el botón derecho en el proyecto BlazorServerSignalRApp y seleccione Administrar paquetes NuGet.

  2. En el cuadro de diálogo Administrar paquetes NuGet, confirme que Origen del paquete se ha establecido en nuget.org.

  3. Con Examinar seleccionado, escriba System.Text.Encodings.Web en el cuadro de búsqueda.

  4. En los resultados de la búsqueda, seleccione el paquete System.Text.Encodings.Web. Seleccione la versión del paquete que coincida con el marco compartido en uso. Seleccione Instalar.

  5. Si aparece el cuadro de diálogo Vista previa de los cambios, seleccione Aceptar.

  6. 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

Cree una carpeta Hubs (en plural) y agregue la siguiente clase ChatHub (Hubs/ChatHub.cs):

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

namespace BlazorServerSignalRApp.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. Abra el archivo Startup.cs .

  2. Agregue los espacios de nombres para Microsoft.AspNetCore.ResponseCompression y la clase ChatHub en la parte superior del archivo:

    using Microsoft.AspNetCore.ResponseCompression;
using BlazorServerSignalRApp.Server.Hubs;

  3. Agregue servicios de middleware de compresión de respuesta a Startup.ConfigureServices:

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

  4. 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 para asignar el concentrador Blazor 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();
    }
    else
    {
        app.UseExceptionHandler("/Error");
        app.UseHsts();
    }

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

    app.UseRouting();

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

Agregar código de componente de Razor para chat

  1. 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);
            InvokeAsync(StateHasChanged);
        });

        await hubConnection.StartAsync();
    }

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

    public bool IsConnected =>
        hubConnection.State == HubConnectionState.Connected;

    public async ValueTask DisposeAsync()
    {
        await hubConnection?.DisposeAsync();
    }
}

Ejecutar la aplicación

Siga las instrucciones para las herramientas:

  1. Presione F5 para ejecutar la aplicación con depuración o Ctrl+F5 (Windows)/⌘+F5 (macOS) 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:

    SignalRBlazor sample app open in two browser windows showing exchanged messages.

    Cita: Star Trek VI: The Undiscovered Country ©1991 Paramount

Pasos siguientes

En este tutorial, ha aprendido a:

  • Crear un proyecto Blazor
  • 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

Para más información sobre la creación de aplicaciones de Blazor, consulte la documentación de Blazor:

ASP.NET Core BlazorAutenticación de tokens de portador con Identity Server, WebSockets y eventos enviados por el servidor

Recursos adicionales