gRPC-Web 初窺

什麼是 gRPC

在gRPC中，客戶端應用程序能夠直接調用不一樣計算機上的服務器應用程序上的方法，能夠更輕鬆地建立分佈式應用程序和服務。gRPC基於定義服務的思想，指定能夠使用其參數和返回類型遠程調用的方法。在服務器端，服務器實現此接口並運行gRPC服務器來處理客戶端調用。在客戶端，它提供與服務器相同的方法

什麼是 Protocol Buffers

Protocol Buffers是一種與語言無關，平臺無關的可擴展機制，用於序列化結構化數據

Web 上的實踐

準備工做

1. 須要安裝protobuf

mac 可用用 homebrew 安裝，我裝的版本爲 3.7.1

brew install protobuf
複製代碼

2. 安裝protoc-gen-grpc-web

$ sudo mv ~/Downloads/protoc-gen-grpc-web-1.0.6-darwin-x86_64 /usr/local/bin/protoc-gen-grpc-web
$ chmod +x /usr/local/bin/protoc-gen-grpc-web
複製代碼

2. 安裝grpc-web和google-protobuf

yarn add grpc-web
yarn add google-protobuf
複製代碼

開始實踐

1. 定義 proto 文件

// proto 版本
syntax = "proto3";

// 包名
package grpc;

// 定義請求參數結構
message RequestDTO {
    string id = 1;
}

// 定義返回結構
message ResponseBO {
}

// 定義請求方法
service DemoService {
    // 獲取用戶普通話主頁
    rpc GetInfo (RequestDTO) returns (ResponseBO) {
    }
}
複製代碼

proto 文件能夠找後端的同事要。這裏有個坑，import 路徑不能像服務端的包名同樣，我就只有放在一個目錄裏面，直接引入文件名import 'xxx.proto'

2. 編譯 js 和 client 文件

# js
protoc -I=$DIR *.proto --js_out=import_style=commonjs:$OUT_DIR
# grpc-web
protoc -I=$OUT_DIR *.proto --grpc-web_out=import_style=commonjs,mode=grpcweb:$OUT_DIR
複製代碼

$DIR爲你 proto 文件所在路徑，$OUT_DIR爲輸出路徑，我用的當前文件. import_style採用的前端比較經常使用的commonjs mode支持文本和二進制，我用的grpcweb，也能夠用grpctext

3. 編寫 js 代碼

// 引入路徑根據你生成文件的路徑作相應的調整
const { DemoServiceClient } = require('./proto/grpc/service_grpc_web_pb');
const { RequestDTO } = require('./proto/grpc/demo.js');

const client = new DemoServiceClient('https://local.hongkazhijia.com:3000');

const main = () => {
  const requestDTO = new RequestDTO();
  requestDTO.setId('test');

  const getInfo = client.getInfo(requestDTO, {}, (err, response) => {
    if (err) {
      console.log(err);
    } else {
      console.log(response);
    }
  });
  getInfo.on('status', status => console.log('status', status));
  getInfo.on('data', data => console.log('data', data));
  getInfo.on('end', end => console.log('end', end));
  getInfo.on('error', error => console.log('error', error));
};

export { main };
複製代碼

4. 瀏覽器跨域問題

開發時調用的服務端的接口和本地地址確定會有跨域問題平時開發的時候用的 webpack-devServer 作反向代理，由於gRPC基於http2，因此在配置文件裏面設置http2 = true(注意http2只支持node < 10)

DemoServiceClient 的地址指向本地，而後添加一個 proxy

// grcp.DemoService 爲你的package名 + service名稱，不知道的話先直接請求一次直接在console裏面看就好了
      '/grcp.DemoService': {
        target: 'http://xxx.xx.xx.xx:xxxx',
        changeOrigin: true,
      },
複製代碼

至此整個流程就跑通啦，你就能在控制檯看見後端返回的結果了

剩下的就是組織代碼，怎麼更好的集成在本身的項目中了