How to bring a gRPC defined API to the web browser

gRPC defaults to using HTTP/2 as the transport protocol, which is highly efficient for inter-service communication, but not all browsers natively support gRPC. To utilize gRPC APIs in web browsers, we can implement the following strategies:

1. Using gRPC-Web

gRPC-Web is a technology that enables web applications to directly communicate with backend gRPC services. It is not part of the gRPC standard, but it is developed by the same team and is widely supported and maintained.

Implementation Steps:

• Server-Side Adaptation: On the server side, use a gRPC-Web proxy (e.g., Envoy), which converts the browser's HTTP/1 requests into HTTP/2 format that the gRPC service can understand.
• Client-Side Implementation: On the client side, use the JavaScript client library provided by gRPC-Web to initiate gRPC calls. This library communicates with the Envoy proxy and handles request and response processing.

Example:

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. Using RESTful API as an Intermediary

If you do not want to implement gRPC logic directly in the browser or if your application already has an existing RESTful API architecture, you can build a REST API as an intermediary between the gRPC service and the web browser.

Implementation Steps:

• API Gateway/Service: Develop an API Gateway or a simple service that listens to HTTP/1 requests from the browser, converts them into gRPC calls, and then converts the responses back to HTTP format for the browser.
• Data Conversion: This approach requires data format conversion on the server side, such as converting JSON to protobuf.

Example:

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');
});

Summary

The choice of strategy depends on your specific requirements and existing architecture. gRPC-Web provides a direct method for browser clients to interact with gRPC services, while using REST API as an intermediary may be more suitable for scenarios requiring maintenance of an existing REST API.