Clone Proteus JS Quickstart Project

Clone the Proteus Browser Demo project from Github.

git clone https://github.com/netifi/proteus-quickstart-js.git

Build the Project

After you have cloned the project change to the proteus-browser-demo directory and build the project:

cd proteus-quickstart-js && yarn install && yarn protoc

Run the Broker Locally

Run a local instance of the broker with Docker for your clients and server to connect with

1. Download the Broker

   Once the project is built, you need to download the Proteus Broker. The broker is distributed as a Docker container on Docker Hub. To download the Proteus Broker Docker image, run the following command in a new terminal window:

   docker pull netifi/proteus

2. Start the Broker

   Now that you have downloaded the broker from Docker Hub, start it by running the following command:

   docker run \
   -p 8001:8001 \
   -p 7001:7001 \
   -p 9000:9000 \
   -p 8101:8101 \
   -e BROKER_SERVER_OPTS="'-Dnetifi.authentication.0.accessKey=9007199254740991'  \
   '-Dnetifi.broker.console.enabled=true' \
   '-Dnetifi.broker.ssl.disabled=true' \
   '-Dnetifi.authentication.0.accessToken=kTBDVtfRBO4tHOnZzSyY5ym2kfY=' \
   '-Dnetifi.broker.admin.accessKey=9007199254740991' \
   '-Dnetifi.broker.admin.accessToken=kTBDVtfRBO4tHOnZzSyY5ym2kfY='" \
   netifi/proteus:1.5.3

Run the Node App

An npm script starts the HelloService server on port 9091:

yarn server

Run the Browser App

Running the project with 'start' will start a webserver that hosts the client application at port 3000:

yarn start

View the Browser App

Open one or more browser tabs and navigate to

http://localhost:3000

The application calls "SayHello" on the Node HelloService, reflected in its log. The Client application will print out the response.

Optional: Reverse Roles of Browser and Node

A couple of changes are required to reverse the roles of the Browser and Node.

1. Modify the Browser App

   A small change is required to start the Browser app as a server. In the root proteus-quickstart-js directory, open the file webpack.config.js. Line 14 reads

   '__AS_SERVER__': false,

   Change the value to true

   '__AS_SERVER__': true,

   and save the file.

2. Run the Browser App

   Running the project will start a webserver that hosts the application at port 3000 as before but now it runs as a HelloService server:

   yarn start

3. View the Browser App

   Open one of more browser tabs and navigate to

   http://localhost:3000

   The application connects to the local Broker as a HelloService server.

4. Run the Node App

   Running this npm script will start the node process as a HelloService client:

   yarn server-as-client

   The console now indicates that the Node app acted as a client and received a reply from the Browser!