Blazor WebAssembly 3.2.0 Preview 1 теперь доступна

Сегодня мы выпустили новое предварительное обновление для Blazor WebAssembly с множеством замечательных новых функций и улучшений.

Вот что нового в этом выпуске:

• Версия обновлена до 3.2
• Упрощенный запуск
• Улучшения размера загрузки
• Поддержка клиента .NET SignalR

Начало

Чтобы начать работу с Blazor WebAssembly 3.2.0 Preview 1 установите .NET Core 3.1 SDK и затем выполните следующую команду:

dotnet new -i Microsoft.AspNetCore.Blazor.Templates::3.2.0-preview1.20073.1

Вот и все! Вы можете найти дополнительные документы и примеры на https://blazor.net.

Обновить существующий проект

Чтобы обновить существующее приложение Blazor WebAssembly с 3.1.0 Preview 4 до 3.2.0 Preview 1:

• Обновите все ссылки на пакеты Microsoft.AspNetCore.Blazor* на 3.2.0-preview1.20073.1.
• В Program.cs в клиентском проекте Blazor WebAssembly замените BlazorWebAssemblyHost.CreateDefaultBuilder() на WebAssemblyHostBuilder.CreateDefault().
• Переместите регистрации корневых компонентов в клиентском проекте Blazor WebAssembly из Startup.Configure в Program.cs вызвав 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

В этом выпуске мы обновили версии пакетов Blazor WebAssembly до 3.2, чтобы отличать их от недавнего выпуска .NET Core 3.1 Long Term Support (LTS). Соответствующего выпуска .NET Core 3.2 не существует — новая версия 3.2 применяется только к Blazor WebAssembly. Blazor WebAssembly в настоящее время основана на .NET Core 3.1, но не наследует статус .NET Core 3.1 LTS. Вместо этого начальный выпуск Blazor WebAssembly, запланированный на май этого года, будет Current, который «поддерживается в течение трех месяцев после следующего выпуска Current или LTS», как описано в .политике поддержки .NET Core . Следующий запланированный выпуск Blazor WebAssembly после выпуска 3.2 в мае будет с .NET 5 . Это означает, что после выхода .NET 5 вам потребуется обновить приложения Blazor WebAssembly до .NET 5, чтобы поддерживать его.

Упрощенный запуск

В этом выпуске мы упростили API запуска и хостинга для Blazor WebAssembly. Первоначально API запуска и размещения для Blazor WebAssembly были разработаны для отражения шаблонов, используемых в ASP.NET Core, но не все концепции были актуальны. Обновленные API также позволяют использовать некоторые новые сценарии.

Вот как выглядит новый код запуска в 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();
    }
}

Приложения Blazor WebAssembly теперь поддерживают асинхронные Main методы для точки входа в приложение.

Чтобы создать хост по умолчанию, вызовите WebAssemblyHostBuilder.CreateDefault(). Корневые компоненты и сервисы настраиваются с помощью компоновщика; отдельный класс Startup больше не нужен. В следующем примере добавляется WeatherService, поэтому он доступен через внедрение зависимостей (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();
    }
}

После того как хост создан, вы можете получить доступ к сервисам из корневой области 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");

        var host = builder.Build();

        var weatherService = host.Services.GetRequiredService<WeatherService>();
        await weatherService.InitializeWeatherAsync();

        await host.RunAsync();
    }
}

Хост также теперь предоставляет экземпляр центральной конфигурации для приложения. Конфигурация не заполняется никакими данными по умолчанию, но вы можете заполнить ее, как требуется в вашем приложении.

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

Улучшения размера загрузки

Приложения Blazor WebAssembly запускают компоновщик .NET IL в каждой сборке для удаления неиспользуемого кода из приложения. В предыдущих выпусках обрезались только основные библиотеки фреймворков. Начиная с этого выпуска сборки Blazor также обрезаются, что приводит к незначительному уменьшению размера — около 100 КБ. Как и раньше, если вам когда-либо понадобится отключить связывание, добавьте свойсвто <BlazorLinkOnBuild>false</BlazorLinkOnBuild> к вашему фалу проекта.

Поддержка клиента .NET SignalR

Теперь вы можете использовать SignalR из ваших приложений Blazor WebAssembly с помощью клиента .NET SignalR.

Чтобы попробовать SignalR в своем приложении Blazor WebAssembly:

1. Создайте приложение Blazor WebAssembly, размещенное на ASP.NET Core.
   
   

   dotnet new blazorwasm -ho -o BlazorSignalRApp

2. Добавьте пакет клиента ASP.NET Core SignalR в проект Client.
   
   

   cd BlazorSignalRApp
   dotnet add Client package Microsoft.AspNetCore.SignalR.Client

3. В проекте Server добавьте следующий класс 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);
           }
       }
   }
   

4. В проекте Server добавьте службы SignalR в методе Startup.ConfigureServices.
   
   

   services.AddSignalR();
   

5. Также добавьте конечную точку для ChatHub в Startup.Configure.
   
   

   .UseEndpoints(endpoints =>
   {
       endpoints.MapDefaultControllerRoute();
       endpoints.MapHub<ChatHub>("/chatHub");
       endpoints.MapFallbackToClientSideBlazor<Client.Program>("index.html");
   });
   

6. Обновите Pages/Index.razor в проекте Client следующей разметкой.
   
   

   @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;
   }
   

7. Создайте и запустите проект Server
   
   

   cd Server
   dotnet run
   

8. Откройте приложение в двух отдельных вкладках браузера, чтобы общаться в режиме реального времени через SignalR.
   

Известные проблемы

Ниже приведен список известных проблем этого выпуска, которые будут устранены в будущем обновлении.

• Запуск нового приложения Blazor WebAssembly, размещенного на ASP.NET Core, из командной строки приводит к появлению предупреждения:
  
  

  CSC : warning CS8034: Unable to load Analyzer assembly C:\Users\user\.nuget\packages\microsoft.aspnetcore.components.analyzers\3.1.0\analyzers\dotnet\cs\Microsoft.AspNetCore.Components.Analyzers.dll : Assembly with same name is already loaded.
  

  • Решение: это предупреждение может быть проигнорировано или удалено с помощью свойства <DisableImplicitComponentsAnalyzers>true</DisableImplicitComponentsAnalyzers> MSBuild.

Отзывы

Мы надеемся, что вам понравятся новые функции в этой предварительной версии Blazor WebAssembly! Пожалуйста, дайте нам знать, что вы думаете, сообщая о проблемах на GitHub.

Спасибо за использование Blazor.