当前位置：首页 > news >正文

javascript(前端)作为客户端端通过grpc与cpp(服务端)交互

news 2025/8/16 11:01:23

参考文章

https://blog.csdn.net/pathfinder1987/article/details/129188540
https://blog.csdn.net/qq_45634989/article/details/128151766

前言

临时让我写前端, 一些配置不太懂, 可能文章有多余的步骤但是好歹能跑起来吧

你需要提前准备

公司有自带的这些, 但是版本大都是未知的(懒得问), 最好用这些远古版本

protobuf 3.20.1:
https://github.com/protocolbuffers/protobuf/releases

protoc-gen-grpc-web-1.4.2-windows-x86_64.exe:
https://github.com/grpc/grpc-web/releases/download/1.4.2/protoc-gen-grpc-web-1.4.2-windows-x86_64.exe

grpcweb(这个可以先不急着拉, 版本应该不限)
https://github.com/grpc/grpc-web

grpc_cpp_plugin.exe
这个先不提供了, 我用的不知道哪个版本的

grpcwebproxy 0.13.0
https://github.com/improbable-eng/grpc-web/releases/tag/v0.13.0

begin

开一个文件夹, 比如叫test
把https://github.com/grpc/grpc-web这个拉倒我们这个test目录中

创一个package.json, 这是我的

{"name": "grpc-web-simple-example","version": "0.1.0","description": "gRPC-Web simple example","main": "server.js","devDependencies": {"@grpc/grpc-js": "~1.1.8","@grpc/proto-loader": "~0.5.4","async": "~3.2.3","google-protobuf": "~3.14.0","grpc-web": "~1.4.2","lodash": "~4.17.0","webpack": "~5.82.1","webpack-cli": "~5.1.1"}
}

执行(test目录中直接执行)

npm install

创建一个TestServer.proto文件(可以写如下内容)

syntax = "proto3";package PDS_LifeDB;service TestServer {rpc SayHello(HelloRequest) returns (HelloReply);
}message HelloRequest {string name = 1;
}message HelloReply {string message = 1;
}

执行一:
protoc-v3-20.1 --js_out=import_style=commonjs:. TestServer.proto
ps: (我是把protoc.exe文件放在当前test目录中了, 怕其他版本污染)
所以我的执行命令是
./protoc.exe --js_out=import_style=commonjs:. TestServer.proto

执行二:
protoc-v3-20.1 --grpc-web_out=import_style=commonjs,mode=grpcwebtext:. --plugin=protoc-gen-grpc=protoc-gen-grpc-web.exe TestServer.proto
ps: 同上, 以下为我的执行命令
./protoc.exe --grpc-web_out=import_style=commonjs,mode=grpcwebtext:. --plugin=protoc-gen-grpc=./protoc-gen-grpc-web-1.4.2-windows-x86_64.exe TestServer.proto

创建一个client.js文件(同样是test目录下)
吐槽: 上面的参考byd文章中 var but = document.getElementById(‘bu’) 这一步写错了, 最后发现后再运行就好了, 所以不太确定之前的错误是不是版本的问题
吐槽完毕

const {HelloRequest,HelloReply} = require('./TestServer_pb.js');
const {TestServerClient} = require('./TestServer_grpc_web_pb.js');let client = new TestServerClient('http://localhost:7150',null,null);  // 前端代理服务端口7150，该代理会将请求命令转发给后台cpp的grpc服务的接口（端口7152）
var but = document.getElementById('btn')//这里设置了一个点击事件，当点击按钮的时候，再向服务端发送请求
//按钮要联系到index.html文件上
but.onclick  = function () {var request = new HelloRequest();request.setName('World');client.sayHello(request, {}, (err, response) => {if (err) {console.log(`Unexpected error for sayHello: code = ${err.code}` +`, message = "${err.message}"`);} else {console.log(response.getMessage());}});
}

生成main.js, 执行

set NODE_OPTIONS=--openssl-legacy-provider
npx webpack client.js

对于npx webpack client.js 这一步我遇到两个错误

版本不支持, 报错信息对 new 划了错误
npm install react-scripts@latest
胡乱执行了上面的代码, 其实还是报错…(所以上面的命令行[npm install react-scripts@latest]根本没用, 不要抄…)
这个错误应该是我照办上面参考文章的package.json导致的, 我又根据下载的grpcweb中net/…/example/helloworld中的package.json糙了一份. 就是上面写的package.json, 忘了是不是一样
xxxx(叽里咕噜)
反正我也不知道说的啥, 改成

npx webpack ./client.js

即可
, 如果你还是有错误的话那就是我没遇见, 另请高人

创一个index.html文件(同test目录下)

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>PDS_LifeDB-TestServer</title>
</head><body><p>实现前端通过js或者ts直接调用后台cpp的grpc服务</p><button id="btn" >测试</button><script src="./dist/main.js"></script>
</body>
</html>

同样去写一个cpp的服务端
grpc配置我这没有
注意include目录, 这是根据你自己的
proto文件和上面的客户端一样, 若对这有疑问可以参考上面的参考文章, 里面有一篇有在说这个

#include <iostream>
#include "protoFiles/TestServer.grpc.pb.h"
#include "protoFiles/TestServer.pb.h"
#include "grpc++/grpc++.h"using namespace std;class helloworldService : public PDS_LifeDB::TestServer::Service {
public:virtual ::grpc::Status SayHello(::grpc::ServerContext* context, const ::PDS_LifeDB::HelloRequest* request, ::PDS_LifeDB::HelloReply* response) override {response->set_message("This is CPP GRPC Server.");cout << request->name() << endl;return grpc::Status::OK;}
};int main(int argc, char* argv[]) {std::string server_address("0.0.0.0:7152");helloworldService calcSrv;grpc::ServerBuilder builder;builder.AddListeningPort(server_address, grpc::InsecureServerCredentials());builder.RegisterService(&calcSrv);std::unique_ptr<grpc::Server> server(builder.BuildAndStart());std::cout << "Server listening on " << server_address << std::endl;server->Wait();return 0;
}

编译执行

9

这步不知道在干啥(参考文章有解释), 反正执行就完了, 执行后别关

grpcwebproxy-v0.13.0-win64.exe --allow_all_origins --backend_addr=localhost:7152 --run_tls_server=false --server_http_debug_port=7150 --allow_all_origins=true