Golang使用gRPC-Web实现前端通信-Golang-PHP中文网

gRPC-Web代理是前端与Go后端gRPC服务通信的关键桥梁，它将浏览器的HTTP/1.1请求转换为gRPC后端的HTTP/2协议，实现协议转换、CORS处理和双向兼容，确保前端可通过生成的客户端桩安全调用强类型的gRPC服务。

golang使用grpc-web实现前端通信

Golang使用gRPC-Web实现前端通信的核心在于，它为浏览器端提供了一种高效、强类型的方式来与后端gRPC服务交互。尽管浏览器本身不直接支持gRPC的HTTP/2协议，gRPC-Web通过引入一个代理层，将浏览器发出的HTTP/1.1请求转换成gRPC后端能理解的HTTP/2格式，从而让前端也能享受到Protocol Buffers带来的类型安全和序列化效率，以及gRPC的服务定义优势。

解决方案

要实现Golang后端与前端通过gRPC-Web通信，这通常涉及几个关键步骤，说实话，第一次搭起来确实需要点耐心，因为涉及多语言的代码生成和代理配置。

首先，你需要定义你的服务接口和消息结构。这通过Protocol Buffers（通常是

.proto

登录后复制

文件）来完成。这是一个例子：

// proto/myservice.proto
syntax = "proto3";

package myservice;

option go_package = "./myservice";

service MyService {
  rpc SayHello (HelloRequest) returns (HelloResponse);
  rpc StreamMessages (StreamRequest) returns (stream StreamResponse); // 示例：服务器流式
}

message HelloRequest {
  string name = 1;
}

message HelloResponse {
  string message = 1;
}

message StreamRequest {
  string topic = 1;
}

message StreamResponse {
  string content = 1;
  int32 sequence = 2;
}

登录后复制

接下来是代码生成。你需要为Golang后端和前端（通常是JavaScript或TypeScript）生成相应的代码。

立即学习“go语言免费学习笔记（深入）”；

对于Golang，使用

protoc

登录后复制

和

protoc-gen-go

登录后复制

、

protoc-gen-go-grpc

登录后复制

：

protoc --go_out=. --go_opt=paths=source_relative \
       --go-grpc_out=. --go-grpc_opt=paths=source_relative \
       proto/myservice.proto

登录后复制

这会生成

myservice.pb.go

登录后复制

（消息定义）和

myservice_grpc.pb.go

登录后复制

（服务接口和桩）。然后，在Go中实现你的服务：

// server/main.go
package main

import (
    "context"
    "fmt"
    "log"
    "net"
    "time"

    "google.golang.org/grpc"
    "google.golang.org/grpc/codes"
    "google.golang.org/grpc/status"

    pb "your_module_path/proto" // 替换为你的模块路径
)

type myServiceServer struct {
    pb.UnimplementedMyServiceServer
}

func (s *myServiceServer) SayHello(ctx context.Context, in *pb.HelloRequest) (*pb.HelloResponse, error) {
    log.Printf("Received: %v", in.GetName())
    return &pb.HelloResponse{Message: "Hello " + in.GetName()}, nil
}

func (s *myServiceServer) StreamMessages(in *pb.StreamRequest, stream pb.MyService_StreamMessagesServer) error {
    log.Printf("Stream request for topic: %s", in.GetTopic())
    for i := 0; i < 5; i++ {
        if stream.Context().Err() != nil {
            log.Println("Client disconnected during stream.")
            return status.Errorf(codes.Canceled, "Stream cancelled by client")
        }
        msg := fmt.Sprintf("Message %d for topic %s", i+1, in.GetTopic())
        log.Printf("Sending: %s", msg)
        if err := stream.Send(&pb.StreamResponse{Content: msg, Sequence: int32(i + 1)}); err != nil {
            log.Printf("Error sending stream message: %v", err)
            return err
        }
        time.Sleep(time.Second)
    }
    return nil
}

