grpc-web与react的集成

更新日期: 2018-11-14阅读量: 2862标签: 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.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

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

Vue和React有什么区别与优劣?我到底应该选择哪谁?

前端开发框架从最开始的jquery时代,到后来backbone,angular1,再到现在vue和react两分天下,也才用了不到十年的光景。

为什么 React 源码不用 TypeScript 来写?

Facebook 是一家技术很厉害的公司,能够超前做一些外界没有的东西,但等外界把这个东西做出来了, Facebook 就发现自己迁移不过去了,被自己过去超前做的技术锁定了,因为迁移成本太高

React Context 理解和使用

Context是 React中为了避免在不同层级组件中逐层传递props的产物,在没有Context的时候父组件向子组件传递props属性只能在组件树上自上而下进行传递,但是有些属性并不是组件树的每层节点都有相同的需求

React大型项目状态管理库如何选型?

由于要做一个使用起来比较舒服的轮子,最近研究了下React的状态管理库,当然,仅限在使用层面,也就是用着舒服的角度来选择到底使用哪个状态管理库。本着在Github上面看看React社区内状态管理库的流行程度和使用程度的层面

选择 Reac​​tJS 的五大理由

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

一文看懂React Hooks

React Hooks是从React 16.8版本推出的新特性,目的是解决React的状态共享以及组件生命周期管理混乱的问题。React Hooks的出现标志着,React不会再存在无状态组件的情况,React将只有类组件和函数组件的概念

Context - React跨组件访问数据的利器

Context提供了一种跨组件访问数据的方法。它无需在组件树间逐层传递属性,也可以方便的访问其他组件的数。在经典的React应用中,数据是父组件通过props向子组件传递的

React 监听页面滚动,界面动态显示

当页面滚动时,如何动态切换布局/样式, 添加滚动事件的监听/注销

不要过度使用React.useCallback()

我博客的一位读者在Facebook上联系到我,提出了一个有趣的问题。他说,他的队友不管在什么情况下,都会把每一个回调函数封装在 useCallback() 里面。

从 React 切换到 Vue.js

React 和 Vue 的关系有点像可口可乐和百事可乐,你在 React 中做的很多事情都可以在 Vue 中完成。当然这里也存在一些重要的概念差异,其中一些反映了 Angular 对 Vue 的影响。

点击更多...

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