gRPC-Web 项目教程

gRPC-Web 项目教程

grpc-webgRPC for Web Clients项目地址:https://gitcode.com/gh_mirrors/gr/grpc-web

项目介绍

gRPC-Web 是一个前沿的规范，它允许现代浏览器调用 gRPC 服务。gRPC 是一个基于 HTTP/2 的现代化协议，提供使用强类型二进制数据格式的 RPC 语义，支持多种编程语言（如 C++, C#, Golang, Java, Python, NodeJS, Objective-C 等）。gRPC-Web 使得前端开发者能够直接与后端 gRPC 服务进行交互，无需传统的 REST API 层。

项目快速启动

环境准备

确保你已经安装了以下工具：

• Node.js
• npm 或 yarn
• Docker（用于运行 Envoy 代理）

安装 gRPC-Web 客户端库

npm install grpc-web

定义服务

使用 Protocol Buffers 定义你的 gRPC 服务和消息类型。创建一个 echo.proto 文件：

syntax = "proto3";

package echo;

service EchoService {
  rpc Echo (EchoRequest) returns (EchoResponse);
}

message EchoRequest {
  string message = 1;
}

message EchoResponse {
  string message = 1;
}

生成客户端代码

使用 protoc 和 protoc-gen-grpc-web 插件生成客户端代码：

protoc -I=. --grpc-web_out=import_style=commonjs,mode=grpcwebtext:. echo.proto

配置 Envoy 代理

创建一个 envoy.yaml 文件来配置 Envoy 代理：

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.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: echo_service
                  max_stream_duration:
                    grpc_timeout_header_max: 0s
          http_filters:
          - name: envoy.filters.http.grpc_web
          - name: envoy.filters.http.router
  clusters:
  - name: echo_service
    connect_timeout: 0.25s
    type: LOGICAL_DNS
    lb_policy: ROUND_ROBIN
    http2_protocol_options: {}
    load_assignment:
      cluster_name: echo_service
      endpoints:
      - lb_endpoints:
        - endpoint:
            address:
              socket_address:
                address: localhost
                port_value: 9090

运行 Envoy 代理

使用 Docker 运行 Envoy 代理：

docker run -d -v $(pwd)/envoy.yaml:/etc/envoy/envoy.yaml -p 8080:8080 envoyproxy/envoy:v1.14.1

编写客户端代码

创建一个 index.js 文件来编写客户端代码：

const {EchoServiceClient} = require('./echo_grpc_web_pb');
const {EchoRequest} = require('./echo_pb');

const client = new EchoServiceClient('http://localhost:8080');

const request = new EchoRequest();
request.setMessage('Hello, gRPC-Web!');

client.echo(request, {}, (err, response) => {
  if (err) {
    console.error(err);
  } else {
    console.log(response.getMessage());
  }
});

grpc-webgRPC for Web Clients项目地址:https://gitcode.com/gh_mirrors/gr/grpc-web