Web gRPC 教程

更新时间: 2019-07-05 12:52

This tutorial provides a basic introduction on how to use gRPC-Web from browsers.

By walking through this example you’ll learn how to:

  • Define a service in a .proto file.
  • Generate client code using the protocol buffer compiler.
  • Use the gRPC-Web API to write a simple client for your service.

It assumes a passing familiarity with protocol buffers.

Why use gRPC and gRPC-Web?

With gRPC you can define your service once in a .proto file and implement clients and servers in any of gRPC’s supported languages, which in turn can be run in environments ranging from servers inside Google to your own tablet - all the complexity of communication between different languages and environments is handled for you by gRPC. You also get all the advantages of working with protocol buffers, including efficient serialization, a simple IDL, and easy interface updating. gRPC-Web lets you access gRPC services built in this manner from browsers using an idiomatic API.

Define the Service

The first step when creating a gRPC service is to define the service methods and their request and response message types using protocol buffers. In this example, we define our EchoService in a file called echo.proto. For more information about protocol buffers and proto3 syntax, please see the protobuf documentation.

message EchoRequest {
  string message = 1;
}

message EchoResponse {
  string message = 1;
}

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

Implement gRPC Backend Server

Next, we implement our EchoService interface using Node in the backend gRPC EchoServer. This will handle requests from clients. See the file node-server/server.js for details.

You can implement the server in any language supported by gRPC. Please see the main page for more details.

function doEcho(call, callback) {
  callback(null, {message: call.request.message});
}

Configure the Envoy Proxy

In this example, we will use the Envoy proxy to forward the gRPC browser request to the backend server. You can see the complete config file in envoy.yaml

To forward the gRPC requests to the backend server, we need a block like this:

  listeners:
  - name: listener_0
    address:
      socket_address: { address: 0.0.0.0, port_value: 8080 }
    filter_chains:
    - filters:
      - name: envoy.http_connection_manager
        config:
          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 }
          http_filters:
          - name: envoy.grpc_web
          - name: envoy.router
  clusters:
  - name: echo_service
    connect_timeout: 0.25s
    type: logical_dns
    http2_protocol_options: {}
    lb_policy: round_robin
    hosts: [{ socket_address: { address: node-server, port_value: 9090 }}]

You may also need to add some CORS setup to make sure the browser can request cross-origin content.

In this simple example, the browser makes gRPC requests to port :8080. Envoy forwards the request to the backend gRPC server listening on port :9090.

Generate Protobuf Messages and Service Client Stub

To generate the protobuf message classes from our echo.proto, run the following command:

$ protoc -I=$DIR echo.proto \
  --js_out=import_style=commonjs:$OUT_DIR

The import_style option passed to the --js_out flag makes sure the generated files will have CommonJS style require() statements.

To generate the gRPC-Web service client stub, first you need the gRPC-Web protoc plugin. To compile the plugin protoc-gen-grpc-web, you need to run this from the repo’s root directory:

$ cd grpc-web
$ sudo make install-plugin

To generate the service client stub file, run this command:

$ protoc -I=$DIR echo.proto \
  --grpc-web_out=import_style=commonjs,mode=grpcwebtext:$OUT_DIR

In the --grpc-web_out param above: - mode can be grpcwebtext (default) or grpcweb - import_style can be closure (default) or commonjs

Our command generates the client stub, by default, to the file echo_grpc_web_pb.js.

Write JS Client Code

Now you are ready to write some JS client code. Put this in a client.js file.

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

var echoService = new EchoServiceClient('http://localhost:8080');

var request = new EchoRequest();
request.setMessage('Hello World!');

echoService.echo(request, {}, function(err, response) {
  // ...
});

You will need a package.json file

{
  "name": "grpc-web-commonjs-example",
  "dependencies": {
    "google-protobuf": "^3.6.1",
    "grpc-web": "^0.4.0"
  },
  "devDependencies": {
    "browserify": "^16.2.2",
    "webpack": "^4.16.5",
    "webpack-cli": "^3.1.0"
  }
}

Compile the JS Library

Finally, putting all these together, we can compile all the relevant JS files into one single JS library that can be used in the browser.

$ npm install
$ npx webpack client.js

Now embed dist/main.js into your project and see it in action!

精益思想

精益思想

(美)詹姆斯 P.沃麦克(James P.Womack)、(英)丹尼尔 T.琼斯(Daniel T.Jones) / 沈希瑾、张文杰、李京生 / 机械工业出版社 / 2011-4 / 48.00元

打算尝试精益的人,该怎么做? 已经实行精益的人,下一步怎么办? 本书包含了最新的精益理论、方法和工具,一一解答上述问题。 这是目前关于流程再造最好的书,也是最好读的。——《高业周刊》 本书中文简体字版由FreePress通过AiWA授权机械工业出版社在中国大陆独家出版发行。未经出版者书面许可,不得以任何方式抄袭、复制或节录本书中的任何部分。 《精益思想》于1996年秋......一起来看看 《精益思想》 这本书的介绍吧!

JSON 在线解析

JSON 在线解析

在线 JSON 格式化工具

RGB转16进制工具

RGB转16进制工具

RGB HEX 互转工具

SHA 加密

SHA 加密

SHA 加密工具