Hoje, lançamos uma nova atualização de visualização do Blazor WebAssembly com muitos novos recursos e aprimoramentos.Aqui está o que há de novo nesta versão:- Versão atualizada para 3.2.
- Lançamento simplificado
- Melhorias no tamanho do download
- Suporte ao cliente .NET SignalR
Começar
Para iniciar o Blazor WebAssembly 3.2.0 Preview 1, instale o .NET Core 3.1 SDK e execute o seguinte comando:dotnet new -i Microsoft.AspNetCore.Blazor.Templates::3.2.0-preview1.20073.1
Isso é tudo! Você pode encontrar documentos e exemplos adicionais em https://blazor.net .Atualizar projeto existente
Para atualizar um aplicativo Blazor WebAssembly existente da 3.1.0 Visualização 4 para a 3.2.0 Visualização 1:- Atualize todos os links para os pacotes Microsoft.AspNetCore.Blazor * para 3.2.0-preview1.20073.1.
- Em Program.cs no projeto do cliente Blazor WebAssembly, substitua
BlazorWebAssemblyHost.CreateDefaultBuilder() por WebAssemblyHostBuilder.CreateDefault(). - Mova os registros do componente raiz no projeto do cliente Blazor WebAssembly de
Startup.Configure para Program.cs chamando builder.RootComponents.Add<TComponent>( ). - Blazor WebAssembly
Startup.ConfigureServices Program.cs builder.Services. - Startup.cs Blazor WebAssembly client project.
- Blazor WebAssembly ASP.NET Core, Server
app.UseClientSideBlazorFiles<Client.Startup>(...) app.UseClientSideBlazorFiles<Client.Program>(...).
3.2
Nesta versão, atualizamos as versões do pacote Blazor WebAssembly para 3.2 para distingui-las da versão recente do .NET Core 3.1 Long Term Support (LTS). Não há versão correspondente do .NET Core 3.2 - a nova versão 3.2 se aplica apenas ao Blazor WebAssembly. O Blazor WebAssembly atualmente é baseado no .NET Core 3.1, mas não herda o status do .NET Core 3.1 LTS. Em vez disso, a versão inicial do Blazor WebAssembly, programada para maio deste ano, será Atual , que é "mantida por três meses após a próxima versão do Atual ou LTS", conforme descrito na Política de Suporte do .NET Core . A próxima versão do Blazor WebAssembly após a versão 3.2 em maio será com o .NET 5. Isso significa que após o lançamento do .NET 5, você precisará atualizar seus aplicativos Blazor WebAssembly para o .NET 5 para suportá-lo.Lançamento simplificado
Nesta versão, simplificamos as APIs de lançamento e hospedagem do Blazor WebAssembly. Inicialmente, as APIs de lançamento e implantação do Blazor WebAssembly foram projetadas para refletir os padrões usados no ASP.NET Core, mas nem todos os conceitos eram relevantes. APIs atualizadas também permitem o uso de alguns novos cenários.Veja como é o novo código de inicialização no Program.cs :public class Program
{
public static async Task Main(string[] args)
{
var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("app");
await builder.Build().RunAsync();
}
}
Os aplicativos Blazor WebAssembly agora oferecem suporte a Mainmétodos assíncronos para o ponto de entrada no aplicativo.Para criar um host padrão, ligue WebAssemblyHostBuilder.CreateDefault(). Os componentes e serviços raiz são configurados usando o vinculador; uma classe separada Startupnão é mais necessária. O exemplo a seguir é adicionado WeatherService, para que esteja disponível por meio de injeção de dependência (DI):public class Program
{
public static async Task Main(string[] args)
{
var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.Services.AddSingleton<WeatherService>();
builder.RootComponents.Add<App>("app");
await builder.Build().RunAsync();
}
}
Depois que o host é criado, você pode acessar os serviços da DI raiz antes que quaisquer componentes sejam apresentados. Isso pode ser útil se você precisar executar alguma lógica de inicialização antes que qualquer coisa seja exibida:public class Program
{
public static async Task Main(string[] args)
{
var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.Services.AddSingleton<WeatherService>();
builder.RootComponents.Add<App>("app");
var host = builder.Build();
var weatherService = host.Services.GetRequiredService<WeatherService>();
await weatherService.InitializeWeatherAsync();
await host.RunAsync();
}
}
O host agora também fornece uma instância da configuração central para o aplicativo. A configuração não é preenchida com nenhum dado padrão, mas você pode preenchê-lo conforme necessário em seu aplicativo.public class Program
{
public static async Task Main(string[] args)
{
var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.Services.AddSingleton<WeatherService>();
builder.RootComponents.Add<App>("app");
var host = builder.Build();
var weatherService = host.Services.GetRequiredService<WeatherService>();
await weatherService.InitializeWeatherAsync(host.Configuration["WeatherServiceUrl"]);
await host.RunAsync();
}
}
Melhorias no tamanho do download
Os aplicativos Blazor WebAssembly executam o vinculador .NET IL em cada assembly para remover o código não utilizado do aplicativo. Nas versões anteriores, apenas as principais bibliotecas da estrutura eram cortadas. A partir desta versão, os conjuntos Blazor também são cortados, resultando em uma pequena redução no tamanho - em torno de 100 KB. Como antes, se você precisar desativar a ligação, adicione seu próprio arquivo de <BlazorLinkOnBuild>false</BlazorLinkOnBuild> projeto.Suporte ao cliente .NET SignalR
Agora você pode usar o SignalR nos aplicativos Blazor WebAssembly usando o cliente .NET SignalR.Para experimentar o SignalR no seu aplicativo Blazor WebAssembly:- Crie um aplicativo Blazor WebAssembly hospedado no ASP.NET Core.
dotnet new blazorwasm -ho -o BlazorSignalRApp
- Adicione o pacote do cliente ASP.NET Core SignalR ao projeto do cliente .
cd BlazorSignalRApp
dotnet add Client package Microsoft.AspNetCore.SignalR.Client
- No projeto do servidor , adicione a seguinte classe Hub / ChatHub.cs .
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);
}
}
}
- No servidor do projeto, adicionar os serviços SignalR no método
Startup.ConfigureServices.
services.AddSignalR();
- Adicione também o terminal para
ChatHubat Startup.Configure.
.UseEndpoints(endpoints =>
{
endpoints.MapDefaultControllerRoute();
endpoints.MapHub<ChatHub>("/chatHub");
endpoints.MapFallbackToClientSideBlazor<Client.Program>("index.html");
});
- Atualize Pages / Index.razor no projeto Client com a seguinte marcação.
@using Microsoft.AspNetCore.SignalR.Client
@page "/"
@inject NavigationManager NavigationManager
<div>
<label for="userInput">User:</label>
<input id="userInput" @bind="userInput" />
</div>
<div class="form-group">
<label for="messageInput">Message:</label>
<input id="messageInput" @bind="messageInput" />
</div>
<button @onclick="Send" disabled="@(!IsConnected)">Send Message</button>
<hr />
<ul id="messagesList">
@foreach (var message in messages)
{
<li>@message</li>
}
</ul>
@code {
HubConnection hubConnection;
List<string> messages = new List<string>();
string userInput;
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 + " says " + message;
messages.Add(encodedMsg);
StateHasChanged();
});
await hubConnection.StartAsync();
}
Task Send() => hubConnection.SendAsync("SendMessage", userInput, messageInput);
public bool IsConnected => hubConnection.State == HubConnectionState.Connected;
}
- Crie e execute um projeto do servidor
cd Server
dotnet run
- Abra o aplicativo em duas guias separadas do navegador para se comunicar em tempo real através do SignalR.
Problemas conhecidos
A seguir, é apresentada uma lista de problemas conhecidos nesta versão que serão corrigidos em uma atualização futura.Avaliações
Esperamos que você goste dos novos recursos nesta versão de pré-visualização do Blazor WebAssembly! Informe o que você pensa ao relatar problemas no GitHub .Obrigado por usar o Blazor.