web-dev-qa-db-ja.com

Vueでgrpc-webを使用するには？

vueアプリケーションで次のようにgrpc-webクライアントを使用しようとしています：

import Vue from "vue";
import App from "./App.vue";
const { Registration, _ } = require("./identity-service_pb.js");
const {
  IdentityServicePromiseClient
} = require("./identity-service_grpc_web_pb.js");

const identityService = new IdentityServicePromiseClient(
  "http://localhost:9000"
);


const req = new Registration();
req.setGender("male");
req.setInterestList(["A", "B", "C"]);

console.log(req);
console.log(identityService);

identityService.signUp(req, {}).then(function(response) {
  console.log(response);
}).catch(function(error) {
  console.error(error);
});

Vue.config.productionTip = false;

new Vue({
  render: h => h(App)
}).$mount("#app");

アプリがコンパイルされると、コンパイラーは不平を言います。

error  in ./src/identity-service_pb.js

Module Error (from ./node_modules/eslint-loader/index.js):

/home/developer/js/identity-client/src/identity-service_pb.js
   27:1   error  'proto' is not defined      no-undef
   28:50  error  'proto' is not defined      no-undef
   30:15  error  'proto' is not defined      no-undef
   31:20  error  'COMPILED' is not defined   no-undef
   36:3   error  'proto' is not defined      no-undef
   48:1   error  'proto' is not defined      no-undef
   51:15  error  'proto' is not defined      no-undef
   52:20  error  'COMPILED' is not defined   no-undef
   57:3   error  'proto' is not defined      no-undef
   65:1   error  'proto' is not defined      no-undef
   82:1   error  'proto' is not defined      no-undef
   83:10  error  'proto' is not defined      no-undef
   96:1   error  'proto' is not defined      no-undef
  115:1   error  'proto' is not defined      no-undef
  117:17  error  'proto' is not defined      no-undef
  118:10  error  'proto' is not defined      no-undef
  129:1   error  'proto' is not defined      no-undef
  141:11  error  'value' is already defined  no-redeclare
  157:1   error  'proto' is not defined      no-undef
  159:3   error  'proto' is not defined      no-undef
  171:1   error  'proto' is not defined      no-undef
  194:1   error  'proto' is not defined      no-undef
  203:1   error  'proto' is not defined      no-undef
  212:1   error  'proto' is not defined      no-undef
  221:1   error  'proto' is not defined      no-undef
  231:1   error  'proto' is not defined      no-undef
  240:1   error  'proto' is not defined      no-undef
  261:1   error  'proto' is not defined      no-undef
  262:10  error  'proto' is not defined      no-undef
  275:1   error  'proto' is not defined      no-undef
  278:34  error  'proto' is not defined      no-undef
  294:1   error  'proto' is not defined      no-undef
  296:17  error  'proto' is not defined      no-undef
  297:10  error  'proto' is not defined      no-undef
  308:1   error  'proto' is not defined      no-undef
  320:11  error  'value' is already defined  no-redeclare
  320:23  error  'proto' is not defined      no-undef
  321:32  error  'proto' is not defined      no-undef
  337:1   error  'proto' is not defined      no-undef
  339:3   error  'proto' is not defined      no-undef
  351:1   error  'proto' is not defined      no-undef
  365:7   error  'proto' is not defined      no-undef
  375:1   error  'proto' is not defined      no-undef
  384:1   error  'proto' is not defined      no-undef
  393:1   error  'proto' is not defined      no-undef
  395:40  error  'proto' is not defined      no-undef
  403:1   error  'proto' is not defined      no-undef
  412:1   error  'proto' is not defined      no-undef
  421:1   error  'proto' is not defined      no-undef
  426:29  error  'proto' is not defined      no-undef

✖ 50 problems (50 errors, 0 warnings)

ご覧のとおり、自動生成されたファイルidentity-service_pb.js。

ファイル構造は次のようになります。

enter image description here

何が悪いのですか？

更新

vue appとgolang appの間に特使プロキシが必要ですか？

enter image description here

またはvueアプリはgolangアプリと直接通信できますか？現時点では、それらの間に特使プロキシはありません。

vue.jsgrpcgrpc-web
2
zero_coding

GoでreactとgRPCを使用してきましたが、あなたの質問に答えられるかもしれません。

  • はい、vueとgrpcサーバーの間にenvoy-proxyが必要です。Envoyは、ブラウザからのHTTP/1.1呼び出しを、gRPCが処理するHTTP2 /呼び出しに変換します

  • 自動生成されたファイルに関するコンパイラの不満を解決するには、/*eslint-disable*/ファイルの先頭に置くと、バイパスされます

  • GRPCメソッドを呼び出すには、次の形式を使用する必要があります

service.method(req, metadata, callback)

したがって、あなたの場合、あなたは次のようなことをすることができます：

identityService.signUp(req, {}, async (err, response) => { 
    const data = await response
    console.log(data)
    console.log(err)
})
1
lele

VueJS（Quasar Framework）とGolangでgRPC-Webを使用することについて書いた。多分それはあなたを助けることができます：

https://gustavohenrique.net/en/2020/02/grpc-web-with-golang-and-vuejs-an-alternative-to-rest-and-graphql/https ：//github.com/gustavohenrique/grpc-web-golang-vuejs

0
Gustavo Henrique