func main() {
    lis, err := net.Listen("tcp", ":50051")
    if err != nil {
        log.Fatalf("failed to listen: %v", err)
    }
    s := grpc.NewServer()
    pb.RegisterMyServiceServer(s, &myServiceServer{})
    log.Printf("server listening at %v", lis.Addr())
    if err := s.Serve(lis); err != nil {
        log.Fatalf("failed to serve: %v", err)
    }
}

登录后复制

对于前端，你需要

protoc-gen-grpc-web

登录后复制

。这通常需要Node.js环境。

# 安装 protoc-gen-grpc-web
npm install -g grpc-web
# 或者 go install github.com/grpc/grpc-web/protoc-gen-grpc-web@latest

# 生成前端代码 (JavaScript/TypeScript)
protoc --js_out=import_style=commonjs,binary:. \
       --grpc-web_out=import_style=typescript,mode=grpcwebtext:. \
       proto/myservice.proto

登录后复制

这里

mode=grpcwebtext

登录后复制

是一个常见的选择，它将二进制数据编码为Base64，更易于调试和通过HTTP/1.1传输。

核心的一环是gRPC-Web代理。浏览器无法直接与gRPC（HTTP/2）服务通信，所以需要一个中间代理来转换协议。常见的选择是Envoy代理，或者你也可以用

grpcwebproxy

登录后复制

这个Go编写的简单代理。代理会监听HTTP/1.1请求，将其转换为HTTP/2并转发给Go gRPC服务，然后将响应反向转换回HTTP/1.1给浏览器。

最后，前端代码会使用生成的客户端桩来调用后端服务：

// frontend/src/App.js (示例，使用React)
import React, { useEffect, useState } from 'react';
import { MyServiceClient } from './proto/MyserviceServiceClientPb'; // 假设生成路径
import { HelloRequest, StreamRequest } from './proto/Myservice_pb'; // 消息定义

const client = new MyServiceClient('http://localhost:8080', null, null); // 8080是代理端口

