免费行情软件网站下载视频,公司介绍ppt制作模板,网络营销策划的流程及要点,网站建设方案书一般由谁做Blazor WebAssembly是什么首先来说说WebAssembly是什么#xff0c;WebAssembly是一个可以使C#,Java,Golang等静态强类型编程语言#xff0c;运行在浏览器中的标准#xff0c;浏览器厂商基于此标准实现执行引擎。在实现了WebAssembly标准引擎之后#xff0c;浏览器中可以执行… Blazor WebAssembly是什么首先来说说WebAssembly是什么WebAssembly是一个可以使C#,Java,Golang等静态强类型编程语言运行在浏览器中的标准浏览器厂商基于此标准实现执行引擎。在实现了WebAssembly标准引擎之后浏览器中可以执行由其他语言编译成的wasm模块。使用强类型编程语言的好处显而易见可以选择更多的语言编写前端逻辑静态编程语言编译成的字节码相对于JS这种脚本语言执行效率更高可以使用静态编程语言生态中的强大类库Blazor WebAssembly是dotnet版本的WebAssembly实现微软将dotnet运行时编译成dotnet.wasm模块我们的程序编译出来的dll文件运行在此模块上。需要注意的是Blazor WebAssembly是一个完完全全的前端框架只是逻辑代码不再使用JS编写而是使用C#编写。Grpc Web是什么Grpc是一种与语言无关的的高性能远程过程调用RPC框架。Grpc有以下优点现代高性能轻量级 RPC 框架。协定优先 API 开发默认使用协议缓冲区允许与语言无关的实现。可用于多种语言的工具以生成强类型服务器和客户端。支持客户端、服务器和双向流式处理调用。使用 Protobuf 二进制序列化减少对网络的使用。而Grpc Web是Grpc的前端实现版本可以使浏览器应用直接与Grpc交互。有了Grpc Web我们可以直接在Blazor WebAssembly中调用Grpc Server而不用再通过传统的Http请求方法调用。代码演示GrpcServer首先需要新建一个Grpc Server 然后为其引入 Grpc.AspNetCore.Web Nuget包并开启grpc webapp.UseGrpcWeb(); // Must be added between UseRouting and UseEndpoints// Configure the HTTP request pipeline.app.MapGrpcServiceGreeterService().EnableGrpcWeb();之后我们需要为Grpc Server开启跨域设置允许跨域访问app.Use(async (context, next) {context.Response.Headers.Add(Access-Control-Allow-Credentials, true);context.Response.Headers.Add(Access-Control-Allow-Headers, *);context.Response.Headers.Add(Access-Control-Allow-Methods, PUT,POST,GET,DELETE,OPTIONS,HEAD,PATCH);context.Response.Headers.Add(Access-Control-Allow-Origin, *);context.Response.Headers.Add(Access-Control-Max-Age, 100000);context.Response.Headers.Add(Access-Control-Expose-Headers, Grpc-Status,Grpc-Message,Grpc-Encoding,Grpc-Accept-Encoding); if (context.Request.Method.ToUpper() OPTIONS){ return;} // Do work that can write to the Response.await next.Invoke(); // Do logging or other work that doesnt write to the Response.});最终Program.cs的代码如下using GrpcService2.Services;var builder WebApplication.CreateBuilder(args);builder.Services.AddGrpc();var app builder.Build();
app.Use(async (context, next) {context.Response.Headers.Add(Access-Control-Allow-Credentials, true);context.Response.Headers.Add(Access-Control-Allow-Headers, *);context.Response.Headers.Add(Access-Control-Allow-Methods, PUT,POST,GET,DELETE,OPTIONS,HEAD,PATCH);context.Response.Headers.Add(Access-Control-Allow-Origin, *);context.Response.Headers.Add(Access-Control-Max-Age, 100000);context.Response.Headers.Add(Access-Control-Expose-Headers, Grpc-Status,Grpc-Message,Grpc-Encoding,Grpc-Accept-Encoding); if (context.Request.Method.ToUpper() OPTIONS){ return;} await next.Invoke();
});app.UseGrpcWeb();
app.MapGrpcServiceGreeterService().EnableGrpcWeb();app.MapGet(/, () Communication with gRPC endpoints must be made through a gRPC client. To learn how to create a client, visit: https://go.microsoft.com/fwlink/?linkid2086909);app.Run();Blazor WebAssembly现在新建一个WebAssembly项目 为其引入以下nuget包ItemGroupPackageReference IncludeGoogle.Protobuf Version3.20.1 /PackageReference IncludeGrpc.Net.Client Version2.46.0 /PackageReference IncludeGrpc.Net.Client.Web Version2.46.0 /PackageReference IncludeGrpc.Tools Version2.46.1IncludeAssetsruntime; build; native; contentfiles; analyzers; buildtransitive/IncludeAssetsPrivateAssetsall/PrivateAssets/PackageReference/ItemGroup在其项目文件中包含进proto文件ItemGroupProtobuf Include..\GrpcService2\Protos\*.proto GrpcServicesClient //ItemGroup然后将GrpcClient注入容器builder.Services.AddScoped(p
{var channel GrpcChannel.ForAddress(https://localhost:7033/, new GrpcChannelOptions{HttpHandler new GrpcWebHandler(new HttpClientHandler())});var client new GrpcService2.Greeter.GreeterClient(channel);return client;
});修改Index.razor让其访问grpc serverpage /
inject GrpcService2.Greeter.GreeterClient GreeterClientdivgrpc web response Message/divcode {public string Message { get; set; }protected override async Task OnInitializedAsync(){var reply await GreeterClient.SayHelloAsync(new GrpcService2.HelloRequest { Name test });Message reply.Message;}
}最终效果如下可以看到整个请求/渲染过程使用的是C#代码编写的逻辑没用到js原理是因为blazor webassembly将我们的dotnet运行时与我们的代码编译后的程序集运行在了基于webassembly标准实现的浏览器引擎中。并且可以看到基于Grpc Web的请求响应体都使用的压缩过的二进制形式。效率相对更高 webassembly难道是未来难道未来的某一天要和js say goodbye了吗
