参考文章
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:
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, 这是我的
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目录中直接执行)
bash
npm install
创建一个TestServer.proto文件(可以写如下内容)
text
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') 这一步写错了, 最后发现后再运行就好了, 所以不太确定之前的错误是不是版本的问题
吐槽完毕
js
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, 执行
bash
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(叽里咕噜)
反正我也不知道说的啥, 改成
bash
npx webpack ./client.js
即可
, 如果你还是有错误的话那就是我没遇见, 另请高人
创一个index.html文件(同test目录下)
html
<!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文件和上面的客户端一样, 若对这有疑问可以参考上面的参考文章, 里面有一篇有在说这个
cpp
#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
这步不知道在干啥(参考文章有解释), 反正执行就完了, 执行后别关
bash
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
10
用浏览器打开客户端的html文件(index.html)
点一下试试能跑不