问题概述
我正在学习如何使用 gRPC，并想尝试进行客户端-服务器连接。服务器（使用 Elixir 编写）已经能够工作，但是由于我主要是后端开发人员，在 Angular 中实现它遇到了很多麻烦，我希望能得到一些帮助。
我正在使用 Angular 8.2.9、Angular CLI 8.3.8 和 Node 10.16.0 进行这个项目。
我已经完成了什么？
- 用
ng new test-grpc命令创建了一个新的 Angular CLI 项目。 - 使用
ng g...命令生成了一个模块和一个组件，并修改基本路由以使页面和 URL 可以正常工作。 - 安装了 Protobuf 和 gRPC 库
npm install @improbable-eng/grpc-web @types/google-protobuf google-protobuf grpc-web-client protoc ts-protoc-gen --save - 将我的 Elixir 代码中的
.proto文件复制到了src/proto文件夹中。 - 在 package.json 的
scripts中添加了一个protoc命令："protoc": "protoc --plugin=protoc-gen-ts=./node_modules/.bin/protoc-gen-ts.cmd --js_out=import_style=commonjs,binary:src/app/proto-gen --ts_out=service=true:src/app/proto-ts -I ./src/proto/ ./src/proto/*.proto" - 调用命令生成在
src/app/proto-ts和src/app/proto-js中找到的 js 和 ts 文件。 - 替换了生成文件名称中的任何
_为-。 - 然后我尝试在 ngOnInit 中添加以下代码：https://github.com/improbable-eng/grpc-web/tree/master/client/grpc-web#usage-overview 如下所示：
const getBookRequest = new GetBookRequest();
getBookRequest.setIsbn(60929871);
grpc.unary(BookService.GetBook, {
request: getBookRequest,
host: host,
onEnd: res => {
const { status, statusMessage, headers, message, trailers } = res;
if (status === grpc.Code.OK && message) {
console.log("all ok. got book: ", message.toObject());
}
}
});
我尝试过：
- 在构造函数参数中创建请求。
- 找到如何添加typescript文件（我只能找到在angular项目中添加javascript文件的方法，而生成的javascript比typescript更重，没有任何解释）。
- 理解jspb.Message是什么（我仍然不知道，但我认为它与此文件相关：https://github.com/protocolbuffers/protobuf/blob/master/js/message.js）。
- 尝试查找有关如何在angular应用程序中实现rGPD的教程（404未找到）。
.proto文件、生成的两个typescript文件和尝试使用它们的组件
.proto文件（）：
// src/proto/user.proto
syntax = "proto3";
service UserService {
rpc ListUsers (ListUsersRequest) returns (ListUsersReply);
}
message ListUsersRequest {
string message = 1;
}
message ListUsersReply {
repeated User users = 1;
}
message User {
int32 id = 1;
string firstname = 2;
}
Typescript 生成的代码（2个文件）：
// src/app/proto-ts/user-pb.d.ts
import * as jspb from "google-protobuf";
export class ListUsersRequest extends jspb.Message {
getMessage(): string;
setMessage(value: string): void;
serializeBinary(): Uint8Array;
toObject(includeInstance?: boolean): ListUsersRequest.AsObject;
static toObject(includeInstance: boolean, msg: ListUsersRequest): ListUsersRequest.AsObject;
static extensions: {[key: number]: jspb.ExtensionFieldInfo<jspb.Message>};
static extensionsBinary: {[key: number]: jspb.ExtensionFieldBinaryInfo<jspb.Message>};
static serializeBinaryToWriter(message: ListUsersRequest, writer: jspb.BinaryWriter): void;
static deserializeBinary(bytes: Uint8Array): ListUsersRequest;
static deserializeBinaryFromReader(message: ListUsersRequest, reader: jspb.BinaryReader): ListUsersRequest;
}
export namespace ListUsersRequest {
export type AsObject = {
message: string,
}
}
export class ListUsersReply extends jspb.Message {
clearUsersList(): void;
getUsersList(): Array<User>;
setUsersList(value: Array<User>): void;
addUsers(value?: User, index?: number): User;
serializeBinary(): Uint8Array;
toObject(includeInstance?: boolean): ListUsersReply.AsObject;
static toObject(includeInstance: boolean, msg: ListUsersReply): ListUsersReply.AsObject;
static extensions: {[key: number]: jspb.ExtensionFieldInfo<jspb.Message>};
static extensionsBinary: {[key: number]: jspb.ExtensionFieldBinaryInfo<jspb.Message>};
static serializeBinaryToWriter(message: ListUsersReply, writer: jspb.BinaryWriter): void;
static deserializeBinary(bytes: Uint8Array): ListUsersReply;
static deserializeBinaryFromReader(message: ListUsersReply, reader: jspb.BinaryReader): ListUsersReply;
}
export namespace ListUsersReply {
export type AsObject = {
usersList: Array<User.AsObject>,
}
}
export namespace User {
export type AsObject = {
id: number,
firstname: string,
}
}
// src/app/proto-ts/user-pb-service.d.ts
import * as user_pb from "./user-pb";
import {grpc} from "@improbable-eng/grpc-web";
type UserServiceListUsers = {
readonly methodName: string;
readonly service: typeof UserService;
readonly requestStream: false;
readonly responseStream: false;
readonly requestType: typeof user_pb.ListUsersRequest;
readonly responseType: typeof user_pb.ListUsersReply;
};
export class UserService {
static readonly serviceName: string;
static readonly ListUsers: UserServiceListUsers;
}
export type ServiceError = { message: string, code: number; metadata: grpc.Metadata }
export type Status = { details: string, code: number; metadata: grpc.Metadata }
interface UnaryResponse {
cancel(): void;
}
interface ResponseStream<T> {
cancel(): void;
on(type: 'data', handler: (message: T) => void): ResponseStream<T>;
on(type: 'end', handler: (status?: Status) => void): ResponseStream<T>;
on(type: 'status', handler: (status: Status) => void): ResponseStream<T>;
}
interface RequestStream<T> {
write(message: T): RequestStream<T>;
end(): void;
cancel(): void;
on(type: 'end', handler: (status?: Status) => void): RequestStream<T>;
on(type: 'status', handler: (status: Status) => void): RequestStream<T>;
}
interface BidirectionalStream<ReqT, ResT> {
write(message: ReqT): BidirectionalStream<ReqT, ResT>;
end(): void;
cancel(): void;
on(type: 'data', handler: (message: ResT) => void): BidirectionalStream<ReqT, ResT>;
on(type: 'end', handler: (status?: Status) => void): BidirectionalStream<ReqT, ResT>;
on(type: 'status', handler: (status: Status) => void): BidirectionalStream<ReqT, ResT>;
}
export class UserServiceClient {
readonly serviceHost: string;
constructor(serviceHost: string, options?: grpc.RpcOptions);
listUsers(
requestMessage: user_pb.ListUsersRequest,
metadata: grpc.Metadata,
callback: (error: ServiceError|null, responseMessage: user_pb.ListUsersReply|null) => void
): UnaryResponse;
listUsers(
requestMessage: user_pb.ListUsersRequest,
callback: (error: ServiceError|null, responseMessage: user_pb.ListUsersReply|null) => void
): UnaryResponse;
}
尝试在组件文件中使用它们：
// src/app/modules/user/pages/list/list.component.ts
import { Component, OnInit } from '@angular/core';
import { grpc } from "@improbable-eng/grpc-web";
import { UserService } from '../../../../proto-ts/user-pb-service.d'
import { ListUsersRequest } from '../../../../proto-ts/user-pb.d'
@Component({
selector: 'app-list',
templateUrl: './list.component.html',
styleUrls: ['./list.component.scss']
})
export class ListComponent implements OnInit {
constructor() { }
ngOnInit() {
const listUsersRequest = new ListUsersRequest();
listUsersRequest.setMessage("Hello world");
grpc.unary(UserService.ListUsers, {
request: listUsersRequest,
host: "0.0.0.0:50051",
onEnd: res => {
const { status, statusMessage, headers, message, trailers } = res;
if (status === grpc.Code.OK && message) {
console.log("all ok. got the user list: ", message.toObject());
} else {
console.log("error");
}
}
});
}
}
期望结果与实际结果
我希望能够在组件（或服务）中使用非 Angular 的 TypeScript 代码。
由于上述代码（但不包括组件文件）是生成的，因此不应进行修改，因为对 .proto 文件的任何更改都会覆盖对这两个生成文件所做的任何修改。
目前，我被这两个错误信息阻止了，这些错误信息取决于我最后保存的文件：如果我最后保存的是 protobuf 生成的文件，则不会在控制台中出现任何错误，否则会出现 TypeError: _proto_ts_user_pb_d__WEBPACK_IMPORTED_MODULE_4__.ListUsersRequest is not a constructor 或者 src\app\proto-ts\user-pb-service.d.ts and src\app\proto-ts\user-pb.d.ts is missing from the TypeScript compilation. Please make sure it is in your tsconfig via the 'files' or 'include' property. 错误信息。
将 tsconfig.json 中的 'files' 或 'include' 添加到其中（该文件由 Angular CLI 生成且未进行任何修改）会创建另一个错误：Refused to load the image 'http://localhost:4200/favicon.ico' because it violates the following Content Security Policy directive: "default-src 'none'". Note that 'img-src' was not explicitly set, so 'default-src' is used as a fallback.