Skip to content

Commit f89cfc2

Browse files
hanabi1224hanabi1224
authored
Upgrade grpc-web npm package to latest (#931)
1 parent 283098b commit f89cfc2

File tree

6 files changed

+142
-119
lines changed

6 files changed

+142
-119
lines changed

‎examples/Spar/Server/ClientApp/package-lock.json‎

Lines changed: 17 additions & 16 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎examples/Spar/Server/ClientApp/package.json‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -9,17 +9,17 @@
99
"protogen": "protoc -I ./../../Proto/ ./../../Proto/greet.proto --js_out=import_style=commonjs:./src/generated/ --grpc-web_out=import_style=typescript,mode=grpcwebtext:./src/generated/"
1010
},
1111
"dependencies": {
12-
"google-protobuf": "^3.11.4",
13-
"grpc-web": "^1.0.7",
12+
"google-protobuf": "^3.12.2",
13+
"grpc-web": "^1.1.0",
1414
"vue": "^2.6.11",
1515
"vue-hot-reload-api": "^2.3.4",
16-
"vue-property-decorator": "^8.4.0"
16+
"vue-property-decorator": "^8.4.2"
1717
},
1818
"devDependencies": {
19-
"@vue/component-compiler-utils": "^3.1.1",
19+
"@vue/component-compiler-utils": "^3.1.2",
2020
"parcel-bundler": "^1.12.4",
2121
"rimraf": "^3.0.2",
22-
"typescript": "^3.8.2",
22+
"typescript": "^3.9.3",
2323
"vue-template-compiler": "^2.6.11"
2424
}
2525
}

‎examples/Spar/Server/ClientApp/src/App.vue‎

Lines changed: 78 additions & 85 deletions
Original file line numberDiff line numberDiff line change
@@ -1,105 +1,98 @@
11
<template>
2+
<div>
3+
<h2>gRPC-Web ASP.NET Core example</h2>
24
<div>
3-
<h2>gRPC-Web ASP.NET Core example</h2>
4-
<div>
5-
<span>CORS:</span>
6-
<select v-model="cors">
7-
<option value="same">Same Origin</option>
8-
<option value="different">Different Origin</option>
9-
</select>
10-
<span>Hello:</span>
11-
<input type="text" v-model="name" />
12-
<input type="button"
13-
value="Send unary"
14-
v-bind:disabled="streamingCall"
15-
@click="sendUnary()" />
16-
<input type="button"
17-
v-model="streamingButtonText"
18-
@click="sendServerStream()" />
19-
</div>
20-
<div>
21-
<p v-if="result">{{result}}</p>
22-
<p v-for="item in streamResults" :key="item">{{item}}</p>
23-
</div>
5+
<span>CORS:</span>
6+
<select v-model="cors">
7+
<option value="same">Same Origin</option>
8+
<option value="different">Different Origin</option>
9+
</select>
10+
<span>Hello:</span>
11+
<input type="text" v-model="name" />
12+
<input type="button" value="Send unary" v-bind:disabled="streamingCall" @click="sendUnary()" />
13+
<input type="button" v-model="streamingButtonText" @click="sendServerStream()" />
2414
</div>
15+
<div>
16+
<p v-if="result">{{result}}</p>
17+
<p v-for="item in streamResults" :key="item">{{item}}</p>
18+
</div>
19+
</div>
2520
</template>
2621

