vue2.0项目集成Web-gRPC

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

一.准备工作

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

npm i grpc-web 
npm i google-protobuf

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

        

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

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

        选择环境变量

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

         检验protoc是否安装成功:

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

        

         或者直接执行

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=***monjs,binary:. --grpc-web_out=import_style=***monjs,mode=grpcwebtext:. example.proto

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

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

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

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

protoc --proto_path=. --js_out=import_style=***monjs,binary:./../../proto/ --grpc-web_out=import_style=***monjs,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());
        }
      });
    },
  },
};

转载请说明出处内容投诉
CSS教程_站长资源网 » vue2.0项目集成Web-gRPC

发表评论

欢迎 访客 发表评论

一个令你着迷的主题!

查看演示 官网购买