基于Vue3+Ts+Vite项目中grpc-Web的应用以及其中的坑

最新推荐文章于 2025-04-16 09:55:23 发布

m0_74823595

最新推荐文章于 2025-04-16 09:55:23 发布

阅读量1k

点赞数 20

文章标签：前端

本文链接：https://blog.youkuaiyun.com/m0_74823595/article/details/144637047

版权

背景：

最近项目中有一个需求：在新项目中使用grpc进行前后端通信。我便基于此需求开始了新的研究。

首先我是想抄作业的，但是翻了很多相关grpc-web的文章，写的都不是很详细，再涉及到grpc-web服务的升级迭代，生成的代码有了变动，导致我根本没找到什么可以复用的有效资料。

没办法，只能自己搞了！文章会有点长，耐心看完应该会有些帮助。如果有大佬看到可以留下些意见，对grpc和go语言都是现学现卖的小白阶段。

其实原理还是比较简单的。如果还不了解grpc的同学可以自己去搜索一下相关知识，这个在度娘那能搜到很多。我在这里简要概括一下：

grpc释义

gRPC 是 Google 开发的一个高效的、开源的远程过程调用 (Remote Procedure Call, RPC) 框架，旨在跨网络分布式系统中实现不同服务之间的通信。它建立在 HTTP/2 协议之上，利用 Protocol Buffers 作为序列化协议，具有以下几个特点：

跨语言支持
gRPC 支持多种编程语言，包括 Go、Java、Python、C++、Node.js 等。这使得开发者可以用不同的语言编写各自的服务，同时通过 gRPC 轻松进行通信。
高效的二进制传输
gRPC 使用 Protocol Buffers (Protobuf) 作为其接口定义语言 (IDL) 和数据序列化格式。相比于传统的基于文本的序列化格式（如 JSON 或 XML），Protobuf 是一种高效的二进制格式，具有更小的消息体积和更快的序列化/反序列化速度。
HTTP/2 支持
gRPC 使用 HTTP/2 进行通信，具备双向流、多路复用、头部压缩等特性，使得它在需要高性能、低延迟的应用场景中具有显著优势。
多种通信模式
gRPC 支持多种通信模式，不仅可以实现简单的一对一的请求-响应模型，还支持：

服务端流式 RPC：客户端发送一个请求，服务端可以返回多个响应。
客户端流式 RPC：客户端发送多个请求，服务端返回一个响应。
双向流式 RPC：客户端和服务端可以互相发送多个消息，形成流式通信。
5. 强类型定义
gRPC 中的服务及消息都需要通过 Protocol Buffers 来定义，提供了强类型的接口，减少了通信中的潜在错误，并且具有更好的可维护性和扩展性。

gRPC-Web 及其与 gRPC 的关系

虽然 gRPC 非常强大，但它原生是为后端服务之间的通信设计的，使用 HTTP/2 和 Protobuf 可能无法直接在浏览器环境中兼容。浏览器对 HTTP/2 和某些传输方式的支持较为有限，而且通常不能直接处理 Protobuf 编码的二进制数据。这时，gRPC-Web 出现了。

gRPC-Web 是 gRPC 的一个扩展，它允许前端应用（如在浏览器中运行的 JavaScript 应用）通过 gRPC 与后端服务通信。gRPC-Web 作为一种精简的 gRPC 实现，它通常配合一个代理（如 Envoy）使用，将浏览器的 HTTP/1.x 或 HTTP/2 请求转换为标准的 gRPC 格式，然后再发送到后端 gRPC 服务器。

gRPC-Web 的特点

兼容浏览器
gRPC-Web 让 Web 应用可以使用大部分 gRPC 的功能，虽然有些特性（如双向流）在 gRPC-Web 中受限，但它可以处理基本的请求-响应和单向流。

无需更改后端
后端仍然可以使用标准的 gRPC 服务，gRPC-Web 通过代理进行转换，无需对现有的 gRPC 服务进行重大的修改。

减少客户端复杂性
gRPC-Web 提供了简化的客户端 API，前端开发者可以像使用传统的 REST API 一样调用后端服务，但享受 gRPC 的高性能和高效的数据传输。

gRPC 和 gRPC-Web 的关系总结
gRPC 是一种后端服务之间高效通信的框架，支持多种语言和多种通信模式。
gRPC-Web 是 gRPC 的一个精简版本，专门为浏览器环境设计，允许前端通过 HTTP/1.x 或 HTTP/2 与 gRPC 后端服务通信。
它们共同构成了一个强大的生态系统，让前后端之间的通信更加高效和安全，同时保持了现代 Web 应用的开发灵活性。

而我们的需求主要是为了前后端统一用一套接口规范。即同一套proto文件，来生成前后端的接口。

概念解释清楚了，开始操作，大概可以分为以下几个部分：

定义服务和消息类型
使用 Protocol Buffers (Protobuf) 定义 gRPC 服务及其请求和响应消息格式。这些定义描述了客户端和服务端如何通信，类似于 API 的契约。
生成客户端和服务端代码
基于 Protobuf 文件，通过 protoc 编译器生成服务端和客户端的代码。对于前端 gRPC-Web 通信，客户端代码需要使用 gRPC-Web 的插件生成 TypeScript 或 JavaScript 文件。
实现后端服务
在服务端实现 gRPC 服务逻辑。根据生成的代码，编写服务端的业务逻辑处理请求，并返回相应的响应。这个过程与标准 gRPC 服务实现相同。
设置代理（如 Envoy）
由于浏览器无法直接与 gRPC 服务通信，通常需要配置一个代理（如 Envoy）。代理将前端发送的 gRPC-Web 请求转换为标准 gRPC 请求，并将响应转发回浏览器

最低0.47元/天解锁文章