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

{
  "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)

点一下试试能跑不