Blazor WebAssembly + Grpc Web = 未来?
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 web
app.UseGrpcWeb(); // Must be added between UseRouting and UseEndpoints
// Configure the HTTP request pipeline.
app.MapGrpcService<GreeterService>().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 doesn't 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.MapGrpcService<GreeterService>().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/?linkid=2086909"); app.Run();
Blazor WebAssembly
现在新建一个WebAssembly项目
为其引入以下nuget包
<ItemGroup>
<PackageReference Include="Google.Protobuf" Version="3.20.1" />
<PackageReference Include="Grpc.Net.Client" Version="2.46.0" />
<PackageReference Include="Grpc.Net.Client.Web" Version="2.46.0" />
<PackageReference Include="Grpc.Tools" Version="2.46.1">
<IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
<PrivateAssets>all</PrivateAssets>
</PackageReference>
</ItemGroup>
在其项目文件中包含进proto文件
<ItemGroup>
<Protobuf Include="..\GrpcService2\Protos\*.proto" GrpcServices="Client" />
</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 server
@page "/"
@inject GrpcService2.Greeter.GreeterClient GreeterClient <div>grpc web response @Message</div> @code {
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标准实现的浏览器引擎中。
并且可以看到请求响应体都使用的压缩过的二进制形式。效率相对更高
webassembly难道是未来?难道未来的某一天要和js say goodbye了吗?
Blazor WebAssembly + Grpc Web = 未来?的更多相关文章
- Blazor WebAssembly 渐进式 Web 应用程序 (PWA) 使用 LocalStorage 离线处理数据
原文链接:https://www.cnblogs.com/densen2014/p/16133343.html Window.localStorage 只读的localStorage 属性允许你访问一 ...
- 使用Azure静态Web应用部署Blazor Webassembly应用
上一次演示了如何使用Azure静态web应用部署VUE前端项目(使用 Azure静态web应用+Github全自动部署VUE站点).我们知道静态web应用支持VUE,react,angular等项目的 ...
- Blazor WebAssembly 3.2.0 已在塔架就位 将发射新一代前端SPA框架
最美人间四月天,春光不负赶路人.在充满无限希望的明媚春天里,一路风雨兼程的.NET团队正奋力实现新的突破. 根据计划,新一代基于WebAssembly 技术研发的前端SPA框架Blazor 将于5月1 ...
- Blazor WebAssembly 3.2.0 正式起飞,blazor 适合你吗?
最近blazor更新很快,今天在官方博客上发布了Blazor WebAssembly 3.2.0 RC:https://devblogs.microsoft.com/aspnet/blazor-web ...
- WebAssembly,Web的新时代
在浏览器之争中,Chrome凭借JavaScript的卓越性能取得了市场主导地位,然而由于javascript的无类型特性,导致其运行时消耗大量的性能做为代价,这也是JavaScript的瓶颈之一.W ...
- Blazor(WebAssembly) + .NETCore 实现斗地主
之前群里大神发了一个 html5+ .NETCore的斗地主,刚好在看Blazor WebAssembly 就尝试重写试试. 还有就是有些标题党了,因为文章里几乎没有斗地主的相关实现:),这里主要介绍 ...
- 使用WebApi和Asp.Net Core Identity 认证 Blazor WebAssembly(Blazor客户端应用)
原文:https://chrissainty.com/securing-your-blazor-apps-authentication-with-clientside-blazor-using-web ...
- 浏览器中的 .Net Core —— Blazor WebAssembly 初体验
前言 在两年多以前就听闻 Blazor 框架,是 .Net 之父的业余实验性项目,其目的是探索 .Net 与 WebAssembly 的兼容性和应用前景.现在这个项目已经正式成为 Asp.Net Co ...
- 通过 Serverless 加速 Blazor WebAssembly
Blazor ❤ Serverless 我正在开发 Ant Design 的 Blazor 版本,预览页面部署在 Github Pages 上,但是加载速度很不理想,往往需要 1 分钟多钟才完成. 项 ...
随机推荐
- Ubuntu中hyperledger-fabric2.3.0环境搭建
系统环境 hyperledger-fabric在Ubuntu安装过程,fabric版本为2.3.0 首先安装相关软件 1.安装docker 直接参考下面这篇文档安装好docker-ce即可 Ubunt ...
- 3道常见的vue面试题,你都会了吗?
最近流传各大厂纷纷裁员,导致很多人"被迫"毕业,显然很多人还是想留级,无奈出现在名单中,只能感叹命运不公,不过拿了N+1,也算是很欣慰. 又得去面试了,接下来一起来巩固下vue的3 ...
- 随机获取gbr颜色值
- node.js - http、模块化、npm
今天是node学习的第二天,其实越往后面学越感觉有点熟悉的味道了,光针对于node来说哈,为什么呢,因为我之前学过一点云计算的东西,当时感觉没什么用搞了下服务器客户端这些,没想到这里还能用一用,至少看 ...
- 推荐个我在用的免费翻译软件,支持多家翻译API整合
前段时间发了个关于<Spring支持PHP>的视频:点击查看 然后有小伙伴留言说:"你这个翻译好像很好用的样子". 的确,我自己也觉得很好用.之前视频没看过的不知道是哪 ...
- HCIE笔记-第六节-CIDR与ICMP
项目部 58人 地址:194.2.3.128 /26 研发部 100人 地址: 194.2.3.0/25 市场部 27人 地址: 194.2.3.192/27 财务部 15人 地址:194.2.3.2 ...
- 2021.08.16 P1078 文化之旅(最短路)
2021.08.16 P1078 文化之旅(最短路) 题意: n个地,k个信仰,每个地都有自己的信仰,信仰之间会相互排斥,同信仰之间也会相互排斥,有m条路,问从s到t的最短距离是多少? 有一位使者要游 ...
- Java8 新特性,打破你对接口的认知
Java 8 之前,接口里面只能写抽象方法,不能写实现方法 Java 8 开始是可以有方法实现的,可以在接口中添加默认方法和静态方法 默认方法用 default 修饰,只能用在接口中,静态方法用 st ...
- 推荐系统 TOP K 评价指标
目录 符号说明 示例数据 一.Hit Rate 二.Recall 三.NDCG 符号说明 \(top\_k\): 当前用户预测分最高的k个items,预测分由高到低排序 $pos$: 当前用户实际点击 ...
- golang md5加密和python md5加密比较
python md5加密和golang md5加密各有不同,记录于此做备忘 Python 方法 md5 import base64 import hashlib def get_md5_data(bo ...