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

参考文章

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, 这是我的

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 这一步我遇到两个错误

  1. 版本不支持, 报错信息 对 new 划了错误
    npm install react-scripts@latest
    胡乱执行了上面的代码, 其实还是报错...(所以上面的命令行[npm install react-scripts@latest]根本没用, 不要抄...)
    这个错误应该是我照办上面参考文章的package.json导致的, 我又根据下载的grpcweb中net/.../example/helloworld中的package.json糙了一份. 就是上面写的package.json, 忘了是不是一样
  2. 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)

点一下试试能跑不

相关推荐
余生H2 分钟前
前端Python应用指南(三)Django vs Flask:哪种框架适合构建你的下一个Web应用?
前端·python·django
凡人的AI工具箱8 分钟前
每天40分玩转Django:实操图片分享社区
数据库·人工智能·后端·python·django
LUwantAC10 分钟前
CSS(四)display和float
前端·css
cwtlw14 分钟前
CSS学习记录20
前端·css·笔记·学习
界面开发小八哥19 分钟前
「Java EE开发指南」如何用MyEclipse构建一个Web项目?(一)
java·前端·ide·java-ee·myeclipse
渝妳学C19 分钟前
【C++】类和对象(下)
c++
谢道韫66626 分钟前
今日总结 2024-12-24
javascript·vue.js·elementui
一朵好运莲27 分钟前
React引入Echart水球图
开发语言·javascript·ecmascript
米奇妙妙wuu33 分钟前
react使用sse流实现chat大模型问答,补充css样式
前端·css·react.js
EleganceJiaBao33 分钟前
【C语言】结构体模块化编程
c语言·c++·模块化·static·结构体·struct·耦合