[[415137]]
本文转载自微信公众号「邃密码农」，作家liamwang。转载本文请关连邃密码农公众号。
早在 2019 年，我写过《用 Mapbox 画图位置数据》一文，详尽先容了我怎么通过简便的文献上传，用 Mapbox 画图约 230 万个位置点。本文先容我是怎么通过使用 gRPC 和 .NET Core 的办事器流来快速获取通盘位置历史数据的。
https://chandankkrr.medium.com/mapping-location-data-with-mapbox-9b256f64d569什么是 gRPC
gRPC 是一个当代开源的高性能 RPC 框架，不错在职何环境下脱手。它不错灵验地连结数据中心内和跨数据中心的办事，并对负载均衡、追踪、健康查验和认证提供可插拔的撑捏。gRPC 领先是由谷歌创建的，该公司使用一个名为 Stubby 的单一通用 RPC 基础门径来连结其数据中心内和跨数据中心脱手的浩瀚微办事，使用仍是跳跃十年。2015 年 3 月，谷歌决定开荒 Stubby 的下一个版块，并将其开源，恶果等于面前的 gRPC，被很多企业或组织使用。
https://grpc.io/gRPC 办事器流
办事器流式(Server Streaming)RPC，客户端向办事器发送肯求，并赢得一个流来读取一连串的音信。客户端从复返的流中读取信息，直到莫得音信阻抑。gRPC 保证在单个 RPC 调用中的信息是有序的。
rpc GetLocationData (GetLocationRequest) returns (stream GetLocationResponse);
条约缓冲区(Protobuf)gRPC 使用条约缓冲区(protocol buffers)算作接口界说言语(IDL)来界说客户端和办事器之间的契约。不才面的 proto 文献中，界说了一个 RPC 设施 GetLocations，它采用 GetLocationsRequest 音信类型并复返 GetLocationsResponse 音信类型。反映音信类型前边的 stream 重要字示意反映是流类型，而不是单个反映。
syntax = "proto3"; option csharp_namespace = "GPRCStreaming"; package location_data; service LocationData { rpc GetLocations (GetLocationsRequest) returns (stream GetLocationsResponse); } message GetLocationsRequest { int32 dataLimit = 1; } message GetLocationsResponse { int32 latitudeE7 = 1; int32 longitudeE7 = 2; }
创建 gRPC 办事
咱们不错使用 dotnet new grpc -n threemillion 高歌猖狂创建一个 .NET gRPC 办事。更多对于在 ASP.NET Core 中创建 gRPC 办事器和客户端的信息可在微软文档中找到。
Create a gRPC client and server in ASP.NET Core https://docs.microsoft.com/en-us/aspnet/core/tutorials/grpc/grpc-start?view=aspnetcore-5.0&tabs=visual-studio-code
在添加了 proto 文献并生成了 gRPC 办事资源文献后，接下来我添加了 LocationService 类。不才面的代码片断中，我有一个 LocationService 类，它秉承了从 Location.proto 文献中生成的 LocationDataBase 类型。客户端不错通过 Startup.cs 文献中 Configure 设施中的 endpoints.MapGrpcService() 来探询 LocationService。当办事器收到 GetLocations 肯求时，它滥觞通过 GetLocationData 设施调用读取 Data 文献夹中 LocationHistory.json 文献中的所极端据(未包含在源代码库)。该设施复返 RootLocation 类型，其中包含 List 类型的 Location 属性。Location 类由两个里面属性 Longitude 和 Latitude 构成。接下来，我轮回浏览每个位置，然后将它们写入 responseStream 中，复返给客户端。办事器将音信写入流中，直到客户在 GetLocationRequest 对象中指定的 dataLimit。
using System.Threading.Tasks; using Grpc.Core; using Microsoft.Extensions.Logging; using System.IO; using System; using System.Linq; namespace GPRCStreaming { public class LocationService : LocationData.LocationDataBase { private readonly FileReader _fileReader; private readonly ILogger<LocationService> _logger; public LocationService(FileReader fileReader, ILogger<LocationService> logger) { _fileReader = fileReader; _logger = logger; } public override async Task GetLocations( GetLocationsRequest request, IServerStreamWriter<GetLocationsResponse> responseStream, ServerCallContext context) { try { _logger.LogInformation("Incoming request for GetLocationData"); var locationData = await GetLocationData(); var locationDataCount = locationData.Locations.Count; var dataLimit = request.DataLimit > locationDataCount ? locationDataCount : request.DataLimit; for (var i = 0; i <= dataLimit - 1; i++) { var item = locationData.Locations[i]; await responseStream.WriteAsync(new GetLocationsResponse { LatitudeE7 = item.LatitudeE7, LongitudeE7 = item.LongitudeE7 }); } } catch (Exception exception) { _logger.LogError(exception, "Error occurred"); throw; } } private async Task<RootLocation> GetLocationData() { var currentDirectory = Directory.GetCurrentDirectory(); var filePath = $"{currentDirectory}/Data/Location_History.json"; var locationData = await _fileReader.ReadAllLinesAsync(filePath); return locationData; } } }
面前，让咱们脱手该办事并发送一个肯求。我将使用一个叫 grpcurl 的高歌行用具，它不错让你与 gRPC 办事器交互。它基本上是针对 gRPC 办事器的 curl。
https://github.com/fullstorydev/grpcurl
通过 grpcurl 与 gRPC 端点(endpoint)交互只消在 gRPC 反射办事被启用时才可用。这允许办事不错被查询，以发现办事器上的 gRPC 办事。扩张设施 MapGrpcReflectionService 需要引入 Microsoft.AspNetCore.Builder 的定名空间：
public void Configure(IApplicationBuilder app, IWebHostEnvironment env) { app.UseEndpoints(endpoints => { endpoints.MapGrpcService<LocationService>(); if (env.IsDevelopment()) { endpoints.MapGrpcReflectionService(); } endpoints.MapGet("/", async context => { await context.Response.WriteAsync("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"); }); }); }
grpcurl -plaintext -d '{"dataLimit": "100000"}' localhost:80 location_data.LocationData/GetLocations
一朝办事器收到肯求，它就会读取文献，然后在位置列表中轮回，直到达到 dataLimit 计数，并将位置数据复返给客户端。
接下来，让咱们创建一个 Blazor 客户端来调用 gRPC 办事。咱们不错使用 IServiceCollection 接口上的 AddGrpcClient 扩张设施缔造一个 gRPC 客户端：
public void ConfigureServices(IServiceCollection services) { services.AddRazorPages(); services.AddServerSideBlazor(); services.AddSingleton<WeatherForecastService>(); services.AddGrpcClient<LocationData.LocationDataClient>(client => { client.Address = new Uri("http://localhost:80"); }); }
我使用 Virtualize Blazor 组件来渲染这些位置。Virtualize 组件不是一次性渲染列表中的每个表情，只消现时可见的表情才会被渲染。
ASP.NET Core Blazor component virtualization https://docs.microsoft.com/en-us/aspnet/core/blazor/components/virtualization?view=aspnetcore-5.0
有关代码：
@page "/locationdata" @using Grpc.Core @using GPRCStreaming @using threemillion.Data @using System.Diagnostics @using Microsoft.AspNetCore.Components.Web.Virtualization @inject IJSRuntime JSRuntime; @inject System.Net.Http.IHttpClientFactory _clientFactory @inject GPRCStreaming.LocationData.LocationDataClient _locationDataClient <table class="tableAction"> <tbody> <tr> <td> <div class="data-input"> <label for="dataLimit">No of records to fetch</label> <input id="dataLimit" type="number" @bind="_dataLimit" /> <button @onclick="FetchData" class="btn-submit">Call gRPC</button> </div> </td> <td> <p class="info"> Total records: <span class="count">@_locations.Count</span> </p> <p class="info"> Time taken: <span class="time">@_stopWatch.ElapsedMilliseconds</span> milliseconds </p> </td> </tr> </tbody> </table> <div class="tableFixHead"> <table class="table"> <thead> <tr> <th>Longitude</th> <th>Latitude</th> </tr> </thead> <tbody> <Virtualize Items="@_locations" Context="locations"> <tr> <td>@locations.LongitudeE7</td> <td>@locations.LatitudeE7</td> </tr> </Virtualize> </tbody> </table> </div> @code { private int _dataLimit = 1000; private List<Location> _locations = new List<Location>(); private Stopwatch _stopWatch = new Stopwatch(); protected override async Task OnInitializedAsync() { await FetchData(); } private async Task FetchData() { ResetState(); _stopWatch.Start(); using (var call = _locationDataClient.GetLocations(new GetLocationsRequest { DataLimit = _dataLimit })) { await foreach (var response in call.ResponseStream.ReadAllAsync()) { _locations.Add(new Location { LongitudeE7 = response.LongitudeE7, LatitudeE7 = response.LatitudeE7 }); StateHasChanged(); } } _stopWatch.Stop(); } private void ResetState() { _locations.Clear(); _stopWatch.Reset(); StateHasChanged(); } }
通过在土产货脱手的流调用，从 gRPC 办事器采用 2,876,679 个单独的反映轻便需要 8 秒钟。让咱们也在 Mapbox 中加载数据：
@page "/mapbox" @using Grpc.Core @using GPRCStreaming @using System.Diagnostics @inject IJSRuntime JSRuntime; @inject System.Net.Http.IHttpClientFactory _clientFactory @inject GPRCStreaming.LocationData.LocationDataClient LocationDataClient <table class="tableAction"> <tbody> <tr> <td> <div class="data-input"> <label for="dataLimit">No of records to fetch</label> <input id="dataLimit" type="number" @bind="_dataLimit" /> <button @onclick="LoadMap" class="btn-submit">Load data</button> </div> </td> <td> <p class="info"> Total records: <span class="count">@_locations.Count</span> </p> <p class="info"> Time taken: <span class="time">@_stopWatch.ElapsedMilliseconds</span> milliseconds </p> </td> </tr> </tbody> </table> <div id='map' style="width: 100%; height: 90vh;"></div> @code { private int _dataLimit = 100; private List<object> _locations = new List<object>(); private Stopwatch _stopWatch = new Stopwatch(); protected override async Task OnAfterRenderAsync(bool firstRender) { if (!firstRender) { return; } await JSRuntime.InvokeVoidAsync("mapBoxFunctions.initMapBox"); } private async Task LoadMap() { ResetState(); _stopWatch.Start(); using (var call = LocationDataClient.GetLocations(new GetLocationsRequest { DataLimit = _dataLimit })) { await foreach (var response in call.ResponseStream.ReadAllAsync()) { var pow = Math.Pow(10, 7); var longitude = response.LongitudeE7 / pow; var latitude = response.LatitudeE7 / pow; _locations.Add(new { type = "Feature", geometry = new { type = "Point", coordinates = new double[] { longitude, latitude } } }); StateHasChanged(); } _stopWatch.Stop(); await JSRuntime.InvokeVoidAsync("mapBoxFunctions.addClusterData", _locations); } } private void ResetState() { JSRuntime.InvokeVoidAsync("mapBoxFunctions.clearClusterData"); _locations.Clear(); _stopWatch.Reset(); StateHasChanged(); } }
源代码在我的 GitHub 上 ：
https://github.com/Chandankkrr/threemillion
