react调用 grpc python Server
JS脚本 2023/10/25 21:12:16 点击：不统计
原载于:原文章%77w%77%2Ef%6F%72%61%73%70%2E%63n
react 通过前端grpc 调用 python server 服务，下面是react 代码以及相关配置。JavaScript 前端调用grpc 已经停止支持了。 都是通过vue 或者react 使用grpc 服务。
python 服务代码 请看 python 调用 grpc 包括后端服务
1. 配置npm环境
安装npm 相关grpc 的服务组件,react使用
npm install google-protobuf
npm install grpc-web
系统安装shell 需要安装protobuf 用于生成js 相关代码
snap install protobuf
或者下面命令
apt install protobuf-compiler #
安装docker.
curl -fsSL https://get.docker.com | bash -s docker --mirror Aliyun # shell阿里云直接安装
或者
curl -fsSL https://test.docker.com -o test-docker.sh 官方安装docker
mac 安装docker
brew install --cask --appdir=/Applications docker
说明的是:gRPC-Web 的底层实际上是基于 HTTP/2 的，而不是 WebSocket。HTTP/2 提供了许多 WebSocket 所具有的功能，如双向通信和服务器推送，但同时还提供了更多的功能，如头部压缩、多路复用和流量控制。然而，由于浏览器的安全策略和兼容性问题，gRPC-Web 客户端不能直接发送 HTTP/2 请求。因此，gRPC-Web 客户端实际上发送的是 HTTP/1.1 的请求，然后由一个代理（如 Envoy）将这些请求转换为 HTTP/2 的请求并发送给 gRPC 服务器。
2. 写 proto 协议文件，包含 类,方法,定义名称为Forasp.proto 代码如下
syntax = "proto3";
// 生成代码 python -m grpc_tools.protoc -I. --python_out=. --grpc_python_out=. Forasp.proto
// 包名称 与文件名一致
package Forasp;
service Rpc_server_name {
rpc Rpc_fun(reqArg) returns (retArg) {} // 双向非流 大写字母会在协议自动转为小写字母
}
// 定义请求reqArg 消息参数，
// 定义格式 类型 名称 = number;
// number 标示第几个参数
//任何参数操作，如果有下划线 _ 在生成协议时会变成驼峰
message reqArg {
string site_domain = 1;
int32 site_year = 2;
}
// 定义 返回retArg 中参数,return_str
message retArg {
string return_str = 1;
}
3. 生成js 扩展文件 客户端shell生成代码命令如下：
protoc -I=. Forasp.proto --js_out=import_style=commonjs:. --grpc-web_out=import_style=commonjs,mode=grpcwebtext:.
行中最后参数 就是 Forasp.proto。
生成后文件如下：
Forasp_grpc_web_pb.js
Forasp_pb2.py
4. 服务端 我们直接用python rpc 服务，参考上面的 python ，方法名称更换了。
5. react 客户端 代码
import React, { useEffect, useState } from 'react';
import logo from './logo.svg';
import './App.css';
import { Rpc_server_nameClient } from './Forasp_grpc_web_pb';
import { reqArg } from './Forasp_pb';
const App =()=> {
const [message, setMessage] = useState([]);
const onClick=()=>{
// 生成远程调用client, new proto类名+Client
const client = new Rpc_server_nameClient('http://192.168.5.126:8080', null, null);
const request = new reqArg(); // 这里新建请求参数对象，用于 请求参数赋值
request.setSiteDomain('www.forasp.cn'); // 前面定义的名称如果有下滑线自动回更换为驼峰
request.setSiteYear(18);
// 方法名称如果有大写字母会自动转为小写
client.rpc_fun(request, {}, (err, response) => {
if (err) {
console.error(err);
return;
}
// 获取返回值 为 getReturnStr() ReturnStr 是proto 协议中是return_str 自动转为驼峰
setMessage((message) => [...message, response.getReturnStr()]);
});
}
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo"/>
<p onClick={onClick}>
点击这里看www.forasp.cn信息 web grpc 调用python server
</p >
{message.map((item, index) => {
return <p key={index}>{index}----{item}</p >;
})}
</header>
</div>
);
}
export default App;
6. 代理服务 ,代理文件 envoy.yaml 文件见下面附件
注意配置文件 代理监听0.0.0.0端口 8080
代理upstream 到后段 pytho grpc 服务是192.168.1.122:5001 (与python服务保持一致,如果是服务器需要写服务器实际IP）
docker 运行代理服务，命令行
sudo docker run -d -p 8080:8080 -v $(pwd)/envoy.yaml:/etc/envoy/envoy.yaml envoyproxy/envoy:v1.14.1
sudo docker run -d -p 8080:8080 -v $(pwd)/envoy.yaml:/etc/envoy/envoy.yaml envoyproxy/envoy # 这个是不指定版本，会自己下载
如果下载不下来
docker pull envoyproxy/envoy:latest
#mac 笔记本上会运行后有界面显示
9. 测试运行服务
python server.py #命令行保持运行
运行react 代码
npm start
启动代理服务 如果有客户端的可以通过客户端，没有客户端用命令行
10. 点击 网页文字，显示web 调用 python grpc 接口结果，如下图
整体服务代码下载： react调用 grpc python Server 代码下载