grpc-web与react的集成

更新日期: 2018-11-14阅读量: 3045标签: react

很久没写总结了,在这里跟大家分享一下自己踩的坑,同时也方便自己多记忆下。


大致流程:

使用create-react-app脚手架生成react相关部分,脚手架内部会通过node自动起一个客户端,然后和普通的ajax请求一样,和远端服务器进行通信,只不过这里采用支持rpc通信的grpc-web来发起请求,远端采用docker容器的node服务器,node服务器端使用envoy作为代理


概念类:

docker是一个包含运行环境和配置的镜像容器;   

envoy是一个支持rpc通信的第三方库代理通信;

grpc是一个rpc的框架,面向移动和http/2设计;

grpc-web是grpc的扩展,面向web端;

grpc-web地址:https://grpc.io/docs/tutorials/basic/web.html


流程:

先使用脚手架生成react相关代码,运行ejcet命令,调出react相关配置,然后按照上面提供的git地址,自己写一个proto文件,或者直接从上面下载一个,然后使用proto文件,生成rpc通信需要的js文件,需先全局安装protoc包,可使用npm安装,按官网命令,可顺利生成一个pb.js,web_pb.js文件生成。

需额外安装其它工具包,通过 npm install protoc-gen-grpc -g -unsafe-perm 安装如果安装过程报错,通过 npm config set unsafe-perm true 先修改npm配置,再通过 npm install protoc-gen-grpc -g 安装

然后执行官网上的命令,可顺利生成这两个js文件,pb.js文件主要用于发送request,包含request相关函数,web_pb.js文件主要用于获取response,包含response相关函数,同时包含请求地址的设置,接下来,按照把官网上的package.json相关依赖包名添加到自己的package.json中,执行 npm install,把生成的两个js文件放到自己的项目中,按官网demo正常使用, 然后执行 npm run start 会编译报错,这里涉及到react和grpc集成的两个问题点,

问题1: react的eslint检测,会检测出pb.js文件的部分变量undefined,需要改变react相关配置,在package.json中修改eslintConfig参数,在globals里面添加 "$": false, "COMPILED": false, "proto": false

问题2:pb.js文件是按照common.js规范生成的,需改变package.json中额babel plugin配置,把transform-runtime配置去掉,使其兼容common.js的module.export语法,至此,可顺利完成编译,client端完成。然后按照官网上的步骤安装docker等相关工具,可顺利运行server端和envoy,官网docker里已自己配置了代理环境。


至此,一个简单的通信应该可以正常完成。

如果要自己配置envoy代理的话,需要先看下demo里的envoy.yaml文件,里面是一些代理设置,包括监听的代理地址和server地址,后面认真看下,再回来更新envoy这部分内容。

ps: 各种安装,各种报错,还有端口冲突问题,凡事都要多试下,第三方库很多,有时需要多试几个,不要在一棵树上吊死,大家共勉。

来源:https://www.cnblogs.com/xiaoxiaopao/archive/2018/11/14/9955731.html


链接: https://www.fly63.com/article/detial/1339

如何优雅的设计 React 组件

如今的 Web 前端已被 React、Vue 和 Angular 三分天下,尽管现在的 jQuery 已不再那么流行,但 jQuery 的设计思想还是非常值得致敬和学习的,特别是 jQuery 的插件化。

React深度编程:受控组件与非受控组件

受控组件与非受控组件在官网与国内网上的资料都不多,有些人觉得它可有可不有,也不在意。这恰恰显示React的威力,满足不同规模大小的工程需求。

React框架学习_关于React两种构建应用方式选择

一般在传统模式下,我们构建前端项目很简单。就是下载各种js文件,如JQuery、Echart等,直接放置在html静态文件。Webpack则是JavaScript中比较知名的打包工具。这两个构建工具构成了React应用快速搭建的基础。

Gatsby.js_一款基于React.js静态站点生成工具

Gatsby能快速的使用 React 生态系统来生成静态网站,可以结合React Component、Markdown 和服务端渲染来完成静态网站生成让他更强大。

React创建组件的三种方式及其区别

React推出后,出于不同的原因先后出现三种定义react组件的方式,殊途同归;具体的三种方式:函数式定义的无状态组件、es5原生方式React.createClass定义的组件、es6形式的extends React.Component定义的组件

react生命周期详解_深入理解React生命周期

React主要思想是通过构建可复用组件来构建用户界面,每个组件都有自己的生命周期,它规定了组件的状态和方法需要在哪个阶段改变和执行。所谓组件就是有限状态机,,表示有限个状态以及在这些状态之间的转移和动作行为的模型。

React + Webpack 构建打包优化

React 相关的优化:使用 babel-react-optimize 对 React 代码进行优化,检查没有使用的库,去除 import 引用,按需打包所用的类库,比如 lodash 、echarts 等.Webpack 构建打包存在的问题两个方面:构建速度慢,打包后的文件体积过大

react router中页面传值的三种方法

这篇文章主要介绍React Router定义路由之后如何传值,有关React和React Router 。react router中页面传值的三种方法:props.params、query、state

react 高阶组件的 理解和应用

react 高阶组件简单的理解是:一个包装了另一个基础组件的组件。高阶组件的两种形式:属性代理(Props Proxy)、反向继承 (Inheritance Inversion)

react中的refs属性的使用方法

React 支持一种非常特殊的属性 Ref ,你可以用来绑定到 render() 输出的任何组件上。这个特殊的属性允许你引用 render() 返回的相应的支撑实例( backing instance )。这样就可以确保在任何时间总是拿到正确的实例

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!