关于 gRPC-Web 的应用

示例项目

GitHub - gaoyang/example-grpc-web: An example of communication using the gRPC-web solution.

An example of communication using the gRPC-web solution. - GitHub - gaoyang/example-grpc-web: An example of communication using the gRPC-web solution.

https://github.com/gaoyang/example-grpc-web

关于 gRPC-Web 的应用

什么是 gRPC-Web？

注意: gRPC-web 不支持客户端流和双向流，但是支持服务端数据流。

定义 Proto 文件

Protocol Buffers

Protocol Buffers are a language-neutral, platform-neutral extensible mechanism for serializing structured data.

https://protobuf.dev/

前端基于 vite 的示例

npm install grpc-web

module.exports = {
  // ...
  module: {
    rules: [
      // ...
      {
        test: /\\.proto$/,
        loader: "@grpc/proto-loader",
      },
    ],
  },
};

import { GreeterClient } from "./proto/greeter_pb_service.js";
import { HelloRequest } from "./proto/greeter_pb.js";

const client = new GreeterClient("<http://localhost:8080>");
const request = new HelloRequest();
request.setName("World");

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

服务端基于 .NET 的示例

• Grpc.AspNetCore.Web

• Google.Protobuf

• Google.Api.CommonProtos

public void ConfigureServices(IServiceCollection services)
{
    services.AddGrpc();
    services.AddGrpcWeb(options => options.GrpcWebEnabled = true);
}

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    // ...
    app.UseRouting();
    app.UseGrpcWeb();
    app.UseEndpoints(endpoints =>
    {
        endpoints.MapGrpcService<MyService>().EnableGrpcWeb();
    });
}

public class MyService : Greeter.GreeterBase
{
    public override Task<HelloReply> SayHello(HelloRequest request, ServerCallContext context)
    {
        return Task.FromResult(new HelloReply
        {
            Message = "Hello " + request.Name
        });
    }
}

总结