Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to use grpc-web in vue?

I am trying use grpc-web client in my vue application as follows:

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");

When the app gets compiled, the compiler complains:

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)

As you can see, that the compiler complains about the auto generated file identity-service_pb.js.

The file structure looks as follows:

enter image description here

What am I doing wrong?

Update

Do I need an envoy proxy between vue app and golang app?

enter image description here

Or vue app can communicate directly with golang app? At the moment, I do not have envoy proxy between them.

like image 995
softshipper Avatar asked Mar 03 '20 21:03

softshipper


People also ask

Can I use gRPC in browser?

It's not possible to directly call a gRPC service from a browser. gRPC uses HTTP/2 features, and no browser provides the level of control required over web requests to support a gRPC client.

How does gRPC-Web work?

While similarly named, gRPC-Web is a distinctly different protocol. It exists solely in a browser and acts as a translation layer between gRPC and your application in a browser. The “web” client in gRPC-Web receives requests over HTTP 1.1 or HTTP/2 and then sends the requests through a proxy.

Is gRPC good for frontend?

It is a great technology, especially if you are already using gRPC everywhere. We're using it with great success in our frontend application. If you're interested in learning more, you can get started with the source code for this article here.

Does gRPC work over HTTP?

gRPC is designed for HTTP/2, a major revision of HTTP that provides significant performance benefits over HTTP 1. x: Binary framing and compression. HTTP/2 protocol is compact and efficient both in sending and receiving.


2 Answers

I've been using react and gRPC with Go, I might be able to answer your questions:

  • Yes, you do need an envoy-proxy between vue and your grpc server. Envoy will translate your HTTP/1.1 calls from the browser to HTTP2/ calls that are the ones gRPC handles

  • To solve the compiler complaining about the auto generated file you can use /*eslint-disable*/ at the beginning of the file and you'll bypass it

  • To call gRPC methods you need to use the following format

service.method(req, metadata, callback)

So in your case you could do something like:

identityService.signUp(req, {}, async (err, response) => { 
    const data = await response
    console.log(data)
    console.log(err)
})
like image 111
lele Avatar answered Nov 15 '22 09:11

lele


You probably need the google-protobuf npm package?

like image 37
Stanley Cheung Avatar answered Nov 15 '22 10:11

Stanley Cheung