Moved configuration to wiki, added extra comments in demo JS

Author: Daniel Hendricks

README.md

@@ -9,14 +9,27 @@
 A simple example of using [Node.js](https://nodejs.org/) to send Growl-style messages to a browser via [Socket.IO](https://socket.io/).
 
 - [Installation](#installation)
-- [Configuration](#configuration)
+- [Configuration](https://github.com/dmhendricks/nodejs-simple-message-relay/wiki/Configuration)
+	- [Setting Environment](https://github.com/dmhendricks/nodejs-simple-message-relay/wiki/Configuration#setting-environment)
 - [Usage](#usage)
 - [Screenshot](#screenshot)
 
 ### Requirements
 
 - [Node.js](https://nodejs.org/)
 
+### How It Works
+
+**The server does one thing:** It accepts JSON data submitted to the endpoint and forwards it to the specified socket. It will relay _any_ data that you submit - it is up to the listening client to consume it.
+
+You can have any number of clients listening to different sockets. In this way, you can have multiple apps listening for different events and different payloads. Purely as examples, you could have all of the following:
+
+- An admin panel that listens on a socket named `admin-notifications`, receiving information about system events.
+- An e-commerce site that listens on a socket named `sales-popups`, which displays a sale notification to visitors, similar to [Sales Pop](http://sales-pop.demo.beeketing.com/).
+- A real-time chat application that listens on a socket named `chat-app`, which broadcasts user messages as they are submitted.
+
+These are just examples - you can relay any data to any number of sockets that you wish. **The included demo page is simply an example of consuming data received from the server.** Your usage will vary.
+
 ### Goals
 
 - [x] Add ability to limit specific socket names
@@ -26,7 +39,7 @@ A simple example of using [Node.js](https://nodejs.org/) to send Growl-style mes
 - [ ] Add example with custom template and image
 - [ ] Improve input validation
 - [ ] Improve exception handling
-- [ ] WordPress plugin to function similar to [Sales Pop](http://sales-pop.demo.beeketing.com/)
+- [ ] WordPress plugin and integrations
 
 ## Installation
 
@@ -40,37 +53,6 @@ npm run start
 ```
 :pushpin: For local development, you can use `npm run dev` instead to automatically reload the server as you modify and save files.
 
-## Configuration
-
-Configuration files are located in the `config` directory. `default.json` is used when `NODE_ENV` is not defined or where a matching environment configuration file does not exist.
-
-### Setting Environment
-
-If you'd like to have a different [configuration file](https://github.com/lorenwest/node-config/wiki/Configuration-Files#file-load-order/) a particular environment ("production", for example):
-
-1. Set the environment at the command line: `export NODE_ENV=production`
-2. Create a `config/production.json` file with variables from [`config/default.json`](https://github.com/dmhendricks/nodejs-simple-message-relay/blob/master/config/default.json) that you'd like to override. Example:
-
-```json
-{
-    "server": {
-        "address": "0.0.0.0"
-    },
-    "demo_page": false,
-    "api_keys": [
-        "abc123def",
-        "tuv456xyz"
-    ],
-    "sockets": [
-        "my-socket-name"
-    ]
-}
-```
-
-:warning: If `api_keys` is an empty array, validation will not occur and **_all message_** will be accepted (useful for local development and debugging, not recommended when publicly accessible).
-
-:pushpin: See [restify-cors-middleware](https://github.com/Tabcorp/restify-cors-middleware#usage) for CORS configuration options.
-
 ## Usage
 
 Once the server is running:

gulpfile.js

@@ -1,6 +1,7 @@
 /**
  * Gulpfile for Node.js Simple Message Relay
  *    Usage: npx gulp
+ *           npx gulp [task_name]
  */
 
 let pkg = require( './package.json' ),
@@ -32,7 +33,7 @@ const BROWSERS_LIST = [ 'last 2 version', '> 1%', 'ie >= 11', 'last 2 Android ve
  * Gulp Tasks
  */
 
-// Watch files
+// Watch files for changes
 function watchFiles() {
   gulp.watch( `${src.js}/**/*.js`, gulp.series( 'taskJS' ) );
   gulp.watch( `${src.sass}/**/*.scss`, gulp.series( 'taskCSS' ) );

public/assets/js/main.js

@@ -5,12 +5,12 @@ const socket = io.connect( url, { reconnection: true } ); // Set reconnection to
 
 (function($) {
 
-    var socket_name = 'my-socket-name';
+    var socket_name = 'my-socket-name'; // Name as you wish
     var status = $( '#status' ), submit_button = $( 'button.submit' ), simple_notification = $( '#simple_notification' ), simple_notification_color = $( '#simple_notification_color' );
     var notify = $.noist( { position: 'bottom left' } );
     notify.options.duration = 1500;
 
-    // Set connection state
+    // Display connection state
     socket.on( 'connect', function() {
 
         status.attr( 'data-connected', true ).html( 'Connected' );
@@ -32,7 +32,8 @@ const socket = io.connect( url, { reconnection: true } ); // Set reconnection to
 
         console.log( `Recevied [${socket_name}]`, response );
 
-        // Display notification
+        // Display notification - For this example, I am displaying a slide-out message on the demo page.
+        // You can consume the response data as you desire and for your own needs.
         notify.message( response.message, response.color );
 
     });
@@ -41,13 +42,15 @@ const socket = io.connect( url, { reconnection: true } ); // Set reconnection to
     submit_button.on( 'click', function( event ) {
 
         event.preventDefault();
+
+        // Disallow submitting empty messages
         if( !$( 'input' ).val().trim() ) {
             $( 'input' ).addClass( 'empty' );
             return;
         }
         simple_notification.removeClass( 'empty' );
 
-        // Send message to Socket.IO
+        // Send message to Socket.IO endpoint
         jQuery.ajax ({
             url: url + '/send/' + socket_name,
             type: 'POST',
@@ -58,8 +61,10 @@ const socket = io.connect( url, { reconnection: true } ); // Set reconnection to
             dataType: "json",
             contentType: "application/json; charset=utf-8",
             success: function( response ){
+
                 simple_notification.val( '' );
                 console.log( 'Message sent: ', response );
+
             }
         });
 

public/src/js/main.js

@@ -5,12 +5,12 @@ const socket = io.connect( url, { reconnection: true } ); // Set reconnection to
 
 (function($) {
 
-    var socket_name = 'my-socket-name';
+    var socket_name = 'my-socket-name'; // Name as you wish
     var status = $( '#status' ), submit_button = $( 'button.submit' ), simple_notification = $( '#simple_notification' ), simple_notification_color = $( '#simple_notification_color' );
     var notify = $.noist( { position: 'bottom left' } );
     notify.options.duration = 1500;
 
-    // Set connection state
+    // Display connection state
     socket.on( 'connect', function() {
 
         status.attr( 'data-connected', true ).html( 'Connected' );
@@ -32,7 +32,8 @@ const socket = io.connect( url, { reconnection: true } ); // Set reconnection to
 
         console.log( `Recevied [${socket_name}]`, response );
 
-        // Display notification
+        // Display notification - For this example, I am displaying a slide-out message on the demo page.
+        // You can consume the response data as you desire and for your own needs.
         notify.message( response.message, response.color );
 
     });
@@ -41,13 +42,15 @@ const socket = io.connect( url, { reconnection: true } ); // Set reconnection to
     submit_button.on( 'click', function( event ) {
 
         event.preventDefault();
+
+        // Disallow submitting empty messages
         if( !$( 'input' ).val().trim() ) {
             $( 'input' ).addClass( 'empty' );
             return;
         }
         simple_notification.removeClass( 'empty' );
 
-        // Send message to Socket.IO
+        // Send message to Socket.IO endpoint
         jQuery.ajax ({
             url: url + '/send/' + socket_name,
             type: 'POST',
@@ -58,8 +61,10 @@ const socket = io.connect( url, { reconnection: true } ); // Set reconnection to
             dataType: "json",
             contentType: "application/json; charset=utf-8",
             success: function( response ){
+
                 simple_notification.val( '' );
                 console.log( 'Message sent: ', response );
+
             }
         });