c++服务器端开发入门
介绍 (Introduction)
We all know that the Blazor framework is a client-side web framework. But is it possible to run a Blazor application separate from a UI thread? The latest version 0.5.0 of Blazor gives us the flexibility to run it in a separate process from the rendering process. We are going to explore server-side Blazor in this article.
我们都知道Blazor框架是一个客户端Web框架。 但是可以将Blazor应用程序与UI线程分开运行吗？ Blazor的最新版本0.5.0使我们可以灵活地在与渲染过程分开的过程中运行它。 我们将在本文中探索服务器端Blazor。
什么是服务器端Blazor？ (What is Server-Side Blazor?)
Since Blazor is a client-side web framework, the component logic and DOM interaction both happens in the same process.
由于Blazor是客户端Web框架，因此组件逻辑和DOM交互都在同一过程中发生。
However, the design of the Blazor framework is smart and flexible enough to run the application separate from the rendering process. For example, we can run Blazor in a web worker thread separately from the UI thread.
但是，Blazor框架的设计足够智能和灵活，足以将应用程序与呈现过程分开运行。 例如，我们可以在Web工作线程中与UI线程分开运行Blazor。
In this scenario, the UI thread will push the events to the Blazor worker thread, and Blazor will push UI updates to the UI thread as needed. Although Blazor does not support this functionality yet, but the Blazor framework is designed to handle such scenarios and is expected to support it in future releases.
在这种情况下，UI线程会将事件推送到Blazor工作线程，并且Blazor将根据需要将UI更新推送到UI线程。 尽管Blazor尚不支持此功能，但Blazor框架旨在处理此类情况，并有望在将来的版本中支持它。
Starting from Blazor 0.5.0, we can run a Blazor application on the server. This means that we can run a Blazor component server-side on .NET Core while other functionalities, such as the UI, update. Event handling and JavaScript interop calls are handled by a SignalR connection over the network. The .NET part runs under CoreCLR instead of WebAssembly, which provides us the access to the complete .NET ecosystem, debugging, JIT compilation, and so on. This adds extensibility to the Blazor framework, as the server-side Blazor uses the same component model as running a client-side Blazor app.
从Blazor 0.5.0开始，我们可以在服务器上运行Blazor应用程序。 这意味着我们可以在.NET Core上在服务器端运行Blazor组件，同时更新其他功能(如UI)。 事件处理和JavaScript互操作调用由网络上的SignalR连接处理。 .NET部分在CoreCLR而不是WebAssembly下运行，这使我们可以访问完整的.NET生态系统，调试，JIT编译等。 由于服务器端Blazor使用与运行客户端Blazor应用程序相同的组件模型，因此这增加了Blazor框架的可扩展性。
Let us create our first server-side Blazor app and explore it to get a better understanding of this new feature.
让我们创建我们的第一个服务器端Blazor应用并对其进行探索，以更好地了解这一新功能。
先决条件 (Prerequisites)
Install the .NET Core 2.1 or above SDK from here
从此处安装.NET Core 2.1或更高版本的SDK
Install Visual Studio 2017 v15.7 or above from here
从此处安装Visual Studio 2017 v15.7或更高版本
Install ASP.NET Core Blazor Language Services extension from here
从此处安装ASP.NET Core Blazor语言服务扩展
Visual Studio 2017 versions below v15.7 does not support the Blazor framework.
v15.7以下的Visual Studio 2017版本不支持Blazor框架。
创建服务器端Blazor应用程序 (Creating a server-side Blazor application)
Open Visual Studio and select File >> New >> Project.
打开Visual Studio，然后选择“文件>>新建>>项目”。
After selecting the project, a “New Project” dialog will open. Select .NET Core inside the Visual C# menu from the left panel. Then, select “ASP.NET Core Web Application” from the available project types. Name the project ServerSideBlazor and press OK.
选择项目后，将打开“新建项目”对话框。 从左侧面板的Visual C＃菜单中选择.NET Core。 然后，从可用的项目类型中选择“ ASP.NET Core Web应用程序”。 将项目命名为ServerSideBlazor 然后按确定。
After clicking on OK, a new dialog will open asking you to select the project template. You can see two drop-down menus at the top left of the template window. Select “.NET Core” and “ASP.NET Core 2.1” from these dropdowns. Then, select the “Blazor (Server-side in ASP.NET Core)” template and press OK.
单击确定后，将打开一个新对话框，要求您选择项目模板。 您可以在模板窗口的左上方看到两个下拉菜单。 从这些下拉列表中选择“ .NET Core”和“ ASP.NET Core 2.1”。 然后，选择“ Blazor(ASP.NET Core中的服务器端)”模板，然后按OK。
This will create our server-side Blazor solution. You can see the folder structure in Solution Explorer, as shown in the below image:
这将创建我们的服务器端Blazor解决方案。 您可以在解决方案资源管理器中看到文件夹结构，如下图所示：
The solution has two project files:
该解决方案有两个项目文件：
- ServerSideBlazor.App: this is our ASP.NET core hosted project. ServerSideBlazor.App：这是我们的ASP.NET核心托管项目。
- ServerSideBlazor.Server: this contains our server-side Blazor app. ServerSideBlazor.Server：这包含我们的服务器端Blazor应用程序。
All of our component logic lies in the server-side Blazor app. However, this logic does not run on the client-side in browser — instead, it runs server-side in the ASP.NET Core host application. This application uses blazor.server.js for bootstrapping instead of blazor.webassembly.js which is used by normal Blazor apps. This allows the app to establish a SignalR connection over the network to handle UI updates and event forwarding. The blazor.server.js is present in the “\ServerSideBlazor.App\bin\Debug\netstandard2.0\dist\_framework” folder, and the <script> tag to include it in the project is present in the wwwroot/index.html file.
我们所有的组件逻辑都位于服务器端Blazor应用程序中。 但是，此逻辑不会在浏览器的客户端上运行-而是在ASP.NET Core主机应用程序中的服务器端运行。 此应用程序使用blazor.server.js进行引导，而不是普通Blazor应用程序使用的blazor.webassembly.js。 这允许该应用通过网络建立SignalR连接，以处理UI更新和事件转发。 blazor.server.js 位于“ \ ServerSideBlazor.App \ bin \ Debug \ netstandard2.0 \ dist \ _framework”文件夹中，并且将其包含在项目中的<script>标记位于wwwroot / inde x.html文件中。
The blazor.server.js is the only component that separates a server-side Blazor app from a client-side Blazor app. If we provide a reference of blazor.webassembly.js instead of blazor.server.js inside the index.html file, then this application will behave like a client-side Blazor app.
blazor.server.js是将服务器端Blazor应用程序与客户端Blazor应用程序分开的唯一组件。 如果我们在index.html文件中提供blazor.webassembly.js的引用而不是blazor.server.js ，则此应用程序的行为将类似于客户端Blazor应用程序。
The Blazor app is hosted by the ASP.NET Core app, which also sets up the SignalR endpoint. Since the Blazor app is running on the server, the event handling logic can directly access the server resources and services.
Blazor应用程序由ASP.NET Core应用程序托管，该应用程序还设置了SignalR终结点。 由于Blazor应用程序正在服务器上运行，因此事件处理逻辑可以直接访问服务器资源和服务。
For example, if we want to fetch any data, we no longer need to issue an HTTP request. Instead, we can configure a service on the server and use it to retrieve the data.
例如，如果我们要获取任何数据，则不再需要发出HTTP请求。 相反，我们可以在服务器上配置服务，然后使用它来检索数据。
In the sample application that we have created, the WeatherForecastService is defined inside the “ServerSideBlazor.App/Services” folder.
在我们创建的示例应用程序中， WeatherForecastService在“ ServerSideBlazor.App/Services”文件夹中定义。
using System;using System.Linq;using System.Threading.Tasks;namespace ServerSideBlazor.App.Services{ public class WeatherForecastService { private static string[] Summaries = new[] { "Freezing", "Bracing", "Chilly", "Cool", "Mild", "Warm", "Balmy", "Hot", "Sweltering", "Scorching" }; public Task<WeatherForecast[]> GetForecastAsync(DateTime startDate) { var rng = new Random(); return Task.FromResult(Enumerable.Range(1, 5).Select(index => new WeatherForecast { Date = startDate.AddDays(index), TemperatureC = rng.Next(-20, 55), Summary = Summaries[rng.Next(Summaries.Length)] }).ToArray()); } }}Further, we need to configure the service inside the ConfigureServices method in the ServerSideBlazor.App/startup.cs” file.
此外，我们需要在ServerSideBlazor.App/startup.cs”文件的ConfigureServices方法内配置服务。
public void ConfigureServices(IServiceCollection services){ services.AddSingleton<WeatherForecastService>();}We will then inject the service into the FetchData.cshtml view page, where the method GetForecastAsync is invoked to fetch the data.
然后，我们将服务注入FetchData.cshtml视图页面，在该页面中调用方法GetForecastAsync来获取数据。
@using ServerSideBlazor.App.Services@page "/fetchdata"@inject WeatherForecastService ForecastService// HTML DOM here.@functions { WeatherForecast[] forecasts; protected override async Task OnInitAsync() { forecasts = await ForecastService.GetForecastAsync(DateTime.Now); }}Go ahead and launch the application in Google Chrome. It will open a browser window and the app will look like a normal Blazor app. Open Chrome DevTools. Navigate to the “Network” tab and you can see that the application has not downloaded any .NET runtime or the app assembly.
继续并在Google Chrome中启动该应用程序。 它将打开浏览器窗口，该应用程序看起来像普通的Blazor应用程序。 打开Chrome DevTools。 导航到“网络”选项卡，您可以看到该应用程序尚未下载任何.NET运行时或应用程序程序集。
This is because the app is running sever-side on .NET Core. Since the dependencies are not downloaded on application boot up, the size of the app is smaller. It will also load faster compared to a normal Blazor app.
这是因为该应用程序在.NET Core上正在服务器端运行。 由于在应用程序启动时不下载依赖项，因此应用程序的大小较小。 与普通的Blazor应用相比，它的加载速度也更快。
服务器端Blazor的优势 (Advantages of server-side Blazor)
Server-side Blazor applications provide us many benefits:
服务器端Blazor应用程序为我们提供了许多好处：
- Since the UI update is handled over a SignalR connection, we can avoid the unnecessary page refreshes. 由于UI更新是通过SignalR连接处理的，因此我们可以避免不必要的页面刷新。
- The app download size is smaller and the initial app load is faster. 应用下载大小较小，初始应用加载速度更快。
- The Blazor component can take full advantage of server capabilities such as using .NET Core compatible APIs. Blazor组件可以充分利用服务器功能，例如使用.NET Core兼容的API。
- It will also support existing .NET tooling like debugging the application and JIT compilation. 它还将支持现有的.NET工具，例如调试应用程序和JIT编译。
- Since server-side Blazor runs under a native .NET Core process and not under Mono WebAssembly, it is also supported on the browsers that have no WebAssembly support. 由于服务器端Blazor在本地.NET Core进程下运行，而不在Mono WebAssembly下运行，因此在不支持WebAssembly的浏览器中也支持该功能。
But there are also few drawbacks for server-side blazor apps:
但是，服务器端blazor应用程序也有一些缺点：
- Since UI interaction involves SignalR communication, it adds one extra step in network calls which results in some latency. 由于UI交互涉及SignalR通信，因此它在网络调用中增加了一个额外的步骤，从而导致一定的延迟。
- Scalability of the apps (handling multiple client connections) is also a challenge. 应用程序的可伸缩性(处理多个客户端连接)也是一个挑战。
结论 (Conclusion)
We have learned about the latest server-side Blazor application introduced with the Blazor 0.5.0 release, and we now understand how it is different from the normal client-side Blazor app. We’ve also discussed the pros and cons of using a server-side Blazor app over a client-side blazor app.
我们已经了解了Blazor 0.5.0发行版中引入的最新服务器端Blazor应用程序，并且现在我们了解到它与普通的客户端Blazor应用程序有何不同。 我们还讨论了使用服务器端Blazor应用程序而不是客户端blazor应用程序的利弊。
Get my book Blazor Quick Start Guide to learn more about Blazor.
获取我的书《 Blazor快速入门指南》，以了解有关Blazor的更多信息。
You can check out my other articles on Blazor here.
您可以在此处查看有关Blazor的其他文章。
Preparing for interviews? Read my article on C# Coding Questions For Technical Interviews
准备面试吗？ 阅读有关技术面试的C＃编码问题的文章
也可以看看 (See Also)
Originally published at https://ankitsharmablogs.com/
最初发布在https://ankitsharmablogs.com/
翻译自: https://www.freecodecamp.org/news/a-quick-introduction-to-server-side-blazor-apps-c991e59c90de/
c++服务器端开发入门
2871
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
