Server Event Group

This site uses Just the Docs, a documentation theme for Jekyll.

Demo

Demonstrates per-user (browser) server-event action using the following packages. Please refer to the following:

Caveats

  • IN PROGRESS - STILL DEVELOPING
    • This documentation describes what should be happening. If not, well, I’m working on it.
  • (pull requests welcome, but we need to tightly coordinate any merges.)
  • Read the document pages in this guide for each of the modules for more detailed information on their use/implementation.
  • Currently developing almost exclusively in Chrome, but have run it cursorily in Firefox. Need to test in more browsers.

To Set Up

This repository will set up a client/server development environment.

The server environment is created with docker-compose to avoid having to set up a separate virtual machine or actual machine for the server side.

Out of the box, the client environment is a vuejs source tree, but without any modules installed.

There are a couple of pre-requisites to setting up the environment:

  • Docker ( https://docker.com ) needs to be installed and running.
  • npm or yarn needs to be installed and available at the command-line (I use yarn.)
  • node needs to be run on the client side, since it is a vuejs application. See https://vuejs.org for more information.
  • An IDE is useful - I’m using vscode ( https:visualstudio.com ).

The docker-compose up command will build an NGINX server environment under alpine. It will install and run nodemon at port 9229, so you can connect to a debugger (under vscode, anyway.) It also exposes port 3000 so you can curl directly to the server, if there is a need.

Since it is a development environment, you need to do the following steps to get it up and running:

  1. Clone this repository (presumably done.)
  2. CD into the ./site directory of your clone.
  3. Invoke npm install or yarn install from the command line.
  4. Invoke npm serve or yarn serve from the command line.
  5. Open another commandline window and cd to the demo root.
  6. Invoke docker-compose up from the command line.

Once everything is up and running, you can open a browser and type:

http://localhost:8080

Next:

  • Type in a name in the text field, and hit the Set button.
    • The ‘time’ field at the top will start updating - this is an LT “listen” registration.
    • The Submit button will be enabled.
  • Hitting the Submit button will submit a “task” registration (timeout_test) - it will wait five seconds and then signal completion.
    • When the task has been submitted, the Trigger AdHoc Task Server Response button and others will be enabled.
    • Note your id and registration timestamp will be reflected in the Registrants window.
  • You can, hit the Trigger AdHoc Task Server Response button, which will force the task server to initiate an immediate ad hoc response (reflected by count in the Response header.)
  • Open more browsers and enter a different name in each, then hit the Submit! and Trigger AdHoc Task Server Response buttons to see each client receives its own response.
  • Open another browser (or more) and enter the same name as one of the other browsers. Note that the responses are reflected for all clients registered in the same name.
  • Hit the Stop Listening button to remove the user’s connection. The list will update in all the open browsers to show the user has been removed and the State entry will show “Closed”.

Development

Because this is a client/server app, with each side referencing it’s own npm-module, the development environment is a bit complex. Here is how I manage it:

Demo Application

Open an IDE in each of the directories ./site and _./app. This will make the application source available in the IDE.

  • On the client side (./site), this will be a vuejs application.
  • On the server side (./app), this will be a node express application.

Both are hot-served (not the server under Windows, I have discovered) - if you make a change to the source in either directory, they will update. Unfortunately, this does not apply if you are changing source in either of the other modules. See next.

Modules

Clone each of the modules locally in separate directories. You can either use the ‘npm-link’, ‘yarn-link’ or ‘yalc’ facilities to make them available in the ./site and ./app folders.

I personally like ‘yalc’, since the ‘*-link’ facilities can be a bit flaky.

  • Install yalc:
  • npm install -g yalc or

  • yarn global add yalc

  • cd into each of the module directories and type yalc publish.
  • cd into the demo ./site directory and type yalc add @aph/server-event-client
  • restart the server (ctrl-c if it’s running and npm serve or yarn serve).
  • cd into the demo ./app directory and type yalc add @aph/server-event-mgr
  • restart the container from the demo root directory (docker-compose down and docker-compose up)

If you change source in either of the modules, you need to type yalc push in the module directory and then restart the applicable server, same as above.

If using yalc, when you’re ready to commit, you need to clean the yalc cruft out of any changed directories. In each module directory, type yalc remove.

Notes

Just some thoughts I’ve picked up while doing this.

IDE/Terminals

It can be a bit difficult keeping everything straight. I open an IDE in each of the ./site and ./app directories, and a terminal window in each of the module directories, as well as a terminal window in the root demo directory.

Rather than open in IDE in the module directories, I just open the file I want to see in the relevent IDE - for instance, if I want to see the index.js file for the server-event-client module, I just open it in the IDE pointing to the ./site directory, since that’s for what it applies.

Note that regardless of where you change a module file, you need to run yalc push in the module directory to get it re-submitted to the demo dir. If in the app server, you need to kill the server, and then run docker-compose up for changes to take effect.

A large monitor/multiple monitors helps.

Polyfills for IE

The demo should work in IE. Because it’s a Vuejs app, it uses a number of features that IE does not support, like IE6 and promises. Fortunately, there are polyfills available:

  • babel-regenerator-runtime
  • promise-polyfill These are installed via yarn. The promise-polyfill package has to be expressly imported in the app. Look at src/main.js for more information.

Note you don’t need these to use the modules - they’re just for the demo to work.