Adds Echo Web example with functional prototype

.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

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<string, string>} metadata User defined
+ *     call metadata
+ * @param {function(?grpc.web.Error, ?proto.echo.EchoResponse)}
+ *     callback The callback function(error, response)
+ * @return {!grpc.web.ClientReadableStream<!proto.echo.EchoResponse>|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<string, string>} metadata User defined
+ *     call metadata
+ * @return {!Promise<!proto.echo.EchoResponse>}
+ *     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<string, string>} metadata User defined
+ *     call metadata
+ * @return {!grpc.web.ClientReadableStream<!proto.echo.EchoResponse>}
+ *     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<string, string>} metadata User defined
+ *     call metadata
+ * @return {!grpc.web.ClientReadableStream<!proto.echo.EchoResponse>}
+ *     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;

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_<name>, 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_<name>, 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);

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

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.

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

Examples/EchoWeb/index.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Echo gRPC-Web Example</title>
+  <script src="./dist/main.js"></script>
+</head>
+<body>
+  <div>
+    <input type="text" id="input_field" value="Test me!"/>
+    <button type="button" id="message_button">Send Message!</button>
+  </div>
+  <div>
+    <p id="response_label"></p>
+  </div>
+</body>
+</html>

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"
+  }
+}