react调用 grpc python Server

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 接口结果，如下图