网站建设gxjzdrj,金融系统网站模板,网站开发合同及报价单,广告设计免费参考文章
https://blog.csdn.net/pathfinder1987/article/details/129188540 https://blog.csdn.net/qq_45634989/article/details/128151766
前言
临时让我写前端, 一些配置不太懂, 可能文章有多余的步骤但是好歹能跑起来吧
你需要提前准备 公司有自带的这些, 但是版本大都…参考文章
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_outimport_stylecommonjs:. TestServer.proto ps: (我是把protoc.exe文件放在当前test目录中了, 怕其他版本污染) 所以我的执行命令是 ./protoc.exe --js_outimport_stylecommonjs:. TestServer.proto
执行二: protoc-v3-20.1 --grpc-web_outimport_stylecommonjs,modegrpcwebtext:. --pluginprotoc-gen-grpcprotoc-gen-grpc-web.exe TestServer.proto ps: 同上, 以下为我的执行命令 ./protoc.exe --grpc-web_outimport_stylecommonjs,modegrpcwebtext:. --pluginprotoc-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-scriptslatest 胡乱执行了上面的代码, 其实还是报错…(所以上面的命令行[npm install react-scriptslatest]根本没用, 不要抄…) 这个错误应该是我照办上面参考文章的package.json导致的, 我又根据下载的grpcweb中net/…/example/helloworld中的package.json糙了一份. 就是上面写的package.json, 忘了是不是一样xxxx(叽里咕噜) 反正我也不知道说的啥, 改成
npx webpack ./client.js即可 , 如果你还是有错误的话那就是我没遇见, 另请高人 创一个index.html文件(同test目录下)
!DOCTYPE html
html langenheadmeta charsetUTF-8titlePDS_LifeDB-TestServer/title
/headbodyp实现前端通过js或者ts直接调用后台cpp的grpc服务/pbutton idbtn 测试/buttonscript 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.husing 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_ptrgrpc::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_addrlocalhost:7152 --run_tls_serverfalse --server_http_debug_port7150 --allow_all_originstrue10 用浏览器打开客户端的html文件(index.html)
点一下试试能跑不
