>[success] # 客户端编写案例
实现一个简单 `web-grpc` 案例,使用 `webpack ` 构建项目
~~~
.
|-- dist
| |-- bundle.js
| |-- bundle.js.map
| `-- index.html
|-- package.json
|-- pnpm-lock.yaml
|-- protos
| `-- greet.proto
|-- src
| |-- index.js
| `-- proto
| |-- greet_grpc_web_pb.js
| `-- greet_pb.js
|-- tsconfig.json
`-- webpack.config.js
~~~
>[danger] ##### 准备 `proto` 文件
~~~
syntax = "proto3"; // 指定使用proto3，如果不指定的话，编译器会使用proto2去编译
package greet; // 编译后的包名
message HelloRequest { // 定义请求对象类型
string name = 1; // string 类型name 字段1为 该成员编码时用1编号代替名字
}
message HelloReply { // 定义响应对象类型
string message = 1; // string 类型name 字段1为 该成员编码时用1编号代替名字
}
service Greeter { // 定义服务接口
//定义一个方法，SayHello 请求参数HelloRequest类型响应是HelloReply类型
rpc SayHello (HelloRequest) returns (HelloReply){};
}
~~~
>[danger] ##### 转换 `proto` 文件
* 进入`protos `文件夹 执行
~~~
protoc *.proto --js_out=import_style=commonjs:../src/proto --grpc-web_out=import_style=commonjs,mode=grpcwebtext:../src/proto
~~~
>[danger] ##### 安装 grpc-web
~~~
npm install google-protobuf @types/google-protobuf @improbable-eng/grpc-web --save
~~~
>[danger] ##### index.js 文件编写grpc 请求
~~~
import { HelloRequest } from './proto/greet_pb.js'
import { GreeterClient } from './proto/greet_grpc_web_pb.js'
const url = ''
const client = new GreeterClient(url)
const helloRequest = new HelloRequest()
console.log(helloRequest)
helloRequest.setName('北京')
const metadata = { 'Content-Type': 'application/grpc-web+proto' } // header头数据
client.sayHello(helloRequest, metadata, (err, response) => {
console.log(err, response)
})
~~~
>[success] # 服务的搭建
~~~
.
|-- index.js
|-- package.json
`-- pnpm-lock.yaml
~~~
使用 `node ` 作为客户端安装
~~~
npm i @grpc/grpc-js @grpc/proto-loader
~~~
>[danger] ##### 客户端代码
~~~
var PROTO_PATH = __dirname + '../../protos/greet.proto'
var grpc = require('@grpc/grpc-js')
var protoLoader = require('@grpc/proto-loader')
var packageDefinition = protoLoader.loadSync(PROTO_PATH, {
keepCase: true,
longs: String,
enums: String,
defaults: true,
oneofs: true,
})
var hello_proto = grpc.loadPackageDefinition(packageDefinition).greet
/**
* Implements the SayHello RPC method.
*/
function sayHello(call, callback) {
console.log(123)
callback(null, { message: 'Hello ' + call.request.name })
}
/**
* Starts an RPC server that receives requests for the Greeter service at the
* sample server port
*/
function main() {
var server = new grpc.Server()
server.addService(hello_proto.Greeter.service, { sayHello: sayHello })
server.bindAsync(
'0.0.0.0:50051',
grpc.ServerCredentials.createInsecure(),
() => {
server.start()
}
)
}
main()
~~~
>[success] # 配置ENYO 代理
* `enyoygrpcweb.yaml`
~~~
admin:
access_log_path: /tmp/admin_access.log
address:
socket_address: { address: 0.0.0.0, port_value: 9901 }
static_resources:
listeners:
- name: listener_0
address:
socket_address: { address: 0.0.0.0, port_value: 10000 }
filter_chains:
- filters:
- name: envoy.filters.network.http_connection_manager
typed_config:
'@type': type.googleapis.com/envoy.extensions.filters.network.http_connection_manager.v3.HttpConnectionManager
codec_type: auto
stat_prefix: ingress_http
route_config:
name: local_route
virtual_hosts:
- name: local_service
domains: ['*']
routes:
- match: { prefix: '/' }
route:
cluster: greeter_service
max_stream_duration:
grpc_timeout_header_max: 0s
cors:
allow_origin_string_match:
- prefix: '*'
allow_methods: GET, PUT, DELETE, POST, OPTIONS
allow_headers: keep-alive,user-agent,cache-control,content-type,content-transfer-encoding,custom-header-1,x-accept-content-transfer-encoding,x-accept-response-streaming,x-user-agent,x-grpc-web,grpc-timeout
max_age: '1728000'
expose_headers: custom-header-1,grpc-status,grpc-message
http_filters:
- name: envoy.filters.http.grpc_web
typed_config:
'@type': type.googleapis.com/envoy.extensions.filters.http.grpc_web.v3.GrpcWeb
- name: envoy.filters.http.cors
typed_config:
'@type': type.googleapis.com/envoy.extensions.filters.http.cors.v3.Cors
- name: envoy.filters.http.router
typed_config:
'@type': type.googleapis.com/envoy.extensions.filters.http.router.v3.Router
clusters:
- name: greeter_service
connect_timeout: 0.25s
type: static
http2_protocol_options: {}
lb_policy: round_robin
# win/mac hosts: Use address: host.docker.internal instead of address: localhost in the line below
load_assignment:
cluster_name: cluster_0
endpoints:
- lb_endpoints:
- endpoint:
address:
socket_address:
address: xxxxx
port_value: 50051
~~~
node 服务启动的 `address`: 本机`ip` 和`port_value`: 端口
>[success] # 在docker 安装 envoy
~~~
docker pull envoyproxy/envoy-dev
~~~
运行
~~~
docker run --rm -it -p 9901:9901 -p 10000:10000 -v C:/xx/envoy/:/etc/envoy/ envoyproxy/envoy-dev -c /etc/envoy/enyoygrpcweb.yaml
~~~
>[info] ## 参考
[# gRPC四种模式、认证和授权实战演示，必赞](https://juejin.cn/post/6984210268871983118#heading-5)
[gRPC Web 示例
](https://www.vinsguru.com/grpc-web-example/)
[前端 Web gRPC 实践和优化 文件较老1. google-protobuf + grpc-web-client 已经更改为了@improbable-eng/grpc-web](https://juejin.cn/post/6844903698351521805#heading-5)
- 工程化 -- Node
- vscode -- 插件
- vscode -- 代码片段
- 前端学会调试
- 谷歌浏览器调试技巧
- 权限验证
- 包管理工具 -- npm
- 常见的 npm ci 指令
- npm -- npm install安装包
- npm -- package.json
- npm -- 查看包版本信息
- npm - package-lock.json
- npm -- node_modules 层级
- npm -- 依赖包规则
- npm -- install 安装流程
- npx
- npm -- 发布自己的包
- 包管理工具 -- pnpm
- 模拟数据 -- Mock
- 页面渲染
- 渲染分析
- core.js && babel
- core.js -- 到底是什么
- 编译器那些术语
- 词法解析 -- tokenize
- 语法解析 -- ast
- 遍历节点 -- traverser
- 转换阶段、生成阶段略
- babel
- babel -- 初步上手之了解
- babel -- 初步上手之各种配置(preset-env)
- babel -- 初步上手之各种配置@babel/helpers
- babel -- 初步上手之各种配置@babel/runtime
- babel -- 初步上手之各种配置@babel/plugin-transform-runtime
- babel -- 初步上手之各种配置(babel-polyfills )(未来)
- babel -- 初步上手之各种配置 polyfill-service
- babel -- 初步上手之各种配置(@babel/polyfill )(过去式)
- babel -- 总结
- 各种工具
- 前端 -- 工程化
- 了解 -- Yeoman
- 使用 -- Yeoman
- 了解 -- Plop
- node cli -- 开发自己的脚手架工具
- 自动化构建工具
- Gulp
- 模块化打包工具为什么出现
- 模块化打包工具（新） -- webpack
- 简单使用 -- webpack
- 了解配置 -- webpack.config.js
- webpack -- loader 浅解
- loader -- 配置css模块解析
- loader -- 图片和字体（4.x）
- loader -- 图片和字体（5.x）
- loader -- 图片优化loader
- loader -- 配置解析js/ts
- webpack -- plugins 浅解
- eslit
- plugins -- CleanWebpackPlugin（4.x）
- plugins -- CleanWebpackPlugin（5.x）
- plugin -- HtmlWebpackPlugin
- plugin -- DefinePlugin 注入全局成员
- webapck -- 模块解析配置
- webpack -- 文件指纹了解
- webpack -- 开发环境运行构建
- webpack -- 项目环境划分
- 模块化打包工具 -- webpack
- webpack -- 打包文件是个啥
- webpack -- 基础配置项用法
- webpack4.x系列学习
- webpack -- 常见loader加载器
- webpack -- 移动端px转rem处理
- 开发一个自己loader
- webpack -- plugin插件
- webpack -- 文件指纹
- webpack -- 压缩css和html构建
- webpack -- 清里构建包
- webpack -- 复制静态文件
- webpack -- 自定义插件
- wepack -- 关于静态资源内联
- webpack -- source map 对照包
- webpack -- 环境划分构建
- webpack -- 项目构建控制台输出
- webpack -- 项目分析
- webpack -- 编译提速优护体积
- 提速 -- 编译阶段
- webpack -- 项目优化
- webpack -- DefinePlugin 注入全局成员
- webpack -- 代码分割
- webpack -- 页面资源提取
- webpack -- import按需引入
- webpack -- 摇树
- webpack -- 多页面打包
- webpack -- eslint
- webpack -- srr打包后续看
- webpack -- 构建一个自己的配置后续看
- webpack -- 打包组件和基础库
- webpack -- 源码
- webpack -- 启动都做了什么
- webpack -- cli做了什么
- webpack - 5
- 模块化打包工具 -- Rollup
- 工程化搭建代码规范
- 规范化标准--Eslint
- eslint -- 扩展配置
- eslint -- 指令
- eslint -- vscode
- eslint -- 原理
- Prettier -- 格式化代码工具
- EditorConfig -- 编辑器编码风格
- 检查提交代码是否符合检查配置
- 整体流程总结
- 微前端
- single-spa
- 简单上手 -- single-spa
- 快速理解systemjs
- single-sap 不使用systemjs
- monorepo -- 工程
- Vue -- 响应式了解
- Vue2.x -- 源码分析
- 发布订阅和观察者模式
- 简单 -- 了解响应式模型（一）
- 简单 -- 了解响应式模型（二）
- 简单 --了解虚拟DOM（一）
- 简单 --了解虚拟DOM（二）
- 简单 --了解diff算法
- 简单 --了解nextick
- Snabbdom -- 理解虚拟dom和diff算法
- Snabbdom -- h函数
- Snabbdom - Vnode 函数
- Snabbdom -- init 函数
- Snabbdom -- patch 函数
- 手写 -- 虚拟dom渲染
- Vue -- minVue
- vue3.x -- 源码分析
- 分析 -- reactivity
- 好文
- grpc -- 浏览器使用gRPC
- grcp-web -- 案例
- 待续