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

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

news 2025/11/14 23:26:34

参考文章

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

51c自动驾驶~合集58

我自己的原文哦~ https://blog.51cto.com/whaosoft/13967107 #CCA-Attention 全局池化局部保留&#xff0c;CCA-Attention为LLM长文本建模带来突破性进展 琶洲实验室、华南理工大学联合推出关键上下文感知注意力机制&#xff08;CCA-Attention&#xff09;&#xff0c;…...

编程新知 2025/11/10 19:16:24

css实现圆环展示百分比，根据值动态展示所占比例

代码如下 <view class""><view class"circle-chart"><view v-if"!!num" class"pie-item" :style"{background: conic-gradient(var(--one-color) 0%,#E9E6F1 ${num}%),}"></view><view v-else …...

编程新知 2025/11/12 0:21:17

STM32+rt-thread判断是否联网

一、根据NETDEV_FLAG_INTERNET_UP位判断 static bool is_conncected(void) {struct netdev *dev RT_NULL;dev netdev_get_first_by_flags(NETDEV_FLAG_INTERNET_UP);if (dev RT_NULL){printf("wait netdev internet up...");return false;}else{printf("loc…...

编程新知 2025/9/23 20:06:08

Keil 中设置 STM32 Flash 和 RAM 地址详解

文章目录 Keil 中设置 STM32 Flash 和 RAM 地址详解一、Flash 和 RAM 配置界面（Target 选项卡）1. IROM1（用于配置 Flash）2. IRAM1（用于配置 RAM）二、链接器设置界面（Linker 选项卡）1. 勾选“Use Memory Layout from Target Dialog”2. 查看链接器参数（如果没有勾选上面…...

编程新知 2025/11/12 3:40:36

反射获取方法和属性

Java反射获取方法 在Java中&#xff0c;反射&#xff08;Reflection&#xff09;是一种强大的机制&#xff0c;允许程序在运行时访问和操作类的内部属性和方法。通过反射&#xff0c;可以动态地创建对象、调用方法、改变属性值&#xff0c;这在很多Java框架中如Spring和Hiberna…...

编程新知 2025/11/9 2:57:17

微信小程序云开发平台MySQL的连接方式

注&#xff1a;微信小程序云开发平台指的是腾讯云开发 先给结论&#xff1a;微信小程序云开发平台的MySQL&#xff0c;无法通过获取数据库连接信息的方式进行连接&#xff0c;连接只能通过云开发的SDK连接&#xff0c;具体要参考官方文档&#xff1a; 为什么&#xff1f; 因为…...

编程新知 2025/11/10 19:00:21

【JavaWeb】Docker项目部署

引言 之前学习了Linux操作系统的常见命令&#xff0c;在Linux上安装软件&#xff0c;以及如何在Linux上部署一个单体项目&#xff0c;大多数同学都会有相同的感受&#xff0c;那就是麻烦。 核心体现在三点&#xff1a; 命令太多了&#xff0c;记不住 软件安装包名字复杂&…...

编程新知 2025/11/12 5:14:55

Python Ovito统计金刚石结构数量

大家好，我是小马老师。 本文介绍python ovito方法统计金刚石结构的方法。 Ovito Identify diamond structure命令可以识别和统计金刚石结构，但是无法直接输出结构的变化情况。 本文使用python调用ovito包的方法，可以持续统计各步的金刚石结构，具体代码如下： from ovito…...

编程新知 2025/11/12 15:20:03

【Nginx】使用 Nginx+Lua 实现基于 IP 的访问频率限制

使用 NginxLua 实现基于 IP 的访问频率限制 在高并发场景下&#xff0c;限制某个 IP 的访问频率是非常重要的&#xff0c;可以有效防止恶意攻击或错误配置导致的服务宕机。以下是一个详细的实现方案&#xff0c;使用 Nginx 和 Lua 脚本结合 Redis 来实现基于 IP 的访问频率限制…...

编程新知 2025/10/22 6:06:44

Windows安装Miniconda

一、下载 https://www.anaconda.com/download/success 二、安装 三、配置镜像源 Anaconda/Miniconda pip 配置清华镜像源_anaconda配置清华源-CSDN博客 四、常用操作命令 Anaconda/Miniconda 基本操作命令_miniconda创建环境命令-CSDN博客...

编程新知 2025/11/12 20:32:56