Can gRPC be integrated into flutter-web? - go

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.

Answer 1

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:
set your web client channel in flutter
GrpcWebClientChannel.xhr(Uri.parse('http://localhost:8080'));
set the server to listen on the following sample:
path := "127.0.0.1:3001"
Install envoy from https://www.envoyproxy.io/
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
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