2722
<script lang="ts">
28-
import { Component, Vue } from "vue-property-decorator";
29-
import { GreeterClient, HelloRequest } from "./generated/greet_grpc_web_pb";
23+
import { Component, Vue } from "vue-property-decorator";
24+
import { GreeterClient, HelloRequest } from "./generated/greet_grpc_web_pb";
3025
31-
function getDifferentOrigin() {
32-
const schema = window.location.protocol as "http:" | "https:";
33-
const differentSchema = schema === "http:" ? "https" : "http";
34-
// when port is omitted
35-
if (!window.location.port) {
36-
return `${differentSchema}://${window.location.host}`;
37-
}
26+
function getDifferentOrigin() {
27+
const schema = window.location.protocol as "http:" | "https:";
28+
const differentSchema = schema === "http:" ? "https" : "http";
29+
// when port is omitted
30+
if (!window.location.port) {
31+
return `${differentSchema}://${window.location.host}`;
32+
}
3833
39-
const port = parseInt(window.location.port);
34+
const port = parseInt(window.location.port);
4035
41-
let differentPort: number;
42-
if (port === 80) {
43-
differentPort = 443;
44-
} else if (port === 443) {
45-
differentPort = 80;
46-
} else {
47-
// handle aspnet dev server
48-
differentPort = schema === "http:" ? port + 1 : port - 1;
49-
}
36+
let differentPort: number;
37+
if (port === 80) {
38+
differentPort = 443;
39+
} else if (port === 443) {
40+
differentPort = 80;
41+
} else {
42+
// handle aspnet dev server
43+
differentPort = schema === "http:" ? port + 1 : port - 1;
44+
}
5045
51-
return `${differentSchema}://${window.location.hostname}:${differentPort}`;
52-
}
46+
return `${differentSchema}://${window.location.hostname}:${differentPort}`;
47+
}
5348
54-
@Component({})
55-
export default class GrpcWebDemo extends Vue {
56-
private defaultClient = new GreeterClient(window.location.origin, null, null);
57-
private corsClient = new GreeterClient(getDifferentOrigin(), null, null);
58-
get client() {
59-
return this.cors === "same" ? this.defaultClient : this.corsClient;
60-
}
61-
cors: "same" | "different" = "same";
62-
name = "";
63-
result = "";
64-
streamingButtonText = "Start server stream";
65-
streamResults: string[] = [];
66-
streamingCall: any = null;
49+
@Component({})
50+
export default class GrpcWebDemo extends Vue {
51+
private defaultClient = new GreeterClient(window.location.origin, null, null);
52+
private corsClient = new GreeterClient(getDifferentOrigin(), null, null);
53+
get client() {
54+
return this.cors === "same" ? this.defaultClient : this.corsClient;
55+
}
56+
cors: "same" | "different" = "same";
57+
name = "";
58+
result = "";
59+
streamingButtonText = "Start server stream";
60+
streamResults: string[] = [];
61+
streamingCall: any = null;
6762
68-
sendUnary() {
69-
this.result = "";
70-
this.streamResults = [];
63+
sendUnary() {
64+
this.result = "";
65+
this.streamResults = [];
7166
72-
const request = new HelloRequest();
73-
request.setName(this.name);
74-
this.client.sayHello(request, {}, (err, response) => {
75-
this.result = response.getMessage();
76-
});
77-
}
67+
const request = new HelloRequest().setName(this.name);
68+
this.client.sayHello(request, {}, (err, response) => {
69+
this.result = response.getMessage();
70+
});
71+
}
7872
79-
sendServerStream() {
80-
if (!this.streamingCall) {
81-
this.streamingButtonText = "Stop server stream";
82-
this.result = "";
83-
this.streamResults = [];
73+
sendServerStream() {
74+
if (!this.streamingCall) {
75+
this.streamingButtonText = "Stop server stream";
76+
this.result = "";
77+
this.streamResults = [];
8478
85-
const request = new HelloRequest();
86-
request.setName(this.name);
79+
const request = new HelloRequest().setName(this.name);
8780
88-
this.streamingCall = this.client.sayHellos(request, {});
89-
this.streamingCall.on("data", response => {
90-
const result = response.getMessage();
91-
this.streamResults.push(result);
92-
});
93-
this.streamingCall.on("end", function () { });
94-
} else {
95-
this.streamingButtonText = "Start server stream";
96-
this.streamingCall.cancel();
97-
this.streamingCall = null;
98-
}
99-
}
100-
101-
mounted() { }
81+
this.streamingCall = this.client.sayHellos(request, {});
82+
this.streamingCall.on("data", response => {
83+
const result = response.getMessage();
84+
this.streamResults.push(result);
85+
});
86+
this.streamingCall.on("end", function() {});
87+
} else {
88+
this.streamingButtonText = "Start server stream";
89+
this.streamingCall.cancel();
90+
this.streamingCall = null;
10291
}
92+
}
93+
94+
mounted() {}
95+
}
10396
</script>
10497

10598
<style lang="scss" scoped>

‎examples/Spar/Server/ClientApp/src/generated/GreetServiceClientPb.ts‎

Lines changed: 29 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,10 @@
77
// GENERATED CODE -- DO NOT EDIT!
88

99

10+
/* eslint-disable */
11+
// @ts-nocheck
12+
13+
1014
import * as grpcWeb from 'grpc-web';
1115

1216
import {
@@ -40,18 +44,36 @@ export class GreeterClient {
4044
HelloReply.deserializeBinary
4145
);
4246

47+
sayHello(
48+
request: HelloRequest,
49+
metadata: grpcWeb.Metadata | null): Promise<HelloReply>;
50+
4351
sayHello(
4452
request: HelloRequest,
4553
metadata: grpcWeb.Metadata | null,
4654
callback: (err: grpcWeb.Error,
55+
response: HelloReply) => void): grpcWeb.ClientReadableStream<HelloReply>;
56+
57+
sayHello(
58+
request: HelloRequest,
59+
metadata: grpcWeb.Metadata | null,
60+
callback?: (err: grpcWeb.Error,
4761
response: HelloReply) => void) {
48-
return this.client_.rpcCall(
49-
this.hostname_ +
50-
'/greet.Greeter/SayHello',
51-
request,
52-
metadata || {},
53-
this.methodInfoSayHello,
54-
callback);
62+
if (callback !== undefined) {
63+
return this.client_.rpcCall(
64+
this.hostname_ +
65+
'/greet.Greeter/SayHello',
66+
request,
67+
metadata || {},
68+
this.methodInfoSayHello,
69+
callback);
70+
}
71+
return this.client_.unaryCall(
72+
this.hostname_ +
73+
'/greet.Greeter/SayHello',
74+
request,
75+
metadata || {},
76+
this.methodInfoSayHello);
5577
}
5678

5779
methodInfoSayHellos = new grpcWeb.AbstractClientBase.MethodInfo(

‎examples/Spar/Server/ClientApp/src/generated/greet_pb.d.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import * as jspb from "google-protobuf"
22

33
export class HelloRequest extends jspb.Message {
44
getName(): string;
5-
setName(value: string): void;
5+
setName(value: string): HelloRequest;
66

77
serializeBinary(): Uint8Array;
88
toObject(includeInstance?: boolean): HelloRequest.AsObject;
@@ -20,7 +20,7 @@ export namespace HelloRequest {
2020

2121
export class HelloReply extends jspb.Message {
2222
getMessage(): string;
23-
setMessage(value: string): void;
23+
setMessage(value: string): HelloReply;
2424

2525
serializeBinary(): Uint8Array;
2626
toObject(includeInstance?: boolean): HelloReply.AsObject;

‎examples/Spar/Server/ClientApp/src/generated/greet_pb.js‎

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
// source: greet.proto
12
/**
23
* @fileoverview
34
* @enhanceable
@@ -176,9 +177,12 @@ proto.greet.HelloRequest.prototype.getName = function() {
176177
};
177178

178179

179-
/** @param {string} value */
180+
/**
181+
* @param {string} value
182+
* @return {!proto.greet.HelloRequest} returns this
183+
*/
180184
proto.greet.HelloRequest.prototype.setName = function(value) {
181-
jspb.Message.setProto3StringField(this, 1, value);
185+
return jspb.Message.setProto3StringField(this, 1, value);
182186
};
183187

184188

@@ -303,9 +307,12 @@ proto.greet.HelloReply.prototype.getMessage = function() {
303307
};
304308

305309

306-
/** @param {string} value */
310+
/**
311+
* @param {string} value
312+
* @return {!proto.greet.HelloReply} returns this
313+
*/
307314
proto.greet.HelloReply.prototype.setMessage = function(value) {
308-
jspb.Message.setProto3StringField(this, 1, value);
315+
return jspb.Message.setProto3StringField(this, 1, value);
309316
};
310317

311318

0 commit comments

Comments
 (0)