diff --git a/docker-compose.yml b/docker-compose.yml index 467c5575..cf2c9ddc 100644 --- a/docker-compose.yml +++ b/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" diff --git a/net/grpc/gateway/docker/commonjs_client_example/Dockerfile b/net/grpc/gateway/docker/commonjs_client_example/Dockerfile new file mode 100644 index 00000000..d2622245 --- /dev/null +++ b/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"] diff --git a/net/grpc/gateway/docker/prereqs/Dockerfile b/net/grpc/gateway/docker/prereqs/Dockerfile index e1a543ac..0456eeed 100644 --- a/net/grpc/gateway/docker/prereqs/Dockerfile +++ b/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 diff --git a/net/grpc/gateway/docker/static_assets/Dockerfile b/net/grpc/gateway/docker/static_assets/Dockerfile index 42805403..3852a4b8 100644 --- a/net/grpc/gateway/docker/static_assets/Dockerfile +++ b/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 diff --git a/net/grpc/gateway/examples/echo/Makefile b/net/grpc/gateway/examples/echo/Makefile index 7605e04d..335873c9 100644 --- a/net/grpc/gateway/examples/echo/Makefile +++ b/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: diff --git a/net/grpc/gateway/examples/echo/commonjs-example/.gitignore b/net/grpc/gateway/examples/echo/commonjs-example/.gitignore new file mode 100644 index 00000000..d5f19d89 --- /dev/null +++ b/net/grpc/gateway/examples/echo/commonjs-example/.gitignore @@ -0,0 +1,2 @@ +node_modules +package-lock.json diff --git a/net/grpc/gateway/examples/echo/commonjs-example/client.js b/net/grpc/gateway/examples/echo/commonjs-example/client.js new file mode 100644 index 00000000..65ec0acd --- /dev/null +++ b/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(); diff --git a/net/grpc/gateway/examples/echo/commonjs-example/echo_commonjs_test.html b/net/grpc/gateway/examples/echo/commonjs-example/echo_commonjs_test.html new file mode 100644 index 00000000..0e422c13 --- /dev/null +++ b/net/grpc/gateway/examples/echo/commonjs-example/echo_commonjs_test.html @@ -0,0 +1,40 @@ + + + + + + + + + + + + + + + + + + +Echo Example + + + + + +
+
+
+
+ + + + +
+

Example: "Hello", "4 Hello"

+
+
+
+ + diff --git a/net/grpc/gateway/examples/echo/commonjs-example/package.json b/net/grpc/gateway/examples/echo/commonjs-example/package.json new file mode 100644 index 00000000..62e42f4a --- /dev/null +++ b/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" + } +} diff --git a/net/grpc/gateway/examples/echo/echoapp.js b/net/grpc/gateway/examples/echo/echoapp.js new file mode 100644 index 00000000..aee224c7 --- /dev/null +++ b/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( + $("
").addClass("row").append( + $("

").append( + $("").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; diff --git a/net/grpc/gateway/examples/echo/echotest.html b/net/grpc/gateway/examples/echo/echotest.html index 93a4de8c..3e857dfb 100644 --- a/net/grpc/gateway/examples/echo/echotest.html +++ b/net/grpc/gateway/examples/echo/echotest.html @@ -21,122 +21,27 @@ + + diff --git a/net/grpc/gateway/examples/echo/nginx_simple.conf b/net/grpc/gateway/examples/echo/nginx_simple.conf index b7387495..1fb91abd 100644 --- a/net/grpc/gateway/examples/echo/nginx_simple.conf +++ b/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; + } + } }