如何将gRPC定义的API带到web浏览器

gRPC默认使用HTTP/2作为传输协议，这对于服务间通信非常高效，但并不是所有浏览器都原生支持gRPC。要在web浏览器中使用gRPC API，我们可以采用以下几种策略：

1. 使用gRPC-Web

gRPC-Web 是一种使Web应用能够直接与后端gRPC服务通信的技术。它不是gRPC标准的一部分，但它由相同的团队开发，并得到广泛的支持和维护。

实现步骤：

• 服务端适配： 在服务端，需要使用gRPC-Web的代理（例如Envoy），这个代理会将浏览器的HTTP/1请求转换为gRPC服务可以理解的HTTP/2格式。
• 客户端实现： 在客户端，使用gRPC-Web提供的JavaScript客户端库来发起gRPC调用。这个库能够与Envoy代理通信，并处理请求与响应。

示例：

javascript
const {GreeterClient} = require('./generated/helloworld_grpc_web_pb');
const {HelloRequest} = require('./generated/helloworld_pb');

const client = new GreeterClient('https://your-envoy-url', null, null);

const request = new HelloRequest();
request.setName('World');

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

2. 使用RESTful API作为中介

如果不想直接在浏览器中处理gRPC逻辑，或者你的应用已经有现成的RESTful API架构，可以通过构建一个REST API作为gRPC服务和Web浏览器之间的中介。

实现步骤：

• API Gateway/服务： 开发一个API Gateway或者一个简单的服务，这个服务监听来自浏览器的HTTP/1请求，将这些请求转换为gRPC调用，然后再将响应转换回HTTP格式发送给浏览器。
• 数据转换： 这种方法需要在服务器端进行数据格式的转换，比如将JSON转换为protobuf。

示例： 假设有一个Node.js的Express应用作为中介：

javascript
const express = require('express');
const {GreeterClient} = require('./generated/helloworld_grpc_pb');
const app = express();
const client = new GreeterClient('localhost:50051', grpc.credentials.createInsecure());

app.get('/sayHello/:name', (req, res) => {
  const request = new HelloRequest();
  request.setName(req.params.name);

  client.sayHello(request, (error, response) => {
    if (error) {
      res.status(500).send(error);
      return;
    }
    res.send(response.getMessage());
  });
});

app.listen(3000, () => {
  console.log('Server is running at http://localhost:3000');
});

总结

选择哪种策略取决于你的具体需求和现有的架构。gRPC-Web提供了一种相对直接的方法，可以让浏览器客户端直接与gRPC服务交互，而使用REST API作为中介则可能更适合那些需要维持现有REST架构的场景。