title: 使用TypeScript与Golang进行gRPC通信
tags:
- gRPC
categories: -
- 后端开发
- Golang开发
-
- 前端开发
- TypeScript
abbrlink: 87cd08b2
date: 2020-02-14 15:21:14
原文链接：https://blog.lemonit.cn/posts/87cd08b2.html
0x00 前言
最近为了提高自身能力，尝试自己用golang搞了个微服务框架，服务间通信全部使用的是gRPC，越用越觉得舒服，性能很高，而且protoc自动生成代码这点也很值得使用。
随着框架开发过程的推进，该进行WebUI的开发了，翻了下gRPC官网https://grpc.io，发现官方对TypeScript的支持也已经很成熟了，反正也是秉着提高自身能力的心情来开发的，决定入坑走一圈……
至于protobuf、gRPC的介绍这里就不赘述了，各位请自己百度或谷歌
0x01 准备环境
A. 安装protoc
首先需要下载安装protoc，用于根据proto定义文件生成各种语言的代码。下载地址为：
https://github.com/protocolbuffers/protobuf/releases
进入releases页面后，向下滚动，找到适合自己操作系统的版本，下载下来，我的操作系统是macOS，所以选择的是protoc-3.11.3-osx-x86_64.zip，下载后解压，然后将目录加入到系统环境变量中，最后保证在控制台中可以使用protoc命令，效果如下：
liuri@liurideMacBook-Pro blog.lemonit.cn % protoc --version
libprotoc 3.11.3
B. 安装protoc-gen-go
由于我这里后端使用的是Golang，所以接下来安装用于Go语言代码的插件，首先需要正确配置好$GOPATH环境变量，如果不确定是否自己已经成功配置，使用这个命令查看一下，输出的GOPATH是否如你所愿：
liuri@liurideMacBook-Pro blog.lemonit.cn % go env | grep GOPATH
GOPATH="/Users/liuri/go"
请确认你的gopath所指向的文件夹中有src、pkg、bin三个文件夹
接下来，我们开始下载，执行如下命令：
go get github.com/golang/protobuf/protoc-gen-go
下载完毕后确认$GOPATH/bin/中存在protoc-gen-go可执行文件即可
C.安装ts-protoc-gen
这里特殊说明一下，gRPC官方针对gRPC-web有两个实现，一个是grpc/grpc-web，一个是improbable-eng/grpc-web，这里我选择的是第二个improbable-eng/grp-web，因为据我目前对第grpc/grpc-web的了解，必须启用一个独立的proxy做base64->binary的转发（也可能是我了解不够，如果各位大神有知晓的可以指点一下），而我目前开发的框架的场景下因为种种原因不允许有这层独立的proxy，而第二种可以选择内置的grpcWeb方式来监听普通的Http端口，所以我选择了improbable-eng/grpc-web，如果您选择的是grpc/grpc-web，那么本文对您可能没有太大意义
首先大家可以看一下官方Github仓库，里面有一些对大家有用的文档可以作为参考资料：
https://github.com/improbable-eng/ts-protoc-gen#readme
首先我们创建一个新项目，我这里创建了一个vue+typescript项目，大家根据自身情况自行选择。然后我们使用npm命令开始安装，控制台执行：
npm install ts-protoc-gen --save
当然也可以用yarn来安装：
yarn add ts-protoc-gen
安装后，确保项目node_modules/.bin/目录中存在protoc-gen-ts文件，然后大家要记录一下这个文件在电脑中的绝对路径，稍后会用到。
0x02. 定义服务
环境安装好后，接下来，我们开始定义message和服务，首先，先定义message部分：
syntax = "proto3";
package usr_dto;
option go_package = "github.com/lemon-cloud-service/lemon-cloud-dashboard/lemon-cloud-dashboard-common/usr_dto";
message AdminLoginRequest {
string number = 1;
string password = 2;
}
message AdminLoginResponse {
string token = 1;
string username = 2;
}
然后是service部分的定义：
syntax = "proto3";
package usr_service;
option go_package = "github.com/lemon-cloud-service/lemon-cloud-dashboard/lemon-cloud-dashboard-common/usr_service";
import "protobuf/usr_dto/admin.proto";
service AdminService {
rpc Login (usr_dto.AdminLoginRequest) returns (usr_dto.AdminLoginResponse) {
}
}
由于工程结构的习惯，我将message的定义和service定义拆分成两个文件夹存储，大家可以根据自己的习惯而定，然后我们来根据定义自动生成对应语言的代码，这里我写了一个shell脚本，大家可以作为参考，根据自己的实际目录结构进行修改，其中第一行是刚才让大家记录的proto-gen-ts文件的绝对路径，不过大家可能会有疑问为什么我写的是相对路径，官方文档中说明：macOS和Linux中可以使用命令行所处位置的相对路径，但是Windows中必须使用绝对路径，所以使用绝对路径肯定没错，macOS和Linux用户可以偷下懒：
PROTOC_GEN_TS_PATH="../../lemon-cloud-dashboard-ui/node_modules/.bin/protoc-gen-ts"
# generate usr-dto-golang
rm usr_dto/**.pb.go
protoc -I . --go_out=plugins=grpc:usr_dto protobuf/usr_dto/*.proto
cp $(find usr_dto/ -type f -name "*.pb.go") usr_dto/
rm -rf usr_dto/github.com
# generate usr-service-golang
rm usr_service/**.pb.go
protoc -I . --go_out=plugins=grpc:usr_service protobuf/usr_service/*.proto
cp $(find usr_service/ -type f -name "*.pb.go") usr_service/
rm -rf usr_service/github.com
# generate usr-dto-web
rm js_usr_dto/**_pb.js
rm js_usr_dto/**.ts
protoc \
--plugin="protoc-gen-ts=${PROTOC_GEN_TS_PATH}" \
--js_out="import_style=commonjs,binary:js_usr_dto" \
--ts_out="service=grpc-web:js_usr_dto" \
protobuf/usr_dto/*.proto
cp $(find js_usr_dto/ -type f -name "*.js") js_usr_dto/
cp $(find js_usr_dto/ -type f -name "*.ts") js_usr_dto/
rm -rf js_usr_dto/protobuf
# generate usr-service-web
rm js_usr_service/**_pb.js
rm js_usr_service/**.ts
protoc \
--plugin="protoc-gen-ts=${PROTOC_GEN_TS_PATH}" \
--js_out="import_style=commonjs,binary:js_usr_service" \
--ts_out="service=grpc-web:js_usr_service" \
protobuf/usr_service/*.proto
cp $(find js_usr_service/ -type f -name "*.js") js_usr_service/
cp $(find js_usr_service/ -type f -name "*.ts") js_usr_service/
rm -rf js_usr_service/protobuf
脚本执行后，目前我的文件目录结构如下：
├── js_usr_dto // 以下是JS/TS代码生成输出
│ ├── admin_pb.d.ts
│ ├── admin_pb.js
│ ├── admin_pb_service.d.ts
│ └── admin_pb_service.js
├── js_usr_service
│ ├── admin_pb.d.ts
│ ├── admin_pb.js
│ ├── admin_pb_service.d.ts
│ └── admin_pb_service.js
├── proto.gen.sh // 代码的生成脚本（上段提供的代码所在文件）
├── protobuf
│ ├── usr_dto
│ │ └── admin.proto
│ └── usr_service
│ └── admin.proto
├── usr_dto // 以下是Golang代码生成输出
│ └── admin.pb.go
└── usr_service
└── admin.pb.go
0x03. 编码对接服务
接下来，我们先将处理后端部分，我们创建一个Golang项目，将刚才生成的usr_dto、usr_service两个文件夹拷贝进去，接下来，我们需要为刚才定义的service写实现部分，创建admin_service_impl.go文件，内容如下：
package usr_service_impl
import (
"context"
"github.com/lemon-cloud-service/lemon-cloud-dashboard/lemon-cloud-dashboard-common/usr_dto"
)
type AdminUsrServiceImpl struct{}
func (AdminUsrServiceImpl) Login(context.Context, *usr_dto.AdminLoginRequest) (*usr_dto.AdminLoginResponse, error) {
return &usr_dto.AdminLoginResponse{
Token: "token1122334455",
Username: "LemonIT.CN柠檬信息技术有限公司",
}, nil
}
然后创建一个main.go文件作为入口，并使用如下代码进行定义服务并启动：
package main
import (
"fmt"
"github.com/improbable-eng/grpc-web/go/grpcweb"
"github.com/lemon-cloud-service/lemon-cloud-dashboard/lemon-cloud-dashboard-common/usr_service"
"github.com/lemon-cloud-service/lemon-cloud-dashboard/lemon-cloud-dashboard-service/usr_service_impl"
"golang.org/x/net/http2"
"golang.org/x/net/http2/h2c"
"google.golang.org/grpc"
"net"
"net/http"
)
func main() {
s := grpc.NewServer()
usr_service.RegisterAdminServiceServer(s, &usr_service_impl.AdminUsrServiceImpl{})
grpcWebServer := grpcweb.WrapServer(s)
httpServer := &http.Server{
Handler: h2c.NewHandler(http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
if r.ProtoMajor == 2 {
grpcWebServer.ServeHTTP(w, r)
} else {
// 此部分代码用作跨域配置，允许前台跨域访问
w.Header().Set("Access-Control-Allow-Origin", "*")
w.Header().Set("Access-Control-Allow-Methods", "POST, GET, OPTIONS, PUT, DELETE")
w.Header().Set("Access-Control-Allow-Headers", "Accept, Content-Type, Content-Length, Accept-Encoding, X-CSRF-Token, Authorization, X-User-Agent, X-Grpc-Web")
if grpcWebServer.IsGrpcWebRequest(r) {
grpcWebServer.ServeHTTP(w, r)
}
}
}), &http2.Server{}),
}
listen1, _ := net.Listen("tcp", ":33385")
fmt.Println("服务启动完毕...")
httpServer.Serve(listen1)
}
我们现在把服务启动起来，使用如下命令，并可以看见我们刚刚打印的提示服务启动完毕：
liuri@liurideMacBook-Pro lemon-cloud-dashboard-service % go run main.go
服务启动完毕...
好了到此为止后台服务已经准备就绪了，接下来我们来打开刚刚创建的前端项目，将刚刚生成的js_usr_dto、js_usr_service两个文件夹复制到项目中，大家需要看一下文件中是否有报错，因为service引用dto部分的路径可能和实际的部分，大家根据自己的情况自行修改一下
除了路径的错误，大家还可以看见找不到一些依赖的错误提示，大家可以根据错误提示进行安装：
yarn add @improbable-eng/grpc-web
yarn add @types/google-protobuf
最后在适当的地方（根据您刚创建的项目类型自行选择，我的是vue+ts项目，所以我选择了在某个vue文件的mounted生命周期中执行）编写如下代码：
const client = new AdminServiceClient('http://localhost:33385')
const req = new AdminLoginRequest()
req.setNumber('lemonitcn')
req.setPassword('123456')
client.login(req, (err: ServiceError|null, rsp: AdminLoginResponse | null) => {
console.log('err: %O, ', err)
console.log(rsp?.getUsername())
console.log(rsp?.getToken())
})
接下来，我们测试一下，执行上述代码后，可以在console中看到我们刚刚输出的信息，第一行err: null表示无错误，第二行第三行分别是后台刚刚返回的username和token字段内容：
err: null,
LemonIT.CN柠檬信息技术有限公司
token1122334455
0x04. 后记
到此为止，我们的通信算是成功了，这期间踩了不少坑，百度发现根本找不到类似的问题，但是Google可以找到很多解决方案，如果读者也有许多问题，建议脱墙后访问谷歌进行搜索，百度中的资料实在有限，可能是国内的web项目中太少用gRPC导致的吧。
大家有问题可以随时骚扰交流，微信号：qbxx002
参考资料
grpc-web官方Github仓库：https://github.com/improbable-eng/grpc-web
protoc-typescript代码生成工具Github仓库：https://github.com/improbable-eng/ts-protoc-gen#readme