0

0

c# 使用 gRPC-Web 和 Blazor 构建高并发前端应用

幻夢星雲

幻夢星雲

发布时间:2026-01-17 04:37:31

|

543人浏览过

|

来源于php中文网

原创

能,Blazor WebAssembly 可通过 Grpc.Net.Client.Web + HttpClient 调用 gRPC-Web,需服务端启用 MapGrpcWeb 和 EnableGrpcWeb,客户端复用单例 WebGrpcChannel 并禁用压缩。

c# 使用 grpc-web 和 blazor 构建高并发前端应用

Blazor WebAssembly 能直接调用 gRPC-Web 吗?

能,但必须用 Grpc.Net.Client.Web + HttpClient 包装器,原生 GrpcChannel 不支持浏览器环境。Blazor Server 模式下反而不能用 gRPC-Web(它走 SignalR,gRPC-Web 是 HTTP/1.1 + base64 编码的二进制流),这点容易混淆。

关键点:

  • 只在 Blazor WebAssembly 项目中启用 gRPC-Web,且服务端必须启用 MapGrpcWeb
  • 客户端需注册 WebGrpcChannel,不是 GrpcChannel.ForAddress
  • 务必引用 Grpc.Net.Client.Web 2.49.0+(旧版对 WASM 的 streaming 支持不稳)

服务端如何正确暴露 gRPC-Web 接口?

ASP.NET Core 6+ 默认不启用 gRPC-Web,即使你加了 AddGrpc 也不行。必须显式配置中间件和终结点映射。

常见错误是只配了 app.MapGrpcService() 却没加 .EnableGrpcWeb(),导致前端415 Unsupported Media Type 或空响应。

立即学习前端免费学习笔记(深入)”;

服务端 Program.cs 关键片段:

var builder = WebApplication.CreateBuilder(args);
builder.Services.AddGrpc();
builder.Services.AddGrpcWeb(); // ← 必须加这一行

var app = builder.Build();
app.UseGrpcWeb(); // ← 必须加这一行,且要在 UseRouting() 之后、UseEndpoints() 之前

app.MapGrpcService().EnableGrpcWeb(); // ← EnableGrpcWeb() 不能少
app.MapFallbackToFile("index.html");

注意:如果用了 CORS,WithOrigins 必须包含 Blazor WASM 的实际部署地址(如 https://app.example.com),不能写 "*" —— gRPC-Web 的 preflight 请求会失败。

mallcloud商城
mallcloud商城

mallcloud商城基于SpringBoot2.x、SpringCloud和SpringCloudAlibaba并采用前后端分离vue的企业级微服务敏捷开发系统架构。并引入组件化的思想实现高内聚低耦合,项目代码简洁注释丰富上手容易,适合学习和企业中使用。真正实现了基于RBAC、jwt和oauth2的无状态统一权限认证的解决方案,面向互联网设计同时适合B端和C端用户,支持CI/CD多环境部署,并提

下载

WASM 客户端调用时为什么 Streaming 总卡住或报错?

Blazor WebAssembly 的 HttpClient 底层基于 Fetch API,而 Fetch 对 server-sent events(SSE)和流式 gRPC-Web 响应支持有限。默认行为是等整个响应体收完才触发回调,导致 AsyncStreamReader 无法实时读取。

解决方法只有两个:

  • 服务端改用 CallOptions 设置 DeadlineMaxReceiveMessageSize,避免超长流阻塞
  • 客户端必须用 WebChannelCredentials.None(gRPC-Web 不支持 TLS 双向认证),且禁用压缩:new GrpcChannelOptions { HttpHandler = new GrpcWebHandler(GrpcWebMode.GrpcWebText, new HttpClientHandler()) }
  • 流式方法返回类型必须是 IAsyncEnumerable,不能用 Task 混用

典型错误日志:System.InvalidOperationException: The gRPC call was cancelled —— 多半是流未及时消费或浏览器主动中断连接。

高并发下如何避免 Blazor WASM 端内存暴涨?

每个 gRPC-Web 调用都会创建独立的 GrpcChannel 实例(尤其在组件内 new 出来时),而 WASM 的 GC 不会立即回收大块二进制 buffer,连续发起 50+ 并发流请求极易触发 OOM。

实操建议:

  • 全局单例复用 GrpcChannel:在 Program.cs 中注册为 Singleton,注入到组件中使用
  • 流式调用务必手动 DisposeAsync() 或用 using await,否则底层 HttpClient 连接不会释放
  • 避免在 @onclick 中直接启动长生命周期流;改用状态标记 + CancellationTokenSource 控制启停
  • 服务端开启 KeepAliveHttp2KeepAlivePingInterval)可减少连接重建开销,但 WASM 端无法控制该参数,只能靠服务端优化

