【gRPC】在NextJS中实现gRPC的基础通讯

gRPC 是一个高性能、开源和通用的 RPC 框架，面向移动和 HTTP/2 设计
gRPC 基于 HTTP/2 标准设计，带来诸如双向流、流控、头部压缩、单 TCP 连接上的多复用请求等特。这些特性使得其在移动设备上表现更好，更省电和节省空间占用。

这篇算是个基础实战笔记，以下内容建立在gRPC服务端已启动的基础上进行测试，仅演示在NextJS中的应用示例；
正文开始…

实验环境

• react: ^18
• next: 14.0.4

项目结构

|- app
 |- page.tsx   // 客户端渲染页面
|- proto
 |- test.proto // 示例proto

• test.proto文件内容

syntax = "proto3";

package user;  // 当前包名

// 定义调用服务需要传递的参数 和 返回的参数
message AddUserRequest {
    // 这里的 1 代表第一个参数  2 代表第二个参数
    string username = 1;  // 用户名
    string password = 2;  // 密码
}

// 定义返回参数的格式
message AddUserResponse {
    uint32 uid = 1;   // 用户id
}

// 定义接口服务
service UserService {
    rpc AddUser(AddUserRequest) returns (AddUserResponse);
}

---

实践

实践开始前，先安装两个NPM依赖包@grpc/grpc-js、@grpc/proto-loader

• 安装相关依赖

pnpm add @grpc/grpc-js @grpc/proto-loader

• 编辑app/page.tsx文件，发起gRPC请求

载入proto文件：

@grpc/proto-loader依赖包参数说明：

• @link: https://www.npmjs.com/package/@grpc/proto-loader

参数	值	说明
keepCase	true或false	保留字段名称。 默认设置是将它们更改为驼峰大小写。
longs	String或Number	用于表示值的类型。 默认为对象类型。longLong
enums	String	用于表示值的类型。 默认为数值。enum
bytes	Array或String	用于表示值的类型。 缺省值为 .bytesBuffer
defaults	true或false	设置输出对象的默认值。 缺省值为 .false
arrays	true或false	为缺少的数组值设置空数组， 即使默认为 。defaults false false
objects	true或false	为缺少的对象值设置空对象， 即使默认为 。defaults false false
oneofs	true或false	将 virtual one of properties 设置为当前字段的名称。 缺省值为 .false
json	true或false	在字段中将 和 表示为字符串，并自动解码值。 默认为Infinity NaN float google.protobuf.Any false
includeDirs	字符串数组	导入文件的搜索路径列表。.proto

import grpc from "@grpc/grpc-js"

// 注：`PROTO_PATH`路径要是绝对路径(以Win系统上为例)
const PROTO_PATH = 'C:\\Users\\dev\\Desktop\\grpc-demo\\proto\\test.proto';

const packageDefinition = protoLoader.loadSync(
    PROTO_PATH,
    {
	    keepCase: true,
	    longs: String,
	    enums: String,
	    defaults: true,
	    oneofs: true,
	    includeDirs: [ // 同项目的情况下，该选项配置可选
	        'C:\\Users\\dev\\Desktop\\grpc-demo'
	    ],
	}
);

gRPC解析proto内容：

import protoLoader from "@grpc/proto-loader"

const hello_proto = grpc.loadPackageDefinition(packageDefinition);

此时hello_proto已经得到了proto的结构对象：

hello_proto: {                                 
  user: {                                    
    AddUserRequest: [Object],                
    AddUserResponse: [Object],               
    UserService: [Function]                  
  },                                           
  google: { protobuf: { Timestamp: [Object] } }
}

通过NextJS服务端模式下，发起gRPC请求：

function main() {
	var target = 'localhost:50051';
	// 此处`user.UserService`对应`proto`文件中的`service UserService { ...`
    var client = new hello_proto.user.UserService(
	    target,
	    grpc.credentials.createInsecure()
    );

	// 此处的`AddUser`对应`proto`文件中的`AddUserRequest`和`AddUserResponse`
    client.AddUser({username: '用户名', password: '密码'}, function(err, response) {
        console.log('Response:', response);
    });
}

至此，在NextJS下发起gRPC的实验完成!