Merge pull request #212 from stanley-cheung/commonjs-example

Added commonjs-example Dockerfile

docker-compose.yml

@@ -28,3 +28,10 @@ services:
     image: grpc-web:static-assets
     ports:
       - "80:80"
+  commonjs-client-example:
+    build:
+      context: ./
+      dockerfile: ./net/grpc/gateway/docker/commonjs_client_example/Dockerfile
+    image: grpc-web:commonjs-client-example
+    ports:
+      - "8081:8081"

net/grpc/gateway/docker/commonjs_client_example/Dockerfile

@@ -0,0 +1,40 @@
+# Copyright 2018 Google LLC
+#
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+#
+#     https://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+
+FROM grpc-web:prereqs
+
+ARG EXAMPLE_DIR=/github/grpc-web/net/grpc/gateway/examples/echo
+
+RUN cd /github/grpc-web/packages/grpc-web && \
+  rm -rf node_modules && \
+  npm install && \
+  npm run build && \
+  npm link
+
+RUN protoc -I=$EXAMPLE_DIR echo.proto \
+--plugin=protoc-gen-grpc-web=\
+/github/grpc-web/javascript/net/grpc/web/protoc-gen-grpc-web \
+--js_out=import_style=commonjs:\
+$EXAMPLE_DIR/commonjs-example \
+--grpc-web_out=import_style=commonjs,mode=grpcweb,out=echo_grpc_pb.js:\
+$EXAMPLE_DIR/commonjs-example
+
+RUN cd $EXAMPLE_DIR/commonjs-example && \
+  rm -rf node_modules && \
+  npm install && \
+  npm link grpc-web && \
+  ./node_modules/.bin/browserify client.js > out.js
+
+EXPOSE 8081
+CMD ["nginx"]

net/grpc/gateway/docker/prereqs/Dockerfile

@@ -30,6 +30,9 @@ RUN apt-get update && apt-get install -y \
   nginx \
   zip
 
+RUN curl -sL https://deb.nodesource.com/setup_8.x | bash - && \
+  apt-get install -y nodejs
+
 RUN git clone https://github.com/grpc/grpc-web /github/grpc-web
 
 RUN cd /github/grpc-web && \
@@ -40,3 +43,9 @@ RUN cd /github/grpc-web/third_party/grpc && \
 
 RUN cd /github/grpc-web/third_party/grpc/third_party/protobuf && \
   make install
+
+RUN cd /github/grpc-web/javascript/net/grpc/web && \
+  make
+
+RUN cp /github/grpc-web/net/grpc/gateway/examples/echo/nginx_simple.conf \
+  /etc/nginx/nginx.conf

net/grpc/gateway/docker/static_assets/Dockerfile

@@ -14,9 +14,6 @@
 
 FROM grpc-web:prereqs
 
-RUN cp /github/grpc-web/net/grpc/gateway/examples/echo/nginx_simple.conf \
-  /etc/nginx/nginx.conf
-
 RUN cd /github/grpc-web && \
   curl http://dl.google.com/closure-compiler/compiler-latest.zip \
   -o /github/grpc-web/compiler-latest.zip

net/grpc/gateway/examples/echo/Makefile

@@ -91,6 +91,7 @@ proto-js:
 install:
 	mkdir -p $(HTML_DIR)/$(EXAMPLES_PATH)
 	cp ./echotest.html $(HTML_DIR)/$(EXAMPLES_PATH)/
+	cp ./echoapp.js $(HTML_DIR)/$(EXAMPLES_PATH)/
 	cp compiled.js $(HTML_DIR)/echo_js_bin_dev.js
 
 clean:

net/grpc/gateway/examples/echo/commonjs-example/.gitignore

@@ -0,0 +1,2 @@
+node_modules
+package-lock.json

net/grpc/gateway/examples/echo/commonjs-example/client.js

@@ -0,0 +1,25 @@
+const {EchoRequest,
+       ServerStreamingEchoRequest} = require('./echo_pb.js');
+const {EchoServiceClient} = require('./echo_grpc_pb.js');
+const {EchoApp} = require('../echoapp.js');
+const grpc = {};
+grpc.web = require('grpc-web');
+
+var echoService = new EchoServiceClient('http://localhost:8080', null, null);
+
+var echoApp = new EchoApp(
+  echoService,
+  {
+    EchoRequest: EchoRequest,
+    ServerStreamingEchoRequest: ServerStreamingEchoRequest
+  },
+  {
+    checkGrpcStatusCode: function(status) {
+      if (status.code != grpc.web.StatusCode.OK) {
+        EchoApp.addRightMessage('Error code: '+status.code+' "'+status.details+'"');
+      }
+    }
+  }
+);
+
+echoApp.load();

net/grpc/gateway/examples/echo/commonjs-example/echo_commonjs_test.html

@@ -0,0 +1,40 @@
+<!-- Copyright 2018 Google LLC  -->
+
+<!-- Licensed under the Apache License, Version 2.0 (the "License");  -->
+<!-- you may not use this file except in compliance with the License.  -->
+<!-- You may obtain a copy of the License at  -->
+
+<!--     https://www.apache.org/licenses/LICENSE-2.0  -->
+
+<!-- Unless required by applicable law or agreed to in writing, software  -->
+<!-- distributed under the License is distributed on an "AS IS" BASIS,  -->
+<!-- WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.  -->
+<!-- See the License for the specific language governing permissions and  -->
+<!-- limitations under the License.  -->
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<title>Echo Example</title>
+<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
+<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
+<script src="./out.js"></script>
+</head>
+<body>
+  <div class="container">
+    <div class="row" id="first">
+      <div class="form-group">
+        <div class="input-group">
+          <input type="text" class="form-control" id="msg">
+          <span class="input-group-btn">
+            <button class="btn btn-primary" type="button" id="send">Send
+            </button>
+          </span>
+        </div>
+        <p class="help-block">Example: "Hello", "4 Hello"</p>
+      </div>
+    </div>
+  </div>
+</body>
+</html>

