前端JS/TS 调用 ASP.NET Core gRPC-Web

发布网友 发布时间：2024-10-22 04:10

我来回答

共1个回答

热心网友 时间：2024-11-06 03:48

在前端JS/TS调用ASP.NET Core gRPC-Web，实际上利用的是gRPC-Web项目提供的功能，该功能旨在为JavaScript/TypeScript提供gRPC能力，使得不支持HTTP/2的客户端和服务端也能使用gRPC的大部分特性。gRPC-Web项目提供了一个protoc CLI插件，能够将proto协议文件转换为JavaScript/TypeScript语言可导入的对应gRPC服务的客户端，并且生成了.d.ts文件以支持TypeScript。

举例来说，通过Visual Studio自带的ASP.NET Core + Angular模板创建项目，将原来的WebAPI调用转换为gRPC-Web调用。首先，确保安装最新的.NET Core SDK和Visual Studio 2019，打开Visual Studio 2019，创建新项目-选择"ASP.NET Core Web应用程序"，填写项目名，选择"Angular"项目模板。

接着，添加gRPC proto文件，创建项目中Protos目录，并在其中建立weather.proto文件。在该文件中，导入了官方库的其他proto文件，对于.NET Core项目，可以引用Google.Protobuf包。

在服务端，修改代码以提供gRPC-Web服务。首先，添加NuGet配置文件以添加临时包管理源以获得nightly预览。在解决方案根目录下添加NuGet.config文件，再添加必要的NuGet包引用。在WeatherForecastController中修改为WeatherForecastService，然后在Startup.cs文件中调整ConfigureServices，添加以下行以处理将传入的gRPC-web请求映射到服务端。在UseEndpoints块中注册gRPC-Web服务类，并确保正确处理请求。

在Angular项目的ClientApp目录中，通过proto文件生成所需的js文件。运行命令以安装npm包，然后生成js文件。在ClientApp目录下创建proto目录，并运行命令以生成文件。在fetch-data页面组件中引用生成的文件，创建WeatherForecastsClient以调用gRPC-Web服务端。最后，运行项目，访问https://localhost:5001/fetch-data，即可看到前端通过gRPC-Web获取数据。

总结来看，前端JS/TS调用ASP.NET Core gRPC-Web虽然在开发工具上可能不如Blazor WebAssembly方便，但是从proto生成客户端后，前端的TypeScript代码可以直接获得强类型的调用方法和路由，实现简单地获得gRPC带来的优势。同时，gRPC-Web项目已经GA，可以先在后端使用其gRPC代理，前端则可以放心在生产项目中使用。等到ASP.NET Core正式支持gRPC-Web后，就不需要代理了，相比其他平台和语言，具有明显优势。

热心网友 时间：2024-11-06 03:49

在前端JS/TS调用ASP.NET Core gRPC-Web，实际上利用的是gRPC-Web项目提供的功能，该功能旨在为JavaScript/TypeScript提供gRPC能力，使得不支持HTTP/2的客户端和服务端也能使用gRPC的大部分特性。gRPC-Web项目提供了一个protoc CLI插件，能够将proto协议文件转换为JavaScript/TypeScript语言可导入的对应gRPC服务的客户端，并且生成了.d.ts文件以支持TypeScript。

举例来说，通过Visual Studio自带的ASP.NET Core + Angular模板创建项目，将原来的WebAPI调用转换为gRPC-Web调用。首先，确保安装最新的.NET Core SDK和Visual Studio 2019，打开Visual Studio 2019，创建新项目-选择"ASP.NET Core Web应用程序"，填写项目名，选择"Angular"项目模板。

接着，添加gRPC proto文件，创建项目中Protos目录，并在其中建立weather.proto文件。在该文件中，导入了官方库的其他proto文件，对于.NET Core项目，可以引用Google.Protobuf包。

在服务端，修改代码以提供gRPC-Web服务。首先，添加NuGet配置文件以添加临时包管理源以获得nightly预览。在解决方案根目录下添加NuGet.config文件，再添加必要的NuGet包引用。在WeatherForecastController中修改为WeatherForecastService，然后在Startup.cs文件中调整ConfigureServices，添加以下行以处理将传入的gRPC-web请求映射到服务端。在UseEndpoints块中注册gRPC-Web服务类，并确保正确处理请求。

在Angular项目的ClientApp目录中，通过proto文件生成所需的js文件。运行命令以安装npm包，然后生成js文件。在ClientApp目录下创建proto目录，并运行命令以生成文件。在fetch-data页面组件中引用生成的文件，创建WeatherForecastsClient以调用gRPC-Web服务端。最后，运行项目，访问https://localhost:5001/fetch-data，即可看到前端通过gRPC-Web获取数据。

总结来看，前端JS/TS调用ASP.NET Core gRPC-Web虽然在开发工具上可能不如Blazor WebAssembly方便，但是从proto生成客户端后，前端的TypeScript代码可以直接获得强类型的调用方法和路由，实现简单地获得gRPC带来的优势。同时，gRPC-Web项目已经GA，可以先在后端使用其gRPC代理，前端则可以放心在生产项目中使用。等到ASP.NET Core正式支持gRPC-Web后，就不需要代理了，相比其他平台和语言，具有明显优势。