前言

在上兩篇文章中，介紹了ASP.NET Core 中的 gRPC-Web 實現(xiàn) 和 在 Blazor WebAssembly 中使用 gRPC-Web，實現(xiàn)了 Blazor WebAssembly 調(diào)用 ASP.NET Core gRPC-Web。雖然 ASP.NET Core 中的 gRPC-Web 實現(xiàn)目前還是試驗性項目，但是鑒于它在生態(tài)上的重大意義，說不定我們很快就能在正式版本中使用。

雖然 Blazor WebAssembly 現(xiàn)在已經(jīng)是 .NET 進軍前端的大熱門，但有同學說，只介紹了 Blazor WebAssembly 的調(diào)用方法還不夠呀，現(xiàn)在比較常用的還是 JS/TS 前端，那么本篇，我就介紹一下在前端 JS/TS 中調(diào)用 ASP.NET Core gRPC-Web。

其實 gRPC-Web 項目本身，就是為 JS/TS 提供 gRPC 能力的，讓不支持 HTTP/2 的客戶端和服務端也能使用 gRPC 的大部分特性。gRPC-Web 項目提供了一個 protoc CLI 插件，可用于把 proto 協(xié)議文件轉(zhuǎn)換為 JS/TS 語言可導入的對應 gRPC 服務的客戶端，還生成了 .d.ts 文件來支持 Typescript。

示例

接下來，我就來展示一下，用 Visual Studio 自帶的 ASP.NET Core + Angular 模板創(chuàng)建的項目，把原來的 WebApi 調(diào)用改造成 gRPC-Web 調(diào)用。

本示例基于 .NET Core 3.1，請安裝好最新的 .NET Core SDK 和 Visual Studio 2019。

創(chuàng)建項目

打開 Visual Studio 2019，創(chuàng)建新項目 -> 選擇"ASP.NET Core Web 應用程序" -> 填寫項目名 -> 選擇 "Angular" 項目模板。如圖：

我們就是用這個項目，把 fetch-data 頁面獲取數(shù)據(jù)的方式修改為 gRPC-Web 。

添加 gRPC proto 文件

在項目中新建一個目錄 Protos，創(chuàng)建文件 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 包還沒有發(fā)布到 NuGet.org，現(xiàn)在你需要添加一個臨時的包管理源來獲得 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);}}

現(xiàn)在，在你的服務器的 Startup.cs 文件中，修改 ConfigureServices 以添加以下行:

services.AddGrpc();

注意:如果你只打算公開 gRPC 服務，你可能不再需要 MVC 控制器，在這種情況下，你可以從下面刪除services.AddMvc() 和 endpoints.MapDefaultControllerRoute()。

只是在 app.AddRouting(); 的下面添加以下內(nèi)容，它會處理將傳入的 gRPC-web 請求映射到服務端，使其看起來像 gRPC 請求:

app.UseGrpcWeb();

最后，在app.UseEndpoints語句塊中注冊你的 gRPC-Web 服務類，并在該語句塊的頂部使用以下代碼行:

endpoints.MapGrpcService<WeatherForecastsService>().EnableGrpcWeb();

就這樣，你的 gRPC-Web 服務端已經(jīng)準備好了!

修改 Angular 項目

項目的 ClientApp 目錄中，就是 Angular 的項目文件，使用 ASP.NET Core 托管，是這個項目模板約定的。

我們需要先通過 proto 生成需要的 js 文件。

安裝 npm 包

運行命令：

npm i protoc google-protobuf ts-protoc-gen @improbable-eng/grpc-web -s

生成 js 文件

在 ClientApp 目錄下創(chuàng)建目錄 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 調(diào)用客戶端 WeatherForecastsClient。

• weather_pb.js: 包含了傳輸對象 WeatherForecast。這個文件在原 proto 的目錄下，需要手動移過來。

• 兩個 *.d.ts 文件是對應以上兩個文件的類型描述，用于 TS。

修改 fetch-data 頁面組件

接下來，需要引用生成的文件，創(chuàng)建一個 WeatherForecastsClient 來調(diào)用 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>

可以看到：

• 創(chuàng)建 WeatherForecastsClient 對象需要傳入服務端的 HostName，要注意不要用 /后綴。

• 生成出來的 WeatherForecast 類型包含getter/setter, 而 WeatherForecast.AsObject 類才是值對象，可以直接訪問屬性值，需要調(diào)用 .toObject() 方法進行轉(zhuǎn)換。

• datetimestamp 屬性的類型 proto.google.protobuf.Timestamp 是 protobuf 里的關(guān)鍵字，調(diào)用 toDate() 方法可轉(zhuǎn)換為 TS 的 Date 類型。

運行項目

完事具備，我們可以運行項目了。訪問 https://localhost:5001/fetch-data，就可以看到前端是通過 gRPC-Web 獲取數(shù)據(jù)了。

總結(jié)

可以看出，要在前端 JS/TS 使用 gRPC-Web 雖然在開發(fā)工具上沒有 Blazor WebAssembly 方便，但是從 proto 生成客戶端之后，前端的 TS 代碼就能直接獲得強類型的調(diào)用方法和路由，很簡單地得到 gRPC 帶來的好處。另外，gRPC-Web 項目本身已經(jīng) GA，所以我們可以先在后端使用它的 gRPC 代理，而前端可以放心大膽地在我們的生產(chǎn)項目中使用它。等到 ASP.NET Core 正式支持 gRPC-Web 后，就可以不需要代理了，比其他平臺和語言都更有優(yōu)勢。

本示例的源碼已發(fā)布到 Github：https://github.com/ElderJames/AspNetCoreGrpcWeb

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎勵來咯，堅持創(chuàng)作打卡瓜分現(xiàn)金大獎

總結(jié)

以上是生活随笔為你收集整理的前端 JS/TS 调用 ASP.NET Core gRPC-Web的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。