grpc-web与react的集成

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

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

React 项目结构和组件命名之道

React 作为一个库,不会决定你如何组织项目的结构。这是件好事,因为这样我们有了充分的自由去尝试不同的组织方式并且选取最适合我们的方式。但是从另一个角度讲,这可能会让刚刚上手 React 的开发者产生些许困惑。

React-redux中connect的装饰器用法@connect

最近在琢磨react中的一些小技巧,这篇文章记录一下在redux中用装饰器来写connect。通常我们需要一个reducer和一个action,然后使用connect来包裹你的Component。

使用react-app-rewired和customize-cra对默认webpack自定义配置

最近在学习react框架,之前一直都是用vue 开发,知道在vue 中知道如何配置一下相关的webpack 有助于开发,学react 过程中,我也在想这些该怎么配置啊,所以就有这篇文章

React Ref 其实是这样的

在典型的 React 数据流中,props 是父组件与子组件交互的唯一方式。要修改一个子组件,你需要使用新的 props 来重新渲染它。但是,在某些情况下,你需要在典型数据流之外强制修改子组件/元素。

React事件处理函数必须使用bind(this)的原因

学习React的过程中发现调用函数的时候必须使用bind(this),之后直接在class中声明函数即可正常使用,但是为什么呢,博主进行了一番查阅,总结如下。

简单的useState实现

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

React router动态加载组件-适配器模式的应用

本文讲述怎么实现动态加载组件,并借此阐述适配器模式,自定义高阶组件的好处,是可以按最少的改动,来优化已有的旧项目。只需要改变import组件的方式即可。花最少的代价,就可以得到页面性能的提升。

必须要会的 50 个React 面试题

如果你是一位有抱负的前端程序员并准备面试,那么这篇文章很适合你。本文是你学习和面试 React 所需知识的完美指南。JavaScript 工具缓慢而稳定地在市场中扎根,对 React 的需求呈指数级增长。选择合适的技术来开发应用或网站变得越来越有挑战性

React中富文本编辑器的技术选型调研

富文本编辑器是项目中不可或缺的部分,目前市面上可以选择的富文本编辑器种类繁多,如何在项目中选择一款集轻量,美观,稳定,坑少,满足需求的富文本编辑器变成了团队中一个重要的问题。我对这两款富文本编辑器都进行了使用,并结合目前的项目需求进行了比较:react-quill、braft-editor

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

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

点击更多...

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