grpc-web与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: 各种安装,各种报错,还有端口冲突问题,凡事都要多试下,第三方库很多,有时需要多试几个,不要在一棵树上吊死,大家共勉。
grpc-web与react的集成的更多相关文章
- 将React Native集成至Android原生应用
将React Native集成至Android原生应用 Android Studio 2.1 Preview 4生成的空项目 react-native 环境 0.22.2 初次编译后apk有1.1M, ...
- Angular团队公布路线图,并演示怎样与React Native集成
本文来源于我在InfoQ中文站翻译的文章,原文地址是:http://www.infoq.com/cn/news/2015/06/angular-2-react-native-roadmap 前不久在旧 ...
- Selenium Web 自动化 - 项目持续集成(进阶)
Selenium Web 自动化 - 项目持续集成(进阶) 2017-03-09 目录 1 背景及目标2 环境配置 2.1 SVN的安装及使用 2.2 新建Jenkins任务3 过程分析 1 背景 ...
- Selenium Web 自动化 - 项目持续集成
Selenium Web 自动化 - 项目持续集成 2017-02-13 目录 1环境准备 1.1 安装git 1.2 安装jenkins 1.3 安装jenkins插件 1.4 jekins ...
- 【重磅】iNeuOS工业互联平台,系统集成业务模型和WEB组态视图建模集成3D模型
目 录 1. 概述... 1 2. 平台演示... 2 3. 系统集成业务模型... 2 4. WEB组态视图建模集成3D模型... 3 5. ...
- Blazor WebAssembly + Grpc Web = 未来?
Blazor WebAssembly是什么 首先来说说WebAssembly是什么,WebAssembly是一个可以使C#,Java,Golang等静态强类型编程语言,运行在浏览器中的标准,浏览器厂商 ...
- 使用tailor 轻松方便的集成web 框架react&&vue
tailor 是一款很方便的layout 服务,类似facebook 的bigpipe,我们可以使用此工具 方便的集成各类web 框架,实现micro-fronteds 开发 参考demo https ...
- 用WijmoJS搭建您的前端Web应用 —— React
前文回顾 在本系列文章中,我们已经介绍了Angular和Vue框架下 WijmoJS 的玩法. 而今天,我们将展示如何使用 WijmoJS 来搭建一款具备独特创新性.出色性能和简单代码逻辑的 Reac ...
- 使用Gradle构建构建一个Java Web工程及持续集成环境Jenkins配置
安装Eclipse插件——Buildship 什么是Buildship? Buildship能方便我们通过Eclipse IDE创建和导入Gradle工程,同时还能执行Gradle任务. Eclips ...
随机推荐
- spring基于通用Dao的多数据源配置
有时候在一个项目中会连接多个数据库,须要在spring中配置多个数据源,近期就遇到了这个问题,因为我的项目之前是基于通用Dao的,配置的时候问题不断.这样的方式和资源文件冲突:扫描映射文件的话,Sql ...
- Codeforces--630D--Hexagons(规律)
D - Hexagons! Crawling in process... Crawling failed Time Limit:500MS Memory Limit:65536KB ...
- ubuntu 12.10 禁用触摸板
1. 打开终端,输入 sudo rmmod psmouse 禁用触摸板,输入 sudo modprobe psmouse 恢复触摸板 2.syndaemon -i 10 -d >/dev/nul ...
- C语言实现字符串拼接
#include <stdio.h>#include <stdlib.h>#include <string.h> char* str_contact(const c ...
- Building a Space Station(bfs)
http://poj.org/problem?id=2031 题意:给出n个球的圆心坐标x,y,z, 半径r,若任意两球不相交,则在两球间建桥.问需建桥的最短距离是多少. 思路:建图,以两球间相差的距 ...
- JavaScript中变速运动的数学模型构建
AB两地直线距离相距为S,机器人β从A点向B点行进.已知机器人β的每间隔固定时间行进一段路程,其下次行进的距离为当前距离B点路程的1/q(q为正整数),求机器人第n次行进距离的表达式an以及前n项和公 ...
- Eclipse 添加本地 SVN插件以及运行项目的流程
去网上下载SVN插件包.里面包含文件如图: 把features和plugins文件夹里面的东西全部复制粘贴到eclipse安装目录下的features和plugins文件夹中就行.然后重启eclips ...
- struts2拦截器(四)
struts2拦截器原理: 当请求action时,struts2会查找配置文件,并根据配置实例化相对的 拦截器对象,然后串成一个列表,然后一个一个的调用列表中的拦截器. 比如:某些页面必须登录才可以访 ...
- Asp.net MVC Checkbox控件 和 Nullable<bool>, 或bool?类型
@Html.CheckBoxFor() 这个方法生成两个Input HTML标签,不明白为什么这样,如果数据库是Nullable<bool>类型,就会报错. 网上的解决方法是这样: 方法一 ...
- Java实现九宫格
import java.util.Scanner; public class Sudoku { public static void main(String[] args) { System.out. ...