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

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

news 2025/12/15 2:14:22

参考文章

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

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

10

用浏览器打开客户端的html文件(index.html)

点一下试试能跑不

相关文章：

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

参考文章 https://blog.csdn.net/pathfinder1987/article/details/129188540 https://blog.csdn.net/qq_45634989/article/details/128151766 前言 临时让我写前端, 一些配置不太懂, 可能文章有多余的步骤但是好歹能跑起来吧 你需要提前准备 公司有自带的这些, 但是版本大都…...

编程日记 2024/12/5 12:33:04

前端常用缓存技术深度剖析

&#x1f90d; 前端开发工程师、技术日更博主、已过CET6 &#x1f368; 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1 &#x1f560; 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》 &#x1f35a; 蓝桥云课签约作者、上架课程《Vue.js 和 E…...

编程日记 2024/12/5 12:31:02

Asp.net Mvc在VSCore中如何将增删改查的增改添加数据传输到页面(需配合上一篇Mvc的增删改查一起）

Linq集成查询&#xff08;关联Lambda&#xff09; First FirstOrDefault 找到第一个符合条件的元素 First(x >x.Id id) 返回第一个Id等于id的元素&#xff0c;如果都没有符合的&#xff0c;报错FirstOrDefault(x >x.Id id) 返回第一个Id等于id的元素&#xff0c;如果…...

编程日记 2024/12/5 12:29:00

Android显示系统（04）- OpenGL ES - Shader绘制三角形

一、前言&#xff1a; OpenGL 1.0采用固定管线&#xff0c;OpenGL 2.0以上版本重要的改变就是采用了可编程管线&#xff0c;Shader 编程是指使用着色器&#xff08;Shader&#xff09;编写代码来控制图形渲染管线中特定阶段的处理过程。在图形渲染中&#xff0c;着色器是在 GP…...

编程日记 2024/12/5 12:26:58

微信 创建小程序码-有数量限制

获取小程序码&#xff1a;小程序码为圆图&#xff0c;有数量限制。 目录 文档 接口地址 功能描述 注意事项 请求参数 对接 获取小程序码 调用获取 小程序码示例 总结 文档 接口地址 https://api.weixin.qq.com/wxa/getwxacode?access_tokenaccess_token 功能描述 …...

编程日记 2024/12/5 12:25:56

重生之我在异世界学编程之C语言：操作符篇

大家好&#xff0c;这里是小编的博客频道 小编的博客&#xff1a;就爱学编程 很高兴在CSDN这个大家庭与大家相识&#xff0c;希望能在这里与大家共同进步&#xff0c;共同收获更好的自己&#xff01;&#xff01;&#xff01; 本文目录 引言正文1. 算术操作符2. 关系&#xff0…...

编程日记 2024/12/5 12:22:52

365天深度学习训练营-第P7周：马铃薯病害识别（VGG-16复现）

文为「365天深度学习训练营」内部文章 参考本文所写记录性文章&#xff0c;请在文章开头带上「&#x1f449;声明」 &#x1f37a; 要求&#xff1a; 自己搭建VGG-16网络框架【达成√】调用官方的VGG-16网络框架【达成√】如何查看模型的参数量以及相关指标【达成√】 &#…...

编程日记 2024/12/5 12:20:50

解密时序数据库的未来：TDengine Open Day技术沙龙精彩回顾

在数字化时代&#xff0c;开源已成为推动技术创新和知识共享的核心力量&#xff0c;尤其在数据领域&#xff0c;开源技术的涌现不仅促进了行业的快速发展&#xff0c;也让更多的开发者和技术爱好者得以参与其中。随着物联网、工业互联网等技术的广泛应用&#xff0c;时序数据库…...

编程日记 2024/12/5 12:19:49

Kubernetes 告警标签规范与最佳实践

1. 前言 在现代化的 Kubernetes 运维环境中，规范的告警标签系统对于快速定位和解决问题至关重要。本文将详细介绍告警标签的设计规范和最佳实践，帮助团队建立高效的告警处理流程。 © ivwdcwso (ID: u012172506) 2. 标签体系设计 2.1 基本概念 告警标签（Labels）是一…...

编程日记 2024/12/5 12:15:45

前端开发 之 15个页面加载特效中【附完整源码】

前端开发 之 15个页面加载特效中【附完整源码】 文章目录 前端开发 之 15个页面加载特效中【附完整源码】八&#xff1a;圆环百分比加载特效1.效果展示2.HTML完整代码 九&#xff1a;毒药罐加载特效1.效果展示2.HTML完整代码 十&#xff1a;无限圆环加载特效1.效果展示2.HTML完…...

编程日记 2024/12/5 12:13:43

rsync+nfs+lrsync服务部署流程

rsyncnfslrsync服务 主机信息 主机角色外网IP内网IP主机名nfs、lsync10.0.0.31176.16.1.31nfs客户端10.0.0.7176.16.1.7web01rsync、nfs10.0.0.41172.16.1.41backup 部署流程 1.backup服务器部署rsync --下载rsync服务 [rootbackup ~]# yum install -y rsync --配置rsync服…...

编程日记 2024/12/5 12:12:42

基于SpringBoot+Vue的宠物咖啡馆系统-无偿分享 (附源码+LW+调试)

目录 1. 项目技术 2. 功能菜单 3. 部分功能截图 4. 研究背景 5. 研究目的 6. 可行性分析 6.1 技术可行性 6.2 经济可行性 6.3 操作可行性 7. 系统设计 7.1 概述 7.2 系统流程和逻辑 7.3 系统结构 8. 数据库设计 8.1 数据库ER图 &#xff08;1&#xff09;宠物订…...

编程日记 2024/12/5 12:09:39

SQLServer 服务器只接受 TLS1.0，但是客户端给的是 TLS1.2

Caused by: javax.net.ssl.SSLHandshakeException: the server selected protocol version TLS10 is not accepted by client preferences [TLS12] 原因描述&#xff1a;SQLServer 服务器只接受 TLS1.0&#xff0c;但是客户端给的是 TLS1.2 解决方法如下&#xff1a; 打开文件…...

编程日记 2024/12/5 12:04:35

Golang内存模型总结1（mspan、mcache、mcentral、mheap）

1.内存模型 1.1 操作系统存储模型 从上到下分别是寄存器、高速缓存、内存、磁盘&#xff0c;其中越往上速度越快&#xff0c;空间越小&#xff0c;价格越高。 关键词是多级模型和动态切换 1.2 虚拟内存与物理内存 虚拟内存是一种内存管理技术&#xff0c;允许计算机使用比…...

编程日记 2024/12/5 12:01:32

lobeChat安装

一、安装Node.js version > v18.17.0 二、下载 cd F:\AITOOLS\LobeChat git clone https://github.com/lobehub/lobe-chat.git &#xff08;下载要是失败就手动下&#xff1a;https://codeload.github.com/lobehub/lobe-chat/zip/refs/heads/main&#xff09; npm install …...

编程日记 2024/12/5 12:00:31

Android学习8 -- NDK2--练习2（Opencv）

以下是一个简单的安卓项目示例&#xff0c;通过NDK调用OpenCV来处理图像&#xff08;例如&#xff0c;将彩色图像转换为灰度图像&#xff09;。 开发环境 安装 Android Studio&#xff08;支持NDK开发&#xff09;。配置NDK和CMake&#xff08;通过Android Studio的SDK Manage…...

编程日记 2024/12/5 11:59:29

nodejs循环导出多个word表格文档

文章目录 nodejs循环导出多个word表格文档一、文档模板编辑二、安装依赖三、创建导出工具类exportWord.js四、调用五、效果图nodejs循环导出多个word表格文档 结果案例： 一、文档模板编辑 二、安装依赖 // 实现word下载的主要依赖 npm install docxtemplater pizzip --save/…...

编程日记 2024/12/5 11:58:28

elasticsearch-如何给文档新增/更新的字段

文章目录 前言elasticsearch-如何给文档新增/更新的字段1. 如何给某些文档新增/更新的字段2. 给所有文档添加/更新一个新的字段3. 测试 前言 如果您觉得有用的话&#xff0c;记得给博主点个赞&#xff0c;评论&#xff0c;收藏一键三连啊&#xff0c;写作不易啊^ _ ^。   而且…...

编程日记 2024/12/5 11:57:27

https/http访问接口工具类，附带ssl忽略证书验证，以及head头部的添加-java版

复制即用 package utils;import lombok.extern.slf4j.Slf4j; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Component;import javax.net.ssl.*; import java.io.BufferedReader; import java.io.IOException; impo…...

编程日记 2024/12/5 11:55:24

node.js基础学习-express框架-静态资源中间件express.static（十一）

前言 在 Node.js 应用中&#xff0c;静态资源是指那些不需要服务器动态处理&#xff0c;直接发送给客户端的文件。常见的静态资源包括 HTML 文件、CSS 样式表、JavaScript 脚本、图片&#xff08;如 JPEG、PNG 等&#xff09;、字体文件和音频、视频文件等。这些文件在服务器端…...

编程日记 2024/12/5 11:54:23

设计模式和设计原则回顾

设计模式和设计原则回顾 23种设计模式是设计原则的完美体现，设计原则设计原则是设计模式的理论基石， 设计模式 在经典的设计模式分类中（如《设计模式：可复用面向对象软件的基础》一书中），总共有23种设计模式，分为三大类： 一、创建型模式（5种） 1. 单例模式（Sing…...

编程新知 2025/12/14 20:57:41

【JavaEE】-- HTTP

1. HTTP是什么&#xff1f; HTTP&#xff08;全称为"超文本传输协议"&#xff09;是一种应用非常广泛的应用层协议&#xff0c;HTTP是基于TCP协议的一种应用层协议。 应用层协议&#xff1a;是计算机网络协议栈中最高层的协议&#xff0c;它定义了运行在不同主机上…...

编程新知 2025/12/10 2:57:55

相机Camera日志实例分析之二：相机Camx【专业模式开启直方图拍照】单帧流程日志详解

【关注我&#xff0c;后续持续新增专题博文&#xff0c;谢谢&#xff01;&#xff01;&#xff01;】 上一篇我们讲了&#xff1a; 这一篇我们开始讲&#xff1a; 目录 一、场景操作步骤 二、日志基础关键字分级如下 三、场景日志如下&#xff1a; 一、场景操作步骤 操作步…...

编程新知 2025/12/14 11:06:45

Neo4j 集群管理：原理、技术与最佳实践深度解析

Neo4j 的集群技术是其企业级高可用性、可扩展性和容错能力的核心。通过深入分析官方文档，本文将系统阐述其集群管理的核心原理、关键技术、实用技巧和行业最佳实践。 Neo4j 的 Causal Clustering 架构提供了一个强大而灵活的基石，用于构建高可用、可扩展且一致的图数据库服务…...

编程新知 2025/12/11 3:51:27

《基于Apache Flink的流处理》笔记

思维导图 1-3 章 4-7章 8-11 章 参考资料 源码&#xff1a; https://github.com/streaming-with-flink 博客 https://flink.apache.org/bloghttps://www.ververica.com/blog 聚会及会议 https://flink-forward.orghttps://www.meetup.com/topics/apache-flink https://n…...

编程新知 2025/12/9 5:15:06

20个超级好用的 CSS 动画库

分享 20 个最佳 CSS 动画库。 它们中的大多数将生成纯 CSS 代码&#xff0c;而不需要任何外部库。 1.Animate.css 一个开箱即用型的跨浏览器动画库&#xff0c;可供你在项目中使用。 2.Magic Animations CSS3 一组简单的动画&#xff0c;可以包含在你的网页或应用项目中。 3.An…...

编程新知 2025/12/10 1:29:00

【Redis】笔记｜第8节｜大厂高并发缓存架构实战与优化

缓存架构 代码结构 代码详情 功能点&#xff1a; 多级缓存&#xff0c;先查本地缓存&#xff0c;再查Redis&#xff0c;最后才查数据库热点数据重建逻辑使用分布式锁&#xff0c;二次查询更新缓存采用读写锁提升性能采用Redis的发布订阅机制通知所有实例更新本地缓存适用读多…...

编程新知 2025/12/11 4:56:27

GAN模式奔溃的探讨论文综述（一）

简介 简介：今天带来一篇关于GAN的，对于模式奔溃的一个探讨的一个问题，帮助大家更好的解决训练中遇到的一个难题。 论文题目：An in-depth review and analysis of mode collapse in GAN 期刊：Machine Learning 链接：...

编程新知 2025/12/14 9:16:48

高抗扰度汽车光耦合器的特性

晶台光电推出的125℃光耦合器系列产品&#xff08;包括KL357NU、KL3H7U和KL817U&#xff09;&#xff0c;专为高温环境下的汽车应用设计&#xff0c;具备以下核心优势和技术特点&#xff1a; 一、技术特性分析 高温稳定性 采用先进的LED技术和优化的IC设计&#xff0c;确保在…...

编程新知 2025/12/5 17:15:34

6.计算机网络核心知识点精要手册

计算机网络核心知识点精要手册 1.协议基础篇 网络协议三要素 语法&#xff1a;数据与控制信息的结构或格式&#xff0c;如同语言中的语法规则语义&#xff1a;控制信息的具体含义和响应方式&#xff0c;规定通信双方"说什么"同步&#xff1a;事件执行的顺序与时序…...

编程新知 2025/9/26 21:47:06