哎哟喂，各位码农兄弟姐妹们，今天咱们不聊虚的，直接来点硬骨头啃一啃！你是不是也天天对着屏幕抓头发，想着怎么在浏览器里直接调用那个高大上的gRPC服务？是不是觉得这事儿简直比登天还难？告诉你吧，这确实让人头秃！大家dou知道gRPC是谷歌搞出来的神器， 2018年11月底那会儿正式发布的gRPC-Web本来以为Neng拯救世界，后来啊呢？前端JS那边还是半残废状态啊！根本就不支持HTTP/2协议！Git官网上的解答kan了就想摔键盘，这可咋整？难道我们就只Neng干瞪眼吗？当然不是！这时候必须要请出我们的救世主——Envoy代理，huo者那个什么gowebproxy之类的玩意儿来帮忙。

这该死的浏览器限制与协议之争

说实话，现在的网络环境真的是太复杂了。HTTP/2虽然好， 什么多路复用啊、头部压缩啊、流控制啊，听着就让人流口水，特bie是在那些高延迟huo者带宽像挤牙膏一样的网络上，性Neng提升那是杠杠的。gRPC就是基于这个搞起来的， 允许客户端和服务端之间建立双向流，这dui与实时性要求高的应用来说简直就是救命稻草。

吃瓜。 dan是！dan是啊！浏览器这个老古董，它就是不争气。你想直接在Web端用原生gRPC？Zuo梦去吧！主要原因是浏览器不支持HTTP/2的底层帧机制啊！这就好比你有一辆法拉利，后来啊前面有一条河，你过不去怎么办？你得造桥huo者找船啊！WebSocket就是那座桥！虽然它效率有时候被人诟病， 说串行化效率低，TCP的大宽路没利用上，不像HTTP/2那样Neng瞬间并发跑满带宽，但在弱网环境下它的断线重连逻辑简单啊！Neng第一时间连上啊！这才是王道嘛！

主流网络协议Neng力大乱斗

别担心... 为了让大家geng清楚咱们在选什么鬼东西， 我特意搞了个表，你们自己感受一下这几货的区别：

Envoy代理是怎么个事儿？

既然浏览器不行，那就得找个中间人。Envoy Proxy就是这个苦命的中间人。它不仅仅是个代理，它是微服务体系里的交通捕快啊！ 有啥说啥... 虽然不是直接关联项目，但在构建复杂的微服务时Envoy那是必须的。

它的原理其实也不难理解：Apphuo者网页发出来的是WebSocket请求huo者是经过包装的gRPC-Web请求， Envoy在中间拦住一kan，“哦豁，原来是去找后端gRPC服务的”，ran后它就把这层皮给扒了转身用纯正的HTTP/2去跟后端的C++、Java、NodeJShuo者Go写的服务去聊天。后端根本不知道前面是个啥浏览器，它只知道来了个标准的gRPC调用，划水。。

你kan这个配置文件片段：

我晕... `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: 8080 } filter_chains: - filters: - name: envoy.http_...`

换个赛道。 kan着是不是眼晕？我也晕！dan是没办法，这就是技术的代价。socket_address, port_value, filter_chains, 这些玩意儿少写一个标点符号dou不行。Docker转发端口的时候你也得小心点，别转错了地儿。

配置SSL证书的那些破事儿

何苦呢？ 对了千万别忘了SSL证书！现在的浏览器平安要求严得像个教导主任。你不配置成HTTPS协议，人家根本不让你玩WebSocket握手。申请SSL证书点击确定后还得去证书管理页面瞅一眼有没有创建成功。在域名管理里创建域名的时候一定要手抖着选成HTTPS协议。这一套流程下来感觉跑个马拉松dou累。

Poto文件定义与服务生成

谨记... 不管你用什么代理，核心还是那个`.proto`文件！这是接口描述语言，是规矩。 // Copyright 2015 gRPC authors. //..._grpc-web websocket ...` kan这注释里的版权信息dou还在呢。你得明确定义服务的方法和参数，ran后用Protocol Buffers工具去生成代码。 IDL: gRPC 使用IDL来定义服务接口和消息格式。 这就好比你去餐馆吃饭，得先kan菜单点菜一样。你不Neng进厨房自己炒菜吧？

boring 的代码生成步骤

虽然我hen想跳过这部分，但为了显得专业点还是得提一下。你要把proto文件扔给编译器，它会吐出一堆客户端和服务端的代码库。 var GBC = require ; new GBC . connect kankan这段JS代码，是不是觉得有点意思？这就是所谓的tong过WebSocket代理服务器将浏览器JavaScript上下文连接到标准GRPC服务wan全支持双向流传输哦！虽然听着hen玄乎，其实吧不就是传个字符串嘛！，啊这...。

Knative 与 Istio 的坑爹经历

再说点别的场景吧。有些倒霉蛋非要在Knative上部署WebSockethuo者gRPC。虽然说Knative默认就支持这俩货，但在使用中你会发现各种不顺心！大多时候dou是自己的程序有问题huo者是配置错误导致的真的想哭。 如guo你想用手动的方式配置Istio Gateway支持WebSocket就需要开启websocket Upgrade功Neng，内卷。。

听听我的碎碎念 业界标准到底是个啥？说白了就是走 app + grpc , webview + grpc-web 这个组合拳是Zui好的业界标准别瞎折腾了什么边缘节点代理的想法趁早打住足以了业务网页不是需要一直连接的不追求实时性干嘛要浪费资源维护长连接？ 如guo你要ZuoIM消息聊天、 实时通知、实时指令系统这些必须走WebSocket保证弱网下不断线可控；服务端之间走grpc就是我之前画的图app ---websocket ---边缘节点北京----grpc 广州-----websocket----app这样一个流程而其它API的调用业务逻辑dou走grpc不要搞边缘节点代理这个想法了足以了业务网页不是需要一直连接的不追求实时性业界的标准就是这么干的就是走 app + grpc webview + grpc-web 这个就是Zui好的业界标准... 你kan那个@improbable-eng/grpc-web提供了在Web端与gRPC服务通信的Neng力是gRPC-WebSocket-Proxy实际应用的关键组件还有那个GRPC-Bus WebSocket代理客户端安装npm install grpc-bus-websocket-client还要安装并运行用法new GBC.connect简直不要太方便，我无法认同...。

但这太麻烦了！其实Knative Serving自带了这个Neng力。本示例的完整代码放在...哎呀我忘了放哪了反正网上Neng搜到是一个基于 WebSocket实现的群聊的例子... Istio & Envoy 功Neng对照表 功Neng特性Istio GatewayKnative Serving Nginx Ingress WebSocket 支持需手动配置Upgrade头自动支持需proxy_set_header配置 gRPC 转发原生支持 grpc 协议路由支持 Activator 到 Pod 的 gRPC需特定模块支持较麻烦 流量管理Hysterix/Sentinel 等熔断限流丰富度一般但够用|极其强大 且有蓝绿金丝雀发布|简单粗暴 rewrite 规则写死人| |自动扩缩容|依赖HPA|那是强项 KPA 自动从0到1|依赖HPA响应慢| |配置复杂度|高 YAML 写到手抽筋|中等 hen多抽象掉了|中等 但规则繁琐| 到底该怎么选型？