前言
在上兩篇文章中，介紹了ASP.NET Core 中的 gRPC-Web 實現 和 在 Blazor WebAssembly 中使用 gRPC-Web，實現了 Blazor WebAssembly 調用 ASP.NET Core gRPC-Web。雖然 ASP.NET Core 中的 gRPC-Web 實現目前還是試驗性項目，但是鑒於它在生態上的重大意義，說不定我們很快就能在正式版本中使用。
雖然 Blazor WebAssembly 現在已經是 .NET 進軍前端的大熱門，但有同學說，只介紹了 Blazor WebAssembly 的調用方法還不夠呀，現在比較常用的還是 JS/TS 前端，那么本篇，我就介紹一下在前端 JS/TS 中調用 ASP.NET Core gRPC-Web。
其實 gRPC-Web 項目本身，就是為 JS/TS 提供 gRPC 能力的，讓不支持 HTTP/2 的客戶端和服務端也能使用 gRPC 的大部分特性。gRPC-Web 項目提供了一個 protoc CLI 插件，可用於把 proto 協議文件轉換為 JS/TS 語言可導入的對應 gRPC 服務的客戶端，還生成了 .d.ts 文件來支持 Typescript。
示例
接下來，我就來展示一下，用 Visual Studio 自帶的 ASP.NET Core + Angular 模板創建的項目，把原來的 WebApi 調用改造成 gRPC-Web 調用。
本示例基於 .NET Core 3.1，請安裝好最新的 .NET Core SDK 和 Visual Studio 2019。
創建項目
打開 Visual Studio 2019，創建新項目 -> 選擇"ASP.NET Core Web 應用程序" -> 填寫項目名 -> 選擇 "Angular" 項目模板。如圖：
我們就是用這個項目，把 fetch-data 頁面獲取數據的方式修改為 gRPC-Web 。
添加 gRPC proto 文件
在項目中新建一個目錄 Protos，創建文件 weather.proto :
syntax = "proto3";
import "google/protobuf/empty.proto";
import "google/protobuf/timestamp.proto";
option csharp_namespace = "AspNetCoreGrpcWeb";
package WeatherForecast;
service WeatherForecasts {
rpc GetWeather (google.protobuf.Empty) returns (WeatherReply);
}
message WeatherReply {
repeated WeatherForecast forecasts = 1;
}
message WeatherForecast {
google.protobuf.Timestamp dateTimeStamp = 1;
int32 temperatureC = 2;
int32 TemperatureF = 3;
string summary = 4;
}
可以看到 proto 中導入了官方庫的其他 proto 文件，它們是編譯用的輔助文件。對於.NET Core 項目，可以通過引用 Google.Protobuf 這個包引入。
修改 ASP.NET Core 服務端
我們先修改服務端，讓 ASP.NET Core 提供 gRPC-Web 服務。
由於 gRPC-Web 包還沒有發布到 NuGet.org，現在你需要添加一個臨時的包管理源來獲得 nightly 預覽。在你的解決方案的根目錄下添加NuGet.config文件：
<?xml version="1.0" encoding="utf-8"?>
<configuration>
<packageSources>
<!--To inherit the global NuGet package sources remove the <clear/> line below -->
<clear />
<add key="nuget" value="https://api.nuget.org/v3/index.json" />
<add key="gRPC-nightly" value="https://grpc.jfrog.io/grpc/api/nuget/v3/grpc-nuget-dev" />
</packageSources>
</configuration>
再添加必要的 Nuget 包引用：
<PackageReference Include="Grpc.AspNetCore" Version="2.27.0-dev202001100801" />
<PackageReference Include="Grpc.AspNetCore.Web" Version="2.27.0-dev202001100801" />
接着，修改原來的 WeatherForecastController 改為 WeatherForecastService:
public class WeatherForecastsService : WeatherForecasts.WeatherForecastsBase
{
private static readonly string[] Summaries = {
"Freezing", "Bracing", "Chilly", "Cool", "Mild", "Warm", "Balmy", "Hot", "Sweltering", "Scorching"
};
public override Task<WeatherReply> GetWeather(Empty request, ServerCallContext context)
{
var reply = new WeatherReply();
var rng = new Random();
reply.Forecasts.Add(Enumerable.Range(1, 5).Select(index =>
{
var temperatureC = rng.Next(-20, 55);
return new WeatherForecast
{
DateTimeStamp = Timestamp.FromDateTime(DateTime.UtcNow.AddDays(index)),
TemperatureC = temperatureC,
TemperatureF = 32 + (int)(temperatureC / 0.5556),
Summary = Summaries[rng.Next(Summaries.Length)]
};
}));
return Task.FromResult(reply);
}
}
現在，在你的服務器的 Startup.cs 文件中，修改 ConfigureServices 以添加以下行:
services.AddGrpc();
注意:如果你只打算公開 gRPC 服務，你可能不再需要 MVC 控制器，在這種情況下，你可以從下面刪除services.AddMvc() 和 endpoints.MapDefaultControllerRoute()。
只是在 app.AddRouting(); 的下面添加以下內容，它會處理將傳入的 gRPC-web 請求映射到服務端，使其看起來像 gRPC 請求:
app.UseGrpcWeb();
最后，在app.UseEndpoints語句塊中注冊你的 gRPC-Web 服務類，並在該語句塊的頂部使用以下代碼行:
endpoints.MapGrpcService<WeatherForecastsService>().EnableGrpcWeb();
就這樣，你的 gRPC-Web 服務端已經准備好了!
修改 Angular 項目
項目的 ClientApp 目錄中，就是 Angular 的項目文件，使用 ASP.NET Core 托管，是這個項目模板約定的。
我們需要先通過 proto 生成需要的 js 文件。
安裝 npm 包
運行命令：
npm i protoc google-protobuf ts-protoc-gen @improbable-eng/grpc-web -s
生成 js 文件
在 ClientApp 目錄下創建目錄 proto ，再運行命令：
./node_modules/protoc/protoc/bin/protoc --plugin="protoc-gen-ts=.\node_modules\.bin\protoc-gen-ts.cmd" --js_out="import_style=commonjs,binary:./../Protos" --ts_out="service=grpc-web:src/app/proto" -I ./../Protos ../Protos/*.proto
可以在proto目錄中看到生成了 4 個文件（每個 proto 會生成 4 個）
weather_pb_service.js: 包含了 rpc 調用客戶端WeatherForecastsClient。weather_pb.js: 包含了傳輸對象WeatherForecast。這個文件在原 proto 的目錄下，需要手動移過來。- 兩個
*.d.ts文件是對應以上兩個文件的類型描述，用於 TS。
修改 fetch-data 頁面組件
接下來，需要引用生成的文件，創建一個 WeatherForecastsClient 來調用 gRPC-Web 服務端。
-
fetch-data.component.ts
import { Component } from '@angular/core'; import { WeatherForecast } from '../proto/weather_pb'; import { WeatherForecastsClient } from '../proto/weather_pb_service'; import { Empty } from 'google-protobuf/google/protobuf/empty_pb'; @Component({ selector: 'app-fetch-data', templateUrl: './fetch-data.component.html', }) export class FetchDataComponent { public forecasts: WeatherForecast[]; private client: WeatherForecastsClient; constructor() { this.client = new WeatherForecastsClient('https://localhost:5001'); this.client.getWeather(new Empty(), (error, reply) => { if (error) { console.error(error); } this.forecasts = reply.getForecastsList(); }); } } -
fetch-data.component.html
<h1 id="tableLabel">Weather forecast</h1> <p>This component demonstrates fetching data from the server.</p> <p *ngIf="!forecasts"><em>Loading...</em></p> <table class="table table-striped" aria-labelledby="tableLabel" *ngIf="forecasts"> <thead> <tr> <th>Date</th> <th>Temp. (C)</th> <th>Temp. (F)</th> <th>Summary</th> </tr> </thead> <tbody> <tr *ngFor="let forecast of forecasts"> <td>{{ forecast.getDatetimestamp().toDate() }}</td> <td>{{ forecast.getTemperaturec() }}</td> <td>{{ forecast.getTemperaturef() }}</td> <td>{{ forecast.getSummary() }}</td> </tr> </tbody> </table>
可以看到：
- 創建
WeatherForecastsClient對象需要傳入服務端的 HostName，要注意不要用/后綴。 - 生成出來的
WeatherForecast類型包含getter/setter, 而WeatherForecast.AsObject類才是值對象，可以直接訪問屬性值，需要調用.toObject()方法進行轉換。 datetimestamp屬性的類型proto.google.protobuf.Timestamp是 protobuf 里的關鍵字，調用toDate()方法可轉換為 TS 的Date類型。
運行項目
完事具備，我們可以運行項目了。訪問 https://localhost:5001/fetch-data，就可以看到前端是通過 gRPC-Web 獲取數據了。
總結
可以看出，要在前端 JS/TS 使用 gRPC-Web 雖然在開發工具上沒有 Blazor WebAssembly 方便，但是從 proto 生成客戶端之后，前端的 TS 代碼就能直接獲得強類型的調用方法和路由，很簡單地得到 gRPC 帶來的好處。另外，gRPC-Web 項目本身已經 GA，所以我們可以先在后端使用它的 gRPC 代理，而前端可以放心大膽地在我們的生產項目中使用它。等到 ASP.NET Core 正式支持 gRPC-Web 后，就可以不需要代理了，比其他平台和語言都更有優勢。
本示例的源碼已發布到 Github：https://github.com/ElderJames/AspNetCoreGrpcWeb