关闭

grpc-web与react的集成

时间: 2018-11-14阅读: 2164标签: 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


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

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

关闭

简单的useState实现

这样的用法和以往的 setState 是有明显的不同的,他看起来更像 redux——我们初始化一个 state,然后 dispatch 一个 action,再由 reducer 改变 state 后返回新的 state。

怎样使用React Context API

React Context API 现在已经成为一个实验性功能,但是只有在 React 16.3.0 中才能用在生产中。本文将向你展示两个基本的 Web 商店应用程序,一个使用了 Context API 进行构建,另一个则不用。

react 源码之setState

与multirepo 相对。 monorepo是单代码仓库, 是把所有相关项目都集中在一个代码仓库中,每个module独立发布,每个module都有自己的依赖项(package.json),能够作为独立的npm package发布,只是源码放在一起维护。

React ref

React ref理解:通过指定ref获得你想操作的元素,然后进行修改.是当组件挂载后和卸载后,以及ref属性本身发生变化时,回调函数就会被调用。 因为ref引用的是组件的实例

选择 Reac​​tJS 的五大理由

ReactJS是一个开源的JavaScript库,并且由Facebook和Instagram这样的顶尖IT企业以及开发者社区所维护。该框架广泛使用于为web应用程序开发用户界面的时候。这个特殊的框架被发明时带有这样一个目的:

21 项优化 React App 性能的技术

在 React 内部,React 会使用几项巧妙的小技术,来优化计算更新 UI 时,所需要的最少的更新 DOM 的操作。在大多数情况下,即使你没有针对性能进行专项优化,React 依然很快,但是仍有一些方法可以加速 React 应用程序

React 服务端渲染完美的解决方案

使用 React 构建客户端应用程序,默认情况下,可以在浏览器中输出 React 组件,进行生成 DOM 和操作 DOM。React 也可以在服务端通过 Node.js 转换成 HTML,直接在浏览器端“呈现”处理好的 HTML 字符串,这个过程可以被认为 “同构”

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

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

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

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

react-navigation 监听顶部导航栏点击/滑动状态

使用createMaterialTopTabNavigator创建顶部导航栏,希望实现切换到指定的Tab再获取数据,查看官方文档只能找到tabBarOnPress 方法监听点击回调,但是无法监听滑动切换

点击更多...

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