时间戳

首页 > 解决方案 > 带有 Angular 2.0 和 asp.net core(webpack) 和 Typescript 的 Protobuf

angular - 带有 Angular 2.0 和 asp.net core(webpack) 和 Typescript 的 Protobuf

问题描述

protobuf.js 版本：“protobufjs”：“6.8.8”，

我是 protobufjs 的新手，并计划在 Angular 2 项目中实现 protobufjs。我已经使用 Angular 2 项目（VS2015）中的“npm install protobufjs --save”安装了 protobufjs。

我有下面的服务，它将 http 请求发送到带有 Content-Type: application/x-protobuf 的 Restful 服务并以 protobuf 格式获取响应

getpersondetails(): Observable {
var headers = new Headers();
headers.append('Content-Type', 'application/x-protobuf');
return this.http.get('/system/data/getpersondetails', { headers });
}

获取如下示例响应，↵*����Alex"(�0�↵&����Du���2355"

如何解码对以下模型对象的响应

//PerosnDetails.ts
export class PersonDetails
{
firstname:string;
lastname:string;
salary: number;
}

有人可以通过为 Angular 2 和 typescript 中的 Get 请求提供一些带有描述性步骤的示例来帮助我。

非常感谢任何帮助。

标签： angulartypescriptprotobuf.js

解决方案

您想要原始（二进制）响应，因此您必须设置选项responseType: "arraybuffer"：

http.get('/system/data/getpersondetails', { 
  headers,
  responseType: "arraybuffer"
});

然后您可以从数组缓冲区反序列化您的消息：

let details = PersonDetails.deserializeBinary(yourArrayBuffer);

但我推荐使用 gRPC-web 或 Twirp 有两个原因：

  1. 您可以在 .proto 中使用service声明，并且可以为您生成客户端
  2. 你有一些 URL 映射和错误处理的标准

同样重要的是：google-protobuf 有很多替代品。例如 ts-proto。或者protobuf-ts（这是一个不要脸的插件，我是作者）。它支持 Angular。

推荐阅读