net/grpc/gateway/examples/echo/commonjs-example/package.json

@@ -0,0 +1,10 @@
+{
+  "name": "grpc-web-commonjs-example",
+  "version": "0.1.0",
+  "description": "gRPC-Web CommonJS client example",
+  "license": "Apache-2.0",
+  "devDependencies": {
+    "browserify": "16",
+    "google-protobuf": "3"
+  }
+}

net/grpc/gateway/examples/echo/echoapp.js

@@ -0,0 +1,121 @@
+const echoapp = {};
+
+echoapp.EchoApp = function(echoService, ctors, handlers) {
+  this.echoService = echoService;
+  this.ctors = ctors;
+  this.handlers = handlers;
+};
+
+echoapp.EchoApp.INTERVAL = 500; // ms
+echoapp.EchoApp.MAX_STREAM_MESSAGES = 50;
+
+echoapp.EchoApp.addMessage = function(message, cssClass) {
+  $("#first").after(
+    $("<div/>").addClass("row").append(
+      $("<h2/>").append(
+        $("<span/>").addClass("label " + cssClass).text(message))));
+};
+
+echoapp.EchoApp.addLeftMessage = function(message) {
+  this.addMessage(message, "label-primary pull-left");
+};
+
+echoapp.EchoApp.addRightMessage = function(message) {
+  this.addMessage(message, "label-default pull-right");
+};
+
+echoapp.EchoApp.prototype.echo = function(msg) {
+  echoapp.EchoApp.addLeftMessage(msg);
+  var unaryRequest = new this.ctors.EchoRequest();
+  unaryRequest.setMessage(msg);
+  this.echoService.echo(unaryRequest, {"custom-header-1": "value1"},
+                        function(err, response) {
+    if (err) {
+      echoapp.EchoApp.addRightMessage('Error code: '+err.code+' "'+err.message+'"');
+    } else {
+      setTimeout(function () {
+        echoapp.EchoApp.addRightMessage(response.getMessage());
+      }, echoapp.EchoApp.INTERVAL);
+    }
+  });
+};
+
+echoapp.EchoApp.prototype.echoError = function(msg) {
+  echoapp.EchoApp.addLeftMessage(msg);
+  var unaryRequest = new this.ctors.EchoRequest();
+  unaryRequest.setMessage(msg);
+  this.echoService.echoAbort(unaryRequest, {}, function(err, response) {
+    if (err) {
+      echoapp.EchoApp.addRightMessage('Error code: '+err.code+' "'+err.message+'"');
+    }
+  });
+};
+
+echoapp.EchoApp.prototype.repeatEcho = function(msg, count) {
+  echoapp.EchoApp.addLeftMessage(msg);
+  if (count > echoapp.EchoApp.MAX_STREAM_MESSAGES) {
+    count = echoapp.EchoApp.MAX_STREAM_MESSAGES;
+  }
+  var streamRequest = new this.ctors.ServerStreamingEchoRequest();
+  streamRequest.setMessage(msg);
+  streamRequest.setMessageCount(count);
+  streamRequest.setMessageInterval(echoapp.EchoApp.INTERVAL);
+
+  var stream = this.echoService.serverStreamingEcho(
+    streamRequest,
+    {"custom-header-1": "value1"});
+  var self = this;
+  stream.on('data', function(response) {
+    echoapp.EchoApp.addRightMessage(response.getMessage());
+  });
+  stream.on('status', function(status) {
+    self.handlers.checkGrpcStatusCode(status);
+    if (status.metadata) {
+      console.log("Received metadata");
+      console.log(status.metadata);
+    }
+  });
+  stream.on('error', function(err) {
+    echoapp.EchoApp.addRightMessage('Error code: '+err.code+' "'+err.message+'"');
+  });
+  stream.on('end', function() {
+    console.log("stream end signal received");
+  });
+};
+
+echoapp.EchoApp.prototype.send = function(e) {
+  var msg = $("#msg").val().trim();
+  $("#msg").val(''); // clear the text box
+  if (!msg) return false;
+
+  if (msg.indexOf(' ') > 0) {
+    var count = msg.substr(0, msg.indexOf(' '));
+    if (/^\d+$/.test(count)) {
+      this.repeatEcho(msg.substr(msg.indexOf(' ') + 1), count);
+    } else if (count == 'err') {
+      this.echoError(msg.substr(msg.indexOf(' ') + 1));
+    } else {
+      this.echo(msg);
+    }
+  } else {
+    this.echo(msg);
+  }
+
+  return false;
+};
+
+echoapp.EchoApp.prototype.load = function() {
+  var self = this;
+  $(document).ready(function() {
+    // event handlers
+    $("#send").click(self.send);
+    $("#msg").keyup(function (e) {
+      if (e.keyCode == 13) self.send(); // enter key
+      return false;
+    });
+
+    $("#msg").focus();
+  });
+};
+
+module.exports = echoapp;