真正棘手的是 WASM 的线程模型 —— 所有 gRPC 回调都在 UI 线程执行,大量并发响应会阻塞渲染。这不是 gRPC 本身的问题,而是 Blazor 渲染调度机制决定的。能做的只有节流、分页、降采样,别指望纯前端扛住上千并发流。

相关专题

更多
什么是中间件
什么是中间件

中间件是一种软件组件,充当不兼容组件之间的桥梁,提供额外服务,例如集成异构系统、提供常用服务、提高应用程序性能,以及简化应用程序开发。想了解更多中间件的相关内容,可以阅读本专题下面的文章。

178

2024.05.11

Golang 中间件开发与微服务架构
Golang 中间件开发与微服务架构

本专题系统讲解 Golang 在微服务架构中的中间件开发,包括日志处理、限流与熔断、认证与授权、服务监控、API 网关设计等常见中间件功能的实现。通过实战项目,帮助开发者理解如何使用 Go 编写高效、可扩展的中间件组件,并在微服务环境中进行灵活部署与管理。

212

2025.12.18

硬盘接口类型介绍
硬盘接口类型介绍

硬盘接口类型有IDE、SATA、SCSI、Fibre Channel、USB、eSATA、mSATA、PCIe等等。详细介绍:1、IDE接口是一种并行接口,主要用于连接硬盘和光驱等设备,它主要有两种类型:ATA和ATAPI,IDE接口已经逐渐被SATA接口;2、SATA接口是一种串行接口,相较于IDE接口,它具有更高的传输速度、更低的功耗和更小的体积;3、SCSI接口等等。

1020

2023.10.19

PHP接口编写教程
PHP接口编写教程

本专题整合了PHP接口编写教程,阅读专题下面的文章了解更多详细内容。

64

2025.10.17

php8.4实现接口限流的教程
php8.4实现接口限流的教程

PHP8.4本身不内置限流功能,需借助Redis(令牌桶)或Swoole(漏桶)实现;文件锁因I/O瓶颈、无跨机共享、秒级精度等缺陷不适用高并发场景。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

414

2025.12.29

线程和进程的区别
线程和进程的区别

线程和进程的区别:线程是进程的一部分,用于实现并发和并行操作,而线程共享进程的资源,通信更方便快捷,切换开销较小。本专题为大家提供线程和进程区别相关的各种文章、以及下载和课程。

480

2023.08.10

http500解决方法
http500解决方法

http500解决方法有检查服务器日志、检查代码错误、检查服务器配置、检查文件和目录权限、检查资源不足、更新软件版本、重启服务器或寻求专业帮助等。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

347

2023.11.09

http请求415错误怎么解决
http请求415错误怎么解决

解决方法:1、检查请求头中的Content-Type;2、检查请求体中的数据格式;3、使用适当的编码格式;4、使用适当的请求方法;5、检查服务器端的支持情况。更多http请求415错误怎么解决的相关内容,可以阅读下面的文章。

408

2023.11.14

高德地图升级方法汇总
高德地图升级方法汇总

本专题整合了高德地图升级相关教程,阅读专题下面的文章了解更多详细内容。

9

2026.01.16

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

相关下载

更多

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Bootstrap 5教程
Bootstrap 5教程

共46课时 | 2.9万人学习

AngularJS教程
AngularJS教程

共24课时 | 2.7万人学习

CSS教程
CSS教程

共754课时 | 19.4万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号