Angular 6 的 GRPC Web 客户端

Question

我使用过 grpc .net 客户端和使用 java 创建的 grpc 服务器，如何使用 typescript 在 angular 6 上实现 grpc Web 客户端？另外我如何创建原型文件并且它是打字稿的打字？ 我正在关注this repo，但无法生成 proto 文件。

Answer 1

花了一些时间后，我能够通过以下步骤为打字稿创建原型文件：

1. 从此link 下载适用于 Windows 的 protobuf。提取文件后设置 protoc.exe 的路径变量
2. 安装 npm 包npm install google-protobuf @types/google-protobuf grpc-web-client ts-protoc-gen --save
3. 安装后使用以下命令生成打字稿文件： protoc --plugin="protoc-gen-ts=absolute-path-to-your-project\node_modules\.bin\protoc-gen-ts.cmd" --js_out="import_style=commonjs,binary:${OUT_DIR}" --ts_out="service=true:${OUT_DIR}" your.proto
4. 最后像repo中提到的那样使用它。

Answer 2

你也可以通过运行：

npm install google-protobuf protoc ts-protoc-gen

然后在你的 package.json 中添加一个编译脚本：

"compile": "./node_modules/protoc/protoc/bin/protoc --plugin=protoc-gen-ts=./node_modules/.bin/protoc-gen-ts --js_out=import_style=commonjs,binary:src/app/proto-gen --ts_out=service=true:src/app/proto -I ./src/app/proto ./src/app/proto/**/*.proto",

现在您可以使用以下方法将 .proto 文件编译为服务：

npm run compile

您可以在此处查看该方法的工作原理：

https://github.com/kmturley/angular-nest-grpc

Answer 3

grpc/grpc-web 可在https://github.com/grpc/grpc-web 获得

Answer 4

不能在 Windows 上使用

"compile": "./node_modules/protoc/protoc/bin/protoc
--plugin=protoc-gen-ts=./node_modules/.bin/protoc-gen-ts --js_out=import_style=commonjs,binary:src/app/proto-gen --ts_out=service=true:src/app/proto -I ./src/app/proto ./src/app/proto/**/*.proto",

我得到“。”不被识别为内部或外部命令

这很好用：package.json

"scripts": {
"compile": "node_modules\\protoc\\protoc\\bin\\protoc --plugin=protoc-gen-ts=node_modules\\.bin\\protoc-gen-ts.cmd --js_out=import_style=commonjs,binary:./proto/generated --ts_out=service=grpc-web:./proto/generated -I ./proto ./proto/*.proto"
}

npm 运行编译

Answer 5

在带有自动的 windows 解决方案上：

1. npm i @types/google-protobuf --save-dev
2. npm i google-protobuf --save
3. npm i grpc-web-client --save
4. npm i ts-protoc-gen --save

或者对于 1 到 4 可以使用这个命令： npm i @types/google-protobuf google-protobuf grpc-web-client ts-protoc-gen --save

5. 将此行添加到 package.json：

   “脚本”：{

   "grpc:gen": "protoc --plugin=protoc-gen-ts=node_modules\\ts-protoc-gen\\bin\\protoc-gen-ts.cmd --js_out=import_style=commonjs,binary:proto\\out --ts_out=service=grpc-web:proto\\out proto\\greet.proto"
   

   }

6. 用这个命令生成ts文件npm run grpc:gen

代码可在此处获得： Server for .net Core Client for angular