vue2.0项目集成Web-gRPC

日常记录一下项目中grpc的应用

一.准备工作

    1、安装grpc-web和google-protobuf，如下

npm i grpc-web 
npm i google-protobuf

    2、安装 protoc ，选择适用于自己系统的版本安装

    ![](https://img-blog.csdnimg.cn/3de1bbb1a2154097814031456e6ba96d.png)

      配置环境变量，以上下载安装/解压完后，在系统设置中配置环境变量，具体步骤如下：

            右键我的电脑，选择属性，在弹出的页面中选择“高级系统设置”，

    选择环境变量

    在系统变量里找到“Path”，选择编辑，添加路径指向上述安装的文件夹bin文件

     检验protoc是否安装成功：

     3、安装 protoc-gen-grpc-web （用于生成web.js的工具），选择适用于自己系统的版本安装

    ![](https://img-blog.csdnimg.cn/c42b5967592e4360be5687275e9a5427.png)

     或者直接执行

npm i -g protoc-gen-js protoc-gen-grpc-web

二.编写测试demo

    我是在src文件夹下新建了proto文件夹，编写example.proto文件：

// 步骤 1. 基本配置
// ================================================ ====
// 第一行告诉编译器这个文件中使用了什么语法。
// 第二行属于命名空间，用来防止不同的消息类型有命名冲突

syntax = "proto3";
package example;

// 步骤 2. 定义消息结构
// ================================================ ====
// 这定义了请求负载。 此处进入消息的每个属性都与其类型一起定义。
// 需要为每个属性分配一个唯一的编号，称为标签。 协议缓冲区使用此标记来表示属性，而不是使用属性名称。
// 所以，不像 JSON 我们每次都会传递属性名称 name，protocol buffer 会使用数字 1 来表示 name。 响应负载定义类似于请求。

message ExampleRequest {
  string name = 1;
}

message ExampleResponse {
  string message = 1;
}

// 步骤 3. 定义服务契约
// ================================================ ====
// 最后，让我们定义服务契约。 对于我们的 HelloService，我们定义了一个 GetHelloReq() 操作：

service ExampleService {
  rpc GetExampleMessage(ExampleRequest) returns (ExampleResponse);
}

     进入当前文件夹下图执行命令生成文件，用于在 Vue 组件中调用 gRPC 服务。：

    example_grpc_web_pb.js

    example_pb.js

protoc --proto_path=. --js_out=import_style=commonjs,binary:. --grpc-web_out=import_style=commonjs,mode=grpcwebtext:. example.proto

    --proto_path指proto文件所在的目录，如果是当前目录，用“.”表示

    --js_out=import_style=commonjs指利用commonjs编译js文件

    --grpc-web_out=import_style=commonjs,mode=grpcwebtext指利用commonjs编译后的grpc-web的js文件模式是grpcwebtext

    如果想要把生成的js文件存储到其他文件夹，在当前example.proto目录下执行：

protoc --proto_path=. --js_out=import_style=commonjs,binary:./../../proto/ --grpc-web_out=import_style=commonjs,mode=grpcwebtext:./../../proto/ example.proto

指定生成的文件放在 ./../../proto/目录中。

三、 在 Vue 组件中调用 gRPC 服务：

    在需要调用 gRPC 服务的 Vue 组件中导入生成的 gRPC-Web 客户端代码，并使用它来调用 gRPC 服务。例如，在 

App.vue

组件中调用

GetExampleMessage

方法：

import { ExampleServiceClient } from './proto/example_grpc_web_pb';
import { ExampleRequest } from './proto/example_pb';

export default {
  name: 'App',
  methods: {
    callGrpcService() {
      const request = new ExampleRequest();
      request.setName('John');

      const client = new ExampleServiceClient('http://localhost:8080', null, null);
      client.getExampleMessage(request, {}, (err, response) => {
        if (err) {
          console.error('Error:', err.message);
        } else {
          console.log('Response:', response.getMessage());
        }
      });
    },
  },
};