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

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

news 2025/9/21 0:09:14

参考文章

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

K8S认证|CKS题库+答案| 11. AppArmor

目录 11. AppArmor 免费获取并激活 CKA_v1.31_模拟系统 题目 开始操作&#xff1a; 1&#xff09;、切换集群 2&#xff09;、切换节点 3&#xff09;、切换到 apparmor 的目录 4&#xff09;、执行 apparmor 策略模块 5&#xff09;、修改 pod 文件 6&#xff09;、…...

编程新知 2025/9/20 7:27:48

蓝桥杯 2024 15届国赛 A组 儿童节快乐

P10576 [蓝桥杯 2024 国 A] 儿童节快乐 题目描述 五彩斑斓的气球在蓝天下悠然飘荡&#xff0c;轻快的音乐在耳边持续回荡&#xff0c;小朋友们手牵着手一同畅快欢笑。在这样一片安乐祥和的氛围下&#xff0c;六一来了。 今天是六一儿童节&#xff0c;小蓝老师为了让大家在节…...

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

Qwen3-Embedding-0.6B深度解析：多语言语义检索的轻量级利器

第一章 引言&#xff1a;语义表示的新时代挑战与Qwen3的破局之路 1.1 文本嵌入的核心价值与技术演进 在人工智能领域&#xff0c;文本嵌入技术如同连接自然语言与机器理解的“神经突触”——它将人类语言转化为计算机可计算的语义向量&#xff0c;支撑着搜索引擎、推荐系统、…...

编程新知 2025/8/15 19:59:33

跨链模式：多链互操作架构与性能扩展方案

跨链模式&#xff1a;多链互操作架构与性能扩展方案 ——构建下一代区块链互联网的技术基石 一、跨链架构的核心范式演进 1. 分层协议栈&#xff1a;模块化解耦设计 现代跨链系统采用分层协议栈实现灵活扩展&#xff08;H2Cross架构&#xff09;&#xff1a; 适配层&#xf…...

编程新知 2025/8/30 10:09:32

【Web 进阶篇】优雅的接口设计：统一响应、全局异常处理与参数校验

系列回顾&#xff1a; 在上一篇中&#xff0c;我们成功地为应用集成了数据库&#xff0c;并使用 Spring Data JPA 实现了基本的 CRUD API。我们的应用现在能“记忆”数据了&#xff01;但是&#xff0c;如果你仔细审视那些 API&#xff0c;会发现它们还很“粗糙”&#xff1a;有…...

编程新知 2025/8/4 22:42:24

Rust 异步编程

Rust 异步编程 引言 Rust 是一种系统编程语言，以其高性能、安全性以及零成本抽象而著称。在多核处理器成为主流的今天，异步编程成为了一种提高应用性能、优化资源利用的有效手段。本文将深入探讨 Rust 异步编程的核心概念、常用库以及最佳实践。 异步编程基础 什么是异步…...

编程新知 2025/8/8 11:04:42

JS设计模式(4)：观察者模式

JS设计模式(4):观察者模式 一、引入 在开发中&#xff0c;我们经常会遇到这样的场景&#xff1a;一个对象的状态变化需要自动通知其他对象&#xff0c;比如&#xff1a; 电商平台中&#xff0c;商品库存变化时需要通知所有订阅该商品的用户&#xff1b;新闻网站中&#xff0…...

编程新知 2025/9/1 6:48:07

省略号和可变参数模板

本文主要介绍如何展开可变参数的参数包 1.C语言的va_list展开可变参数 #include <iostream> #include <cstdarg>void printNumbers(int count, ...) {// 声明va_list类型的变量va_list args;// 使用va_start将可变参数写入变量argsva_start(args, count);for (in…...

编程新知 2025/7/9 0:26:24

MySQL 主从同步异常处理

阅读原文&#xff1a;https://www.xiaozaoshu.top/articles/mysql-m-s-update-pk MySQL 做双主&#xff0c;遇到的这个错误&#xff1a; Could not execute Update_rows event on table ... Error_code: 1032是 MySQL 主从复制时的经典错误之一&#xff0c;通常表示&#xff…...

编程新知 2025/8/4 1:00:56

ubuntu22.04 安装docker 和docker-compose

首先你要确保没有docker环境或者使用命令删掉docker sudo apt-get remove docker docker-engine docker.io containerd runc安装docker 更新软件环境 sudo apt update sudo apt upgrade下载docker依赖和GPG 密钥 # 依赖 apt-get install ca-certificates curl gnupg lsb-rel…...

编程新知 2025/8/9 2:13:25