Can gRPC be integrated into flutter-web?

Question

I tried to integrate gPRC into flutter-web, but it always failed. I don't know if there is a problem with my code or GRPC can't be integrated into flutter-web.

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

Here's my server-side code:

I have two questions. The first one is whether the GRPC can be integrated into fluter-web.? The second one is what libraries I need and whether there are any examples? thank you.

Solution

The short answer, yes you can.

---

For now, grpc-web need a web proxy in front of the gRPC server to translate the requests and responses to something the browser can use. See https://grpc.io/blog/state-of-grpc-web/ for details.

You can use Envoy as the web proxy.

Here the steps to use envoy:

1. set your web client channel in flutter

   GrpcWebClientChannel.xhr(Uri.parse('http://localhost:8080'));
   

2. set the server to listen on the following sample:

   path := "127.0.0.1:3001"
   

3. Install envoy from https://www.envoyproxy.io/

4. create configuration for envoy like the following example. Save it as 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

5. Run envoy with the configuration (sample in Linux box):

   $ envoy -c envoy.yaml
   

Now, try to run the flutter web client and server.

See https://github.com/sigurdm/grpc_web_flutter_example or https://github.com/grpc/grpc-web/tree/master/net/grpc/gateway/examples/helloworld

Comments

[abuabdillatief]

Hi, I have a question, what if we run it in GCP and we already have an NGINX, does it mean we'll 2 running ingress?