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:
What am I doing wrong?
Update
Do I need an envoy proxy between vue app and golang app?
Or vue app can communicate directly with golang app? At the moment, I do not have envoy proxy between them.
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.
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.
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.
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.
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)
})
You probably need the google-protobuf
npm package?
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With