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,44 @@
+# 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
+
+RUN cp /github/grpc-web/net/grpc/gateway/examples/echo/nginx_simple.conf \
+  /etc/nginx/nginx.conf
+
+RUN curl -sL https://deb.nodesource.com/setup_8.x | bash - && \
+  apt-get install -y nodejs
+
+RUN cd /github/grpc-web/javascript/net/grpc/web && \
+  make
+
+RUN cd /github/grpc-web/packages/grpc-web && \
+  rm -rf node_modules && \
+  npm install && \
+  npm run build && \
+  npm link
+
+RUN protoc -I=/github/grpc-web/net/grpc/gateway/examples/echo echo.proto \
+  --plugin=protoc-gen-grpc-web=/github/grpc-web/javascript/net/grpc/web/protoc-gen-grpc-web \
+  --js_out=import_style=commonjs:/github/grpc-web/net/grpc/gateway/examples/echo/commonjs-example \
+  --grpc-web_out=import_style=commonjs,mode=grpcweb,out=echo_grpc_pb.js:/github/grpc-web/net/grpc/gateway/examples/echo/commonjs-example
+
+RUN cd /github/grpc-web/net/grpc/gateway/examples/echo/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,9 +30,11 @@ RUN apt-get update && apt-get install -y \
   nginx \
   zip
 
-RUN git clone https://github.com/grpc/grpc-web /github/grpc-web
+COPY . /github/grpc-web
 
 RUN cd /github/grpc-web && \
+  rm -rf third_party && \
+  git checkout third_party && \
   ./scripts/init_submodules.sh
 
 RUN cd /github/grpc-web/third_party/grpc && \

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

@@ -0,0 +1,119 @@
+const {EchoRequest} = require('./echo_pb.js');
+const {EchoServiceClient} = require('./echo_grpc_pb.js');
+const {ServerStreamingEchoRequest} = require('./echo_pb.js');
+const grpc = {};
+grpc.web = require('grpc-web');
+
+const INTERVAL = 500; // ms
+const MAX_STREAM_MESSAGES = 50;
+var echoService;
+
+var addMessage = function(message, cssClass) {
+  $("#first").after(
+    $("<div/>").addClass("row").append(
+      $("<h2/>").append(
+        $("<span/>").addClass("label " + cssClass).text(message))));
+};
+
+var addLeftMessage = function(message) {
+  addMessage(message, "label-primary pull-left");
+};
+
+var addRightMessage = function(message) {
+  addMessage(message, "label-default pull-right");
+};
+
+var echo = function(msg) {
+  addLeftMessage(msg);
+  var unaryRequest = new EchoRequest();
+  unaryRequest.setMessage(msg);
+  echoService.echo(unaryRequest, {"custom-header-1": "value1"},
+                   function(err, response) {
+    if (err) {
+      addRightMessage('Error code: '+err.code+' "'+err.message+'"');
+    } else {
+      setTimeout(function () {
+        addRightMessage(response.getMessage());
+      }, INTERVAL);
+    }
+  });
+};
+
+var echoError = function(msg) {
+  addLeftMessage(msg);
+  var unaryRequest = new EchoRequest();
+  unaryRequest.setMessage(msg);
+  echoService.echoAbort(unaryRequest, {}, function(err, response) {
+    if (err) {
+      addRightMessage('Error code: '+err.code+' "'+err.message+'"');
+      console.log('Error code: ' + err.code +
+                  (err.code == grpc.web.StatusCode.ABORTED ?
+                   ' is ' : ' is not ') +
+                  'StatusCode.ABORTED');
+    }
+  });
+};
+
+var repeatEcho = function(msg, count) {
+  addLeftMessage(msg);
+  if (count > MAX_STREAM_MESSAGES) count = MAX_STREAM_MESSAGES;
+  var streamRequest = new ServerStreamingEchoRequest();
+  streamRequest.setMessage(msg);
+  streamRequest.setMessageCount(count);
+  streamRequest.setMessageInterval(INTERVAL);
+
+  var stream = echoService.serverStreamingEcho(streamRequest,
+                                               {"custom-header-1": "value1"});
+  stream.on('data', function(response) {
+    addRightMessage(response.getMessage());
+  });
+  stream.on('status', function(status) {
+    if (status.code != grpc.web.StatusCode.OK) {
+      addRightMessage('Error code: '+status.code+' "'+status.details+'"');
+    }
+    if (status.metadata) {
+      console.log("Received metadata");
+      console.log(status.metadata);
+    }
+  });
+  stream.on('error', function(err) {
+    addRightMessage('Error code: '+err.code+' "'+err.message+'"');
+  });
+  stream.on('end', function() {
+    console.log("stream end signal received");
+  });
+};
+
+var 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)) {
+      repeatEcho(msg.substr(msg.indexOf(' ') + 1), count);
+    } else if (count == 'err') {
+      echoError(msg.substr(msg.indexOf(' ') + 1));
+    } else {
+      echo(msg);
+    }
+  } else {
+    echo(msg);
+  }
+
+  return false;
+};
+
+$(document).ready(function() {
+  echoService = new EchoServiceClient('http://localhost:8080', null, null);
+
+  // event handlers
+  $("#send").click(send);
+  $("#msg").keyup(function (e) {
+    if (e.keyCode == 13) send(); // enter key
+    return false;
+  });
+
+  $("#msg").focus();
+});

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/nginx_simple.conf

@@ -17,4 +17,11 @@ http {
       root /var/www/html;
     }
   }
+  server {
+    listen 8081;
+    server_name localhost;
+    location ~ \.(html|js)$ {
+      root /github/grpc-web/net/grpc/gateway/examples/echo/commonjs-example;
+    }
+  }
 }