function App() {
  const [greeting, setGreeting] = useState('');
  const [streamMessages, setStreamMessages] = useState([]);

  useEffect(() => {
    // 调用 SayHello
    const request = new HelloRequest();
    request.setName('World from gRPC-Web');
    client.sayHello(request, {}, (err, response) => {
      if (err) {
        console.error('Error calling SayHello:', err);
        return;
      }
      setGreeting(response.getMessage());
    });

    // 调用 StreamMessages (服务器流式)
    const streamReq = new StreamRequest();
    streamReq.setTopic('updates');
    const stream = client.streamMessages(streamReq, {});
    stream.on('data', (response) => {
      setStreamMessages(prev => [...prev, response.getContent()]);
    });
    stream.on('end', () => {
      console.log('Stream finished.');
    });
    stream.on('error', (err) => {
      console.error('Stream error:', err);
    });

    // 清理流
    return () => {
      stream.cancel();
    };
  }, []);

  return (
    <div>
      <h1>gRPC-Web Demo</h1>
      <p>Greeting: {greeting}</p>
      <h2>Stream Messages:</h2>
      <ul>
        {streamMessages.map((msg, index) => (
          <li key={index}>{msg}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;

登录后复制

这样一套流程下来，你就可以在前端愉快地调用Go后端提供的gRPC服务了。

gRPC-Web代理在整个架构中扮演什么角色？

gRPC-Web代理在整个通信链条中扮演着一个至关重要的“翻译官”角色，它不是可有可无的，而是架构中不可或缺的一环。简单来说，浏览器目前只支持HTTP/1.1协议，而原生的gRPC服务是基于HTTP/2协议构建的。这就导致了一个协议上的鸿沟，浏览器无法直接与gRPC服务对话。

代理的作用就在于弥补这个鸿沟。当浏览器（例如你的React应用）通过

fetch

登录后复制

或

XMLHttpRequest

登录后复制

发出一个请求时，它实际上是发送了一个HTTP/1.1请求，这个请求的目标就是gRPC-Web代理。代理接收到这个HTTP/1.1请求后，会对其进行解析，将其转换为符合gRPC协议规范的HTTP/2请求，然后再转发给后端的Go gRPC服务。后端服务处理完请求并返回gRPC响应后，代理会再次介入，将HTTP/2的gRPC响应转换回浏览器能理解的HTTP/1.1格式（通常是Base64编码的Protobuf二进制数据），并将其发送回浏览器。

此外，代理还经常负责处理CORS（跨域资源共享）问题。因为前端应用通常运行在与gRPC服务不同的域或端口上，没有代理的CORS配置，浏览器会直接拒绝跨域请求。代理可以配置适当的CORS头，允许前端访问后端服务。所以，它不仅仅是协议转换，更是前端与后端gRPC服务之间的一个安全、兼容的桥梁。我个人觉得，理解了代理的这层作用，整个gRPC-Web的架构就清晰多了。

在实际项目中，使用gRPC-Web有哪些常见的“坑”或注意事项？

在实际项目中落地gRPC-Web，确实会遇到一些小“坑”，或者说需要提前注意的地方，避免后期返工。我个人在实践中就踩过一些：

CORS配置是常态：这是最常见的问题。前端和gRPC-Web代理（以及代理和后端gRPC服务之间）很可能存在跨域。你需要确保代理正确配置了CORS头，允许前端域的请求。如果你的代理是Envoy，这需要Envoy的CORS过滤器配置；如果是
```
grpcwebproxy
```
登录后复制
，它通常有内置的CORS选项。一旦CORS没配好，浏览器控制台就会报错，请求根本发不出去。
流式传输的限制：gRPC原生支持四种流式传输（单向、客户端流、服务器流、双向流）。但在gRPC-Web的世界里，由于浏览器HTTP/1.1的限制，客户端流和双向流通常是不支持的，或者说实现起来非常复杂，需要一些hacky的解决方案。服务器流式传输是支持的，但它依赖于HTTP/1.1的chunked encoding和trailer headers，这意味着一些旧的代理或网络设备可能会有问题。如果你的业务逻辑强依赖双向流，可能需要考虑WebSocket或其他方案。我记得有次想用客户端流上传大文件，结果发现gRPC-Web默认不支持，最后还是回到了传统的HTTP分块上传。

微信 WeLM
WeLM不是一个直接的对话机器人，而是一个补全用户输入信息的生成模型。

33

查看详情
调试不如REST直观：当你在浏览器开发者工具的网络面板中查看gRPC-Web请求时，你不会看到像RESTful API那样清晰的JSON结构。请求和响应体通常是Base64编码的二进制数据（如果你用的是
```
grpcwebtext
```
登录后复制
模式），需要手动解码和解析Protobuf才能看懂。这无疑增加了调试的复杂性，需要一些专门的工具或技巧（比如浏览器插件）。
Protobuf与JavaScript/TypeScript类型映射：虽然Protobuf提供了强类型，但它到JavaScript/TypeScript的映射可能不如你想象的那么完美，尤其是在处理枚举、
```
oneof
```
登录后复制
字段或
```
Any
```
登录后复制
类型时。生成的JS/TS代码可能需要一些适应和封装才能更好地融入你的前端代码风格。比如，
```
oneof
```
登录后复制
字段在JS中通常表现为一系列
```
hasXxx()
```
登录后复制
和
```
getXxx()
```
登录后复制
方法，而不是一个直接的联合类型。
构建流程的复杂度：在项目中引入gRPC-Web，意味着你的构建流程会变得更复杂一点。你需要确保
```
protoc
```
登录后复制
及其插件（
```
protoc-gen-go
```
登录后复制
、
```
protoc-gen-go-grpc
```
登录后复制
、
```
protoc-gen-grpc-web
```
登录后复制
）都在正确的位置，并且前端和后端都能在各自的构建阶段正确执行代码生成。自动化这个过程很重要，比如通过Makefile、npm scripts或者CI/CD流水线。
错误处理：gRPC的错误模型（状态码和元数据）在gRPC-Web中会通过HTTP状态码和响应体进行映射。前端需要知道如何解析这些信息来判断错误类型。例如，一个gRPC的
```
UNAUTHENTICATED
```
登录后复制
错误可能会映射成HTTP 401，但具体的错误信息可能在响应体中。

这些都不是无法克服的问题，但了解它们能让你在项目初期就做好准备，少走弯路。

如何将gRPC-Web与React/Vue等前端框架集成？

将gRPC-Web与React、Vue这类现代前端框架集成，主要围绕着如何方便地在组件中调用生成的客户端代码，并管理请求的生命周期和状态。这个过程的核心在于利用

protoc-gen-grpc-web

登录后复制

生成的JavaScript或TypeScript客户端桩。

首先，确保你的前端项目能够正确地执行

protoc

登录后复制

命令，生成

_pb.js

登录后复制

（Protobuf消息定义）和

_grpc_web_pb.js

登录后复制

（gRPC-Web客户端桩）文件。这些文件应该被放置在你的前端项目可以导入（import）的地方，例如

src/proto

登录后复制

目录下。通常，我会把这个生成步骤放到

package.json

登录后复制

的

scripts

登录后复制

里，比如一个

prebuild

登录后复制

或

generate-proto

登录后复制

脚本，这样每次构建或开发前都能保证代码是最新的。

在React或Vue组件中，你首先需要导入生成的客户端类和消息定义：

// 在你的组件文件顶部
import { MyServiceClient } from './proto/myservice_grpc_web_pb'; // 客户端服务类
import { HelloRequest, StreamRequest } from './proto/myservice_pb'; // 消息请求/响应类

登录后复制

接着，实例化你的gRPC-Web客户端。客户端需要知道你的gRPC-Web代理的地址。通常，这个地址会是一个环境变量或者配置文件中的值：

// 客户端实例化，通常在应用启动时或者一个服务模块中进行
const client = new MyServiceClient('http://localhost:8080', null, null); // 假设代理运行在8080端口

登录后复制

这里的

null, null

登录后复制

是可选的凭证和选项参数，一般情况下可以留空。

现在，你就可以在组件的生命周期方法（React的

useEffect

登录后复制

，Vue的

mounted

登录后复制

）或者事件处理函数中调用后端服务了。

对于一元（Unary）RPC调用：

// React示例
useEffect(() => {
  const request = new HelloRequest();
  request.setName('React User');

  client.sayHello(request, {}, (err, response) => {
    if (err) {
      console.error('Error calling SayHello:', err.code, err.message);
      // 根据err.code处理不同类型的错误，例如显示错误消息
      return;
    }
    // 更新组件状态
    setGreeting(response.getMessage());
  });
}, []); // 空依赖数组表示只运行一次

登录后复制

这里

{}

登录后复制

是可选的元数据（headers），你可以传递一些认证token等信息。回调函数会接收错误对象和响应对象。

对于服务器流式（Server Streaming）RPC调用：

// React示例
useEffect(() => {
  const streamReq = new StreamRequest();
  streamReq.setTopic('news');
  const stream = client.streamMessages(streamReq, {});

  stream.on('data', (response) => {
    // 每次收到新数据时更新状态
    setStreamMessages(prev => [...prev, response.getContent()]);
  });

  stream.on('end', () => {
    console.log('Stream finished.');
  });

  stream.on('error', (err) => {
    console.error('Stream error:', err.code, err.message);
    // 处理流错误
  });

  // 在组件卸载时取消流，避免内存泄漏
  return () => {
    console.log('Cancelling stream...');
    stream.cancel();
  };
}, []);

登录后复制

流式调用会返回一个可订阅的流对象，你可以监听