diff --git a/.gitignore b/.gitignore index c73395646..233fc347b 100644 --- a/.gitignore +++ b/.gitignore @@ -13,3 +13,6 @@ third_party/** /echo.pid /SwiftGRPC.xcodeproj Package.resolved +Examples/EchoWeb/dist +Examples/EchoWeb/node_modules +Examples/EchoWeb/package-lock.json diff --git a/Examples/EchoWeb/Generated/echo_grpc_web_pb.js b/Examples/EchoWeb/Generated/echo_grpc_web_pb.js new file mode 100644 index 000000000..0b7363b08 --- /dev/null +++ b/Examples/EchoWeb/Generated/echo_grpc_web_pb.js @@ -0,0 +1,181 @@ +/** + * @fileoverview gRPC-Web generated client stub for echo + * @enhanceable + * @public + */ + +// GENERATED CODE -- DO NOT EDIT! + + + +const grpc = {}; +grpc.web = require('grpc-web'); + +const proto = {}; +proto.echo = require('./echo_pb.js'); + +/** + * @param {string} hostname + * @param {?Object} credentials + * @param {?Object} options + * @constructor + * @struct + * @final + */ +proto.echo.EchoClient = + function(hostname, credentials, options) { + if (!options) options = {}; + options['format'] = 'text'; + + /** + * @private @const {!grpc.web.GrpcWebClientBase} The client + */ + this.client_ = new grpc.web.GrpcWebClientBase(options); + + /** + * @private @const {string} The hostname + */ + this.hostname_ = hostname; + + /** + * @private @const {?Object} The credentials to be used to connect + * to the server + */ + this.credentials_ = credentials; + + /** + * @private @const {?Object} Options for the client + */ + this.options_ = options; +}; + + +/** + * @param {string} hostname + * @param {?Object} credentials + * @param {?Object} options + * @constructor + * @struct + * @final + */ +proto.echo.EchoPromiseClient = + function(hostname, credentials, options) { + if (!options) options = {}; + options['format'] = 'text'; + + /** + * @private @const {!proto.echo.EchoClient} The delegate callback based client + */ + this.delegateClient_ = new proto.echo.EchoClient( + hostname, credentials, options); + +}; + + +/** + * @const + * @type {!grpc.web.AbstractClientBase.MethodInfo< + * !proto.echo.EchoRequest, + * !proto.echo.EchoResponse>} + */ +const methodInfo_Echo_Get = new grpc.web.AbstractClientBase.MethodInfo( + proto.echo.EchoResponse, + /** @param {!proto.echo.EchoRequest} request */ + function(request) { + return request.serializeBinary(); + }, + proto.echo.EchoResponse.deserializeBinary +); + + +/** + * @param {!proto.echo.EchoRequest} request The + * request proto + * @param {!Object} metadata User defined + * call metadata + * @param {function(?grpc.web.Error, ?proto.echo.EchoResponse)} + * callback The callback function(error, response) + * @return {!grpc.web.ClientReadableStream|undefined} + * The XHR Node Readable Stream + */ +proto.echo.EchoClient.prototype.get = + function(request, metadata, callback) { + return this.client_.rpcCall(this.hostname_ + + '/echo.Echo/Get', + request, + metadata, + methodInfo_Echo_Get, + callback); +}; + + +/** + * @param {!proto.echo.EchoRequest} request The + * request proto + * @param {!Object} metadata User defined + * call metadata + * @return {!Promise} + * The XHR Node Readable Stream + */ +proto.echo.EchoPromiseClient.prototype.get = + function(request, metadata) { + return new Promise((resolve, reject) => { + this.delegateClient_.get( + request, metadata, (error, response) => { + error ? reject(error) : resolve(response); + }); + }); +}; + + +/** + * @const + * @type {!grpc.web.AbstractClientBase.MethodInfo< + * !proto.echo.EchoRequest, + * !proto.echo.EchoResponse>} + */ +const methodInfo_Echo_Expand = new grpc.web.AbstractClientBase.MethodInfo( + proto.echo.EchoResponse, + /** @param {!proto.echo.EchoRequest} request */ + function(request) { + return request.serializeBinary(); + }, + proto.echo.EchoResponse.deserializeBinary +); + + +/** + * @param {!proto.echo.EchoRequest} request The request proto + * @param {!Object} metadata User defined + * call metadata + * @return {!grpc.web.ClientReadableStream} + * The XHR Node Readable Stream + */ +proto.echo.EchoClient.prototype.expand = + function(request, metadata) { + return this.client_.serverStreaming(this.hostname_ + + '/echo.Echo/Expand', + request, + metadata, + methodInfo_Echo_Expand); +}; + + +/** + * @param {!proto.echo.EchoRequest} request The request proto + * @param {!Object} metadata User defined + * call metadata + * @return {!grpc.web.ClientReadableStream} + * The XHR Node Readable Stream + */ +proto.echo.EchoPromiseClient.prototype.expand = + function(request, metadata) { + return this.delegateClient_.client_.serverStreaming(this.delegateClient_.hostname_ + + '/echo.Echo/Expand', + request, + metadata, + methodInfo_Echo_Expand); +}; + + +module.exports = proto.echo; diff --git a/Examples/EchoWeb/Generated/echo_pb.js b/Examples/EchoWeb/Generated/echo_pb.js new file mode 100644 index 000000000..24928394f --- /dev/null +++ b/Examples/EchoWeb/Generated/echo_pb.js @@ -0,0 +1,300 @@ +/** + * @fileoverview + * @enhanceable + * @suppress {messageConventions} JS Compiler reports an error if a variable or + * field starts with 'MSG_' and isn't a translatable message. + * @public + */ +// GENERATED CODE -- DO NOT EDIT! + +var jspb = require('google-protobuf'); +var goog = jspb; +var global = Function('return this')(); + +goog.exportSymbol('proto.echo.EchoRequest', null, global); +goog.exportSymbol('proto.echo.EchoResponse', null, global); + +/** + * Generated by JsPbCodeGenerator. + * @param {Array=} opt_data Optional initial data array, typically from a + * server response, or constructed directly in Javascript. The array is used + * in place and becomes part of the constructed object. It is not cloned. + * If no data is provided, the constructed object will be empty, but still + * valid. + * @extends {jspb.Message} + * @constructor + */ +proto.echo.EchoRequest = function(opt_data) { + jspb.Message.initialize(this, opt_data, 0, -1, null, null); +}; +goog.inherits(proto.echo.EchoRequest, jspb.Message); +if (goog.DEBUG && !COMPILED) { + proto.echo.EchoRequest.displayName = 'proto.echo.EchoRequest'; +} + + +if (jspb.Message.GENERATE_TO_OBJECT) { +/** + * Creates an object representation of this proto suitable for use in Soy templates. + * Field names that are reserved in JavaScript and will be renamed to pb_name. + * To access a reserved field use, foo.pb_, eg, foo.pb_default. + * For the list of reserved names please see: + * com.google.apps.jspb.JsClassTemplate.JS_RESERVED_WORDS. + * @param {boolean=} opt_includeInstance Whether to include the JSPB instance + * for transitional soy proto support: http://goto/soy-param-migration + * @return {!Object} + */ +proto.echo.EchoRequest.prototype.toObject = function(opt_includeInstance) { + return proto.echo.EchoRequest.toObject(opt_includeInstance, this); +}; + + +/** + * Static version of the {@see toObject} method. + * @param {boolean|undefined} includeInstance Whether to include the JSPB + * instance for transitional soy proto support: + * http://goto/soy-param-migration + * @param {!proto.echo.EchoRequest} msg The msg instance to transform. + * @return {!Object} + * @suppress {unusedLocalVariables} f is only used for nested messages + */ +proto.echo.EchoRequest.toObject = function(includeInstance, msg) { + var f, obj = { + text: jspb.Message.getFieldWithDefault(msg, 1, "") + }; + + if (includeInstance) { + obj.$jspbMessageInstance = msg; + } + return obj; +}; +} + + +/** + * Deserializes binary data (in protobuf wire format). + * @param {jspb.ByteSource} bytes The bytes to deserialize. + * @return {!proto.echo.EchoRequest} + */ +proto.echo.EchoRequest.deserializeBinary = function(bytes) { + var reader = new jspb.BinaryReader(bytes); + var msg = new proto.echo.EchoRequest; + return proto.echo.EchoRequest.deserializeBinaryFromReader(msg, reader); +}; + + +/** + * Deserializes binary data (in protobuf wire format) from the + * given reader into the given message object. + * @param {!proto.echo.EchoRequest} msg The message object to deserialize into. + * @param {!jspb.BinaryReader} reader The BinaryReader to use. + * @return {!proto.echo.EchoRequest} + */ +proto.echo.EchoRequest.deserializeBinaryFromReader = function(msg, reader) { + while (reader.nextField()) { + if (reader.isEndGroup()) { + break; + } + var field = reader.getFieldNumber(); + switch (field) { + case 1: + var value = /** @type {string} */ (reader.readString()); + msg.setText(value); + break; + default: + reader.skipField(); + break; + } + } + return msg; +}; + + +/** + * Serializes the message to binary data (in protobuf wire format). + * @return {!Uint8Array} + */ +proto.echo.EchoRequest.prototype.serializeBinary = function() { + var writer = new jspb.BinaryWriter(); + proto.echo.EchoRequest.serializeBinaryToWriter(this, writer); + return writer.getResultBuffer(); +}; + + +/** + * Serializes the given message to binary data (in protobuf wire + * format), writing to the given BinaryWriter. + * @param {!proto.echo.EchoRequest} message + * @param {!jspb.BinaryWriter} writer + * @suppress {unusedLocalVariables} f is only used for nested messages + */ +proto.echo.EchoRequest.serializeBinaryToWriter = function(message, writer) { + var f = undefined; + f = message.getText(); + if (f.length > 0) { + writer.writeString( + 1, + f + ); + } +}; + + +/** + * optional string text = 1; + * @return {string} + */ +proto.echo.EchoRequest.prototype.getText = function() { + return /** @type {string} */ (jspb.Message.getFieldWithDefault(this, 1, "")); +}; + + +/** @param {string} value */ +proto.echo.EchoRequest.prototype.setText = function(value) { + jspb.Message.setProto3StringField(this, 1, value); +}; + + + +/** + * Generated by JsPbCodeGenerator. + * @param {Array=} opt_data Optional initial data array, typically from a + * server response, or constructed directly in Javascript. The array is used + * in place and becomes part of the constructed object. It is not cloned. + * If no data is provided, the constructed object will be empty, but still + * valid. + * @extends {jspb.Message} + * @constructor + */ +proto.echo.EchoResponse = function(opt_data) { + jspb.Message.initialize(this, opt_data, 0, -1, null, null); +}; +goog.inherits(proto.echo.EchoResponse, jspb.Message); +if (goog.DEBUG && !COMPILED) { + proto.echo.EchoResponse.displayName = 'proto.echo.EchoResponse'; +} + + +if (jspb.Message.GENERATE_TO_OBJECT) { +/** + * Creates an object representation of this proto suitable for use in Soy templates. + * Field names that are reserved in JavaScript and will be renamed to pb_name. + * To access a reserved field use, foo.pb_, eg, foo.pb_default. + * For the list of reserved names please see: + * com.google.apps.jspb.JsClassTemplate.JS_RESERVED_WORDS. + * @param {boolean=} opt_includeInstance Whether to include the JSPB instance + * for transitional soy proto support: http://goto/soy-param-migration + * @return {!Object} + */ +proto.echo.EchoResponse.prototype.toObject = function(opt_includeInstance) { + return proto.echo.EchoResponse.toObject(opt_includeInstance, this); +}; + + +/** + * Static version of the {@see toObject} method. + * @param {boolean|undefined} includeInstance Whether to include the JSPB + * instance for transitional soy proto support: + * http://goto/soy-param-migration + * @param {!proto.echo.EchoResponse} msg The msg instance to transform. + * @return {!Object} + * @suppress {unusedLocalVariables} f is only used for nested messages + */ +proto.echo.EchoResponse.toObject = function(includeInstance, msg) { + var f, obj = { + text: jspb.Message.getFieldWithDefault(msg, 1, "") + }; + + if (includeInstance) { + obj.$jspbMessageInstance = msg; + } + return obj; +}; +} + + +/** + * Deserializes binary data (in protobuf wire format). + * @param {jspb.ByteSource} bytes The bytes to deserialize. + * @return {!proto.echo.EchoResponse} + */ +proto.echo.EchoResponse.deserializeBinary = function(bytes) { + var reader = new jspb.BinaryReader(bytes); + var msg = new proto.echo.EchoResponse; + return proto.echo.EchoResponse.deserializeBinaryFromReader(msg, reader); +}; + + +/** + * Deserializes binary data (in protobuf wire format) from the + * given reader into the given message object. + * @param {!proto.echo.EchoResponse} msg The message object to deserialize into. + * @param {!jspb.BinaryReader} reader The BinaryReader to use. + * @return {!proto.echo.EchoResponse} + */ +proto.echo.EchoResponse.deserializeBinaryFromReader = function(msg, reader) { + while (reader.nextField()) { + if (reader.isEndGroup()) { + break; + } + var field = reader.getFieldNumber(); + switch (field) { + case 1: + var value = /** @type {string} */ (reader.readString()); + msg.setText(value); + break; + default: + reader.skipField(); + break; + } + } + return msg; +}; + + +/** + * Serializes the message to binary data (in protobuf wire format). + * @return {!Uint8Array} + */ +proto.echo.EchoResponse.prototype.serializeBinary = function() { + var writer = new jspb.BinaryWriter(); + proto.echo.EchoResponse.serializeBinaryToWriter(this, writer); + return writer.getResultBuffer(); +}; + + +/** + * Serializes the given message to binary data (in protobuf wire + * format), writing to the given BinaryWriter. + * @param {!proto.echo.EchoResponse} message + * @param {!jspb.BinaryWriter} writer + * @suppress {unusedLocalVariables} f is only used for nested messages + */ +proto.echo.EchoResponse.serializeBinaryToWriter = function(message, writer) { + var f = undefined; + f = message.getText(); + if (f.length > 0) { + writer.writeString( + 1, + f + ); + } +}; + + +/** + * optional string text = 1; + * @return {string} + */ +proto.echo.EchoResponse.prototype.getText = function() { + return /** @type {string} */ (jspb.Message.getFieldWithDefault(this, 1, "")); +}; + + +/** @param {string} value */ +proto.echo.EchoResponse.prototype.setText = function(value) { + jspb.Message.setProto3StringField(this, 1, value); +}; + + +goog.object.extend(exports, proto.echo); diff --git a/Examples/EchoWeb/Makefile b/Examples/EchoWeb/Makefile new file mode 100644 index 000000000..d8c7ce76b --- /dev/null +++ b/Examples/EchoWeb/Makefile @@ -0,0 +1,9 @@ + +all: + npm install + npx webpack client.js + +clean: + rm -rf Packages googleapis .build + rm -f Package.pins Echo google.json + rm -rf Package.resolved Echo.xcodeproj Echo diff --git a/Examples/EchoWeb/README.md b/Examples/EchoWeb/README.md new file mode 100644 index 000000000..4525d03fe --- /dev/null +++ b/Examples/EchoWeb/README.md @@ -0,0 +1,17 @@ +# Echo gRPC-Web Sample App + +The Echo gRPC-Web is a node project that creates a website that +connects to a Swift gRPC NIO server to display messages. To build +it, just run `make` inside this directory, and then open the +`index.html` file in a web browser. Remember to start the Echo +service by executing `swift run EchoNIO serve` before opening +`index.html` in the browser. + +The proto files were generated by invoking `protoc` with the +`protoc-gen-grpc-web` plugin as described +[here](https://github.com/grpc/grpc-web/tree/master/net/grpc/gateway/examples/helloworld#generate-protobuf-messages-and-client-service-stub). + +## Dependencies + +You'll need to install `npm` in order to compile the Javascript +code. diff --git a/Examples/EchoWeb/client.js b/Examples/EchoWeb/client.js new file mode 100644 index 000000000..d0fcb0a15 --- /dev/null +++ b/Examples/EchoWeb/client.js @@ -0,0 +1,33 @@ +const {EchoRequest, EchoResponse} = require('./Generated/echo_pb.js'); +const {EchoClient} = require('./Generated/echo_grpc_web_pb.js'); + +var client = new EchoClient('http://localhost:8080'); + +function sendMessage(message) { + var request = new EchoRequest(); + request.setText(message); + + client.get(request, {}, (err, response) => { + var responseLabel = document.getElementById("response_label") + if (err) { + responseLabel.innerText = "ERROR: Could not connect to the server." + } else { + responseLabel.innerText = "Server reply: " + response.getText() + } + }); + + var expandStream = client.expand(request); + expandStream.on('data', function(response) { + console.log(response.getText()); + }); + expandStream.on('end', function(end) { + console.log("Expand Stream Ended"); + }); + +} + +window.addEventListener("DOMContentLoaded", function() { + document.getElementById("message_button").addEventListener("click", function() { + sendMessage(document.getElementById("input_field").value); + }); +}, false); diff --git a/Examples/EchoWeb/index.html b/Examples/EchoWeb/index.html new file mode 100644 index 000000000..6354cc9f3 --- /dev/null +++ b/Examples/EchoWeb/index.html @@ -0,0 +1,17 @@ + + + + + Echo gRPC-Web Example + + + +
+ + +
+
+

+
+ + diff --git a/Examples/EchoWeb/package.json b/Examples/EchoWeb/package.json new file mode 100644 index 000000000..f7a3a7fc0 --- /dev/null +++ b/Examples/EchoWeb/package.json @@ -0,0 +1,13 @@ +{ + "name": "echo-grpc-web-example", + "version": "0.1.0", + "description": "Echo gRPC-Web Example", + "devDependencies": { + "@grpc/proto-loader": "^0.3.0", + "google-protobuf": "^3.6.1", + "grpc": "^1.15.0", + "grpc-web": "^1.0.0", + "webpack": "^4.16.5", + "webpack-cli": "^3.1.0" + } +}