首页 > Golang > Go问答

可以将是否可以在Flutter-web中集成gRPC？

来源：stackoverflow

时间：2024-03-20 10:54:28 387浏览收藏

在 Flutter-Web 中集成 gRPC 是可行的。通过使用 gRPC-Web 和网络代理（如 Envoy），可以将 gRPC 请求和响应转换为浏览器可理解的格式。要设置 gRPC-Web，需要在 Flutter 中配置客户端通道，设置服务器侦听，安装 Envoy 并创建 Envoy 配置。该过程涉及在客户端和服务器端进行配置和安装。通过遵循这些步骤，开发人员可以将 gRPC 集成到 Flutter-Web 应用程序中，从而实现跨平台通信和远程服务调用。

问题内容

我尝试将gprc集成到flutter-web中，但总是失败。不知道是我的代码有问题还是grpc无法集成到flutter-web中。

dependencies:
  flutter:
    sdk: flutter
  grpc: ^2.1.3
  protobuf: ^1.0.1

这是我的服务器端代码：

我有两个问题。第一个是grpc是否可以集成到fluter-web中？第二个是我需要什么库，有没有例子？谢谢。

解决方案

简短的回答，是的，你可以。

目前，grpc-web 需要 grpc 服务器前面的 web 代理来将请求和响应转换为浏览器可以使用的内容。详情请见https://grpc.io/blog/state-of-grpc-web/。

您可以使用Envoy作为网络代理。

以下是使用 envoy 的步骤：

在 flutter 中设置您的 web 客户端通道

grpcwebclientchannel.xhr(uri.parse('http://localhost:8080'));

将服务器设置为侦听以下示例：
```
path := "127.0.0.1:3001"
```
从 https://www.envoyproxy.io/ 安装 envoy
为 envoy 创建配置，如下例所示。将其另存为 envoy.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: 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: 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,x-accept-content-transfer-encoding,x-accept-response-streaming,x-user-agent,x-grpc-web,grpc-timeout
                max_age: "1728000"
                expose_headers: id,token,grpc-status,grpc-message
          http_filters:
          - name: envoy.filters.http.grpc_web
          - name: envoy.filters.http.cors
          - name: envoy.filters.http.router
  clusters:
  - name: greeter_service
    connect_timeout: 0.25s
    type: logical_dns
    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: 0.0.0.0
                    port_value: 3001

使用配置运行 envoy（linux 框中的示例）：
```
$ envoy -c envoy.yaml
```

现在，尝试运行 flutter web 客户端和服务器。

请参阅 https://github.com/sigurdm/grpc_web_flutter_example 或 https://github.com/grpc/grpc-web/tree/master/net/grpc/gateway/examples/helloworld

理论要掌握，实操不能落！以上关于《可以将是否可以在Flutter-web中集成gRPC？》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！

声明：本文转载于：stackoverflow 如有侵犯，请联系study_golang@163.com删除