@caboodle-tech/node-simple-server 2.0.1 → 3.0.1

package/examples/www-production/css/normalize.css

@@ -0,0 +1,349 @@
+/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
+
+/* Document
+   ========================================================================== */
+
+/**
+ * 1. Correct the line height in all browsers.
+ * 2. Prevent adjustments of font size after orientation changes in iOS.
+ */
+
+html {
+  line-height: 1.15; /* 1 */
+  -webkit-text-size-adjust: 100%; /* 2 */
+}
+
+/* Sections
+   ========================================================================== */
+
+/**
+ * Remove the margin in all browsers.
+ */
+
+body {
+  margin: 0;
+}
+
+/**
+ * Render the `main` element consistently in IE.
+ */
+
+main {
+  display: block;
+}
+
+/**
+ * Correct the font size and margin on `h1` elements within `section` and
+ * `article` contexts in Chrome, Firefox, and Safari.
+ */
+
+h1 {
+  font-size: 2em;
+  margin: 0.67em 0;
+}
+
+/* Grouping content
+   ========================================================================== */
+
+/**
+ * 1. Add the correct box sizing in Firefox.
+ * 2. Show the overflow in Edge and IE.
+ */
+
+hr {
+  box-sizing: content-box; /* 1 */
+  height: 0; /* 1 */
+  overflow: visible; /* 2 */
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+pre {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/* Text-level semantics
+   ========================================================================== */
+
+/**
+ * Remove the gray background on active links in IE 10.
+ */
+
+a {
+  background-color: transparent;
+}
+
+/**
+ * 1. Remove the bottom border in Chrome 57-
+ * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+ */
+
+abbr[title] {
+  border-bottom: none; /* 1 */
+  text-decoration: underline; /* 2 */
+  text-decoration: underline dotted; /* 2 */
+}
+
+/**
+ * Add the correct font weight in Chrome, Edge, and Safari.
+ */
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+code,
+kbd,
+samp {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/**
+ * Add the correct font size in all browsers.
+ */
+
+small {
+  font-size: 80%;
+}
+
+/**
+ * Prevent `sub` and `sup` elements from affecting the line height in
+ * all browsers.
+ */
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+/* Embedded content
+   ========================================================================== */
+
+/**
+ * Remove the border on images inside links in IE 10.
+ */
+
+img {
+  border-style: none;
+}
+
+/* Forms
+   ========================================================================== */
+
+/**
+ * 1. Change the font styles in all browsers.
+ * 2. Remove the margin in Firefox and Safari.
+ */
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: inherit; /* 1 */
+  font-size: 100%; /* 1 */
+  line-height: 1.15; /* 1 */
+  margin: 0; /* 2 */
+}
+
+/**
+ * Show the overflow in IE.
+ * 1. Show the overflow in Edge.
+ */
+
+button,
+input { /* 1 */
+  overflow: visible;
+}
+
+/**
+ * Remove the inheritance of text transform in Edge, Firefox, and IE.
+ * 1. Remove the inheritance of text transform in Firefox.
+ */
+
+button,
+select { /* 1 */
+  text-transform: none;
+}
+
+/**
+ * Correct the inability to style clickable types in iOS and Safari.
+ */
+
+button,
+[type="button"],
+[type="reset"],
+[type="submit"] {
+  -webkit-appearance: button;
+}
+
+/**
+ * Remove the inner border and padding in Firefox.
+ */
+
+button::-moz-focus-inner,
+[type="button"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner,
+[type="submit"]::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+/**
+ * Restore the focus styles unset by the previous rule.
+ */
+
+button:-moz-focusring,
+[type="button"]:-moz-focusring,
+[type="reset"]:-moz-focusring,
+[type="submit"]:-moz-focusring {
+  outline: 1px dotted ButtonText;
+}
+
+/**
+ * Correct the padding in Firefox.
+ */
+
+fieldset {
+  padding: 0.35em 0.75em 0.625em;
+}
+
+/**
+ * 1. Correct the text wrapping in Edge and IE.
+ * 2. Correct the color inheritance from `fieldset` elements in IE.
+ * 3. Remove the padding so developers are not caught out when they zero out
+ *    `fieldset` elements in all browsers.
+ */
+
+legend {
+  box-sizing: border-box; /* 1 */
+  color: inherit; /* 2 */
+  display: table; /* 1 */
+  max-width: 100%; /* 1 */
+  padding: 0; /* 3 */
+  white-space: normal; /* 1 */
+}
+
+/**
+ * Add the correct vertical alignment in Chrome, Firefox, and Opera.
+ */
+
+progress {
+  vertical-align: baseline;
+}
+
+/**
+ * Remove the default vertical scrollbar in IE 10+.
+ */
+
+textarea {
+  overflow: auto;
+}
+
+/**
+ * 1. Add the correct box sizing in IE 10.
+ * 2. Remove the padding in IE 10.
+ */
+
+[type="checkbox"],
+[type="radio"] {
+  box-sizing: border-box; /* 1 */
+  padding: 0; /* 2 */
+}
+
+/**
+ * Correct the cursor style of increment and decrement buttons in Chrome.
+ */
+
+[type="number"]::-webkit-inner-spin-button,
+[type="number"]::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/**
+ * 1. Correct the odd appearance in Chrome and Safari.
+ * 2. Correct the outline style in Safari.
+ */
+
+[type="search"] {
+  -webkit-appearance: textfield; /* 1 */
+  outline-offset: -2px; /* 2 */
+}
+
+/**
+ * Remove the inner padding in Chrome and Safari on macOS.
+ */
+
+[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/**
+ * 1. Correct the inability to style clickable types in iOS and Safari.
+ * 2. Change font properties to `inherit` in Safari.
+ */
+
+::-webkit-file-upload-button {
+  -webkit-appearance: button; /* 1 */
+  font: inherit; /* 2 */
+}
+
+/* Interactive
+   ========================================================================== */
+
+/*
+ * Add the correct display in Edge, IE 10+, and Firefox.
+ */
+
+details {
+  display: block;
+}
+
+/*
+ * Add the correct display in all browsers.
+ */
+
+summary {
+  display: list-item;
+}
+
+/* Misc
+   ========================================================================== */
+
+/**
+ * Add the correct display in IE 10+.
+ */
+
+template {
+  display: none;
+}
+
+/**
+ * Add the correct display in IE 10.
+ */
+
+[hidden] {
+  display: none;
+}

package/examples/www-production/index.html

@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Website Demo</title>
+    <link rel="stylesheet" href="./css/normalize.css">
+    <link rel="stylesheet" href="./css/main.css">
+    <script src="./js/main.js" defer></script>
+</head>
+<body>
+    <div id="page-container">
+        <header>
+            <div class="content">
+                <img class="logo" src="./assets/imgs/logo.png" title="Caboodle Tech Inc." alt="Caboodle Tech logo">
+            </div>
+        </header>
+        <main>
+            <div class="content">
+                <h1>Production Website/Application Demo</h1>
+                <p>
+                    This is a simple demo of using Node Simple Server (NSS) for a static <i>production</i> website (HTML, CSS, JS). <strong>This is a good option for a web based internal work application.</strong> If NSS disconnects or crashes that will not be indicated to the user visually like in the website demo. You can still communicate with the backend via NSS websocket: <code>NSS_WS.send(...)</code>
+                </p>
+                <p>
+                    You can also open the developer console to see helpful messages being printed by this demo.
+                </p>
+                <div id="fox-container">
+                    <svg class="loader" version="1.1" id="L4" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 100 100" enable-background="new 0 0 0 0" xml:space="preserve">
+                        <circle fill="#7d7d7d" stroke="none" cx="6" cy="50" r="6">
+                        <animate attributeName="opacity" dur="1s" values="0;1;0" repeatCount="indefinite" begin="0.1"></animate>    
+                        </circle>
+                        <circle fill="#7d7d7d" stroke="none" cx="26" cy="50" r="6">
+                        <animate attributeName="opacity" dur="1s" values="0;1;0" repeatCount="indefinite" begin="0.2"></animate>       
+                        </circle>
+                        <circle fill="#7d7d7d" stroke="none" cx="46" cy="50" r="6">
+                        <animate attributeName="opacity" dur="1s" values="0;1;0" repeatCount="indefinite" begin="0.3"></animate>     
+                        </circle>
+                    </svg>
+                </div>
+                <p id="fox-details"></p>
+            </div>
+        </main>
+        <footer>
+            <div class="content">
+                Made with <svg class="heart-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M18 1l-6 4-6-4-6 5v7l12 10 12-10v-7z"/></svg> by Caboodle Tech
+            </div>
+        </footer>
+    </div>
+</body>
+</html>

package/examples/www-production/js/main.js

@@ -0,0 +1,33 @@
+function loadFoxImage() {
+
+    const container = document.getElementById('fox-container');
+    if (!container) {
+        console.log('DEMO: Could not locate the image container for the fox image.');
+        return;
+    }
+
+    const details = document.getElementById('fox-details');
+    if (!details) {
+        console.log('DEMO: Could not locate the details container for the fox image.');
+        return;
+    }
+
+    fetch('https://randomfox.ca/floof/')
+        .then((response) => response.json())
+        .then((json) => {
+            container.style.background = 'transparent';
+            container.innerHTML = `<img src="${json.image}">`;
+            details.innerHTML = `Image Source: <a href="${json.link}" target="_blank">${json.link}</a>`;
+            console.log('DEMO: Fox image successfully loaded.');
+        })
+        .catch((_) => {
+            console.log('DEMO: There was an error trying to load the fox image.');
+        });
+}
+
+document.addEventListener('DOMContentLoaded', () => {
+    console.log('DEMO: Loading a random image of a fox in 3 seconds...');
+    setTimeout(() => {
+        loadFoxImage();
+    }, 3000);
+});

package/handlers/live-reloading.html

@@ -2,16 +2,16 @@
 <style>
     #NSS_WS{display:flex;justify-content:center;align-items:center;position:fixed;right:15px;bottom:15px;z-index:9000;width:80px;height:45px;border-radius:25px;background:#000}#NSS_WS svg{margin-left:5px;fill:#ffffff}#NSS_WS span{display:inline-block;margin-right:5px;font-family:monospace;font-size:22px;color:#fff}
 </style>
-<script type="text/javascript">
+<script type='text/javascript'>
     // <![CDATA[
-    if ("WebSocket" in window) {
+    if ('WebSocket' in window) {
         NSS_WS = (() => {
             /** Handles showing the user the server disconnected and attempts to reconnect */
             const disconnected = () => {
                 const icon = '<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd"><path d="M6.817 5.084l-2.057-2.937 1.639-1.147 14.601 20.853-1.638 1.147-1.401-2h-12.461c-3.037 0-5.5-2.463-5.5-5.5 0-2.702 1.951-4.945 4.521-5.408.105-1.965.965-3.73 2.296-5.008zm3.032-1.771c.681-.204 1.403-.313 2.151-.313 4.006 0 7.267 3.141 7.479 7.092 2.57.463 4.521 2.706 4.521 5.408 0 1.898-.962 3.571-2.424 4.56l-1.149-1.64c.947-.627 1.573-1.702 1.573-2.92 0-2.969-2.688-3.766-4.433-3.72.324-3.983-2.114-6.78-5.567-6.78-.317 0-.624.023-.922.068l-1.229-1.755zm-4.349 15.687h11.061l-8.595-12.274c-1.038 1.169-1.618 2.895-1.533 5.054-1.954-.113-4.433.923-4.433 3.72 0 1.93 1.57 3.5 3.5 3.5z"></path></svg>';
                 // Create the icon container.
-                let div = document.createElement("DIV");
-                div.id = "NSS_WS";
+                let div = document.createElement('DIV');
+                div.id = 'NSS_WS';
                 div.innerHTML = '<span id="NSS_WS_RETRY">02</span>' + icon;
                 // Add the container to the page.
                 if (document.body.firstChild) {
@@ -21,7 +21,7 @@
                 }
                 // Keep updating the reconnect timer.
                 counterInterval = setInterval(function () {
-                    var counter = document.getElementById("NSS_WS_RETRY");
+                    var counter = document.getElementById('NSS_WS_RETRY');
                     var seconds = parseInt(counter.innerHTML) - 1;
                     if (seconds <= 0) {
                         seconds = 3000 * restartAttempts * 0.001;
@@ -40,17 +40,17 @@
 
             /** Reload the pages stylesheets. */
             const refreshCSS = () => {
-                const sheets = [].slice.call(document.getElementsByTagName("link"));
-                const head = document.getElementsByTagName("head")[0];
+                const sheets = [].slice.call(document.getElementsByTagName('link'));
+                const head = document.getElementsByTagName('head')[0];
                 for (let i = 0; i < sheets.length; i++) {
                     const elem = sheets[i];
                     const parent = elem.parentElement || head;
                     parent.removeChild(elem);
                     const rel = elem.rel;
-                    if ((elem.href && typeof rel != "string") || rel.length == 0 || rel.toLowerCase() == "stylesheet") {
-                        const url = elem.href.replace(/(&|\?)_cacheOverride=\d+/, "");
-                        let newUrl = url + (url.indexOf("?") >= 0 ? "&" : "?");
-                        newUrl += "_cacheOverride=" + new Date().valueOf();
+                    if ((elem.href && typeof rel != 'string') || rel.length == 0 || rel.toLowerCase() == 'stylesheet') {
+                        const url = elem.href.replace(/(&|\?)_cacheOverride=\d+/, '');
+                        let newUrl = url + (url.indexOf('?') >= 0 ? '&' : '?');
+                        newUrl += '_cacheOverride=' + new Date().valueOf();
                         elem.href = newUrl;
                     }
                     parent.appendChild(elem);
@@ -59,7 +59,7 @@
 
             /** Register a function or functions to call when this page receives a WebSocket message. */
             const registerCallback = (func) => {
-                if (whatIs(func) === "function") {
+                if (whatIs(func) === 'function') {
                     callbacks.push(func);
                 }
             };
@@ -78,7 +78,7 @@
                         }
                     }
                 };
-                http.open("GET", window.location.href);
+                http.open('GET', window.location.href);
                 http.send();
                 // Keep attempting to reconnect unless told not to.
                 if (autoRestart) {
@@ -94,12 +94,12 @@
             const send = (message) => {
                 if (ready && socket.readyState === WebSocket.OPEN) {
                     socket.send(JSON.stringify({
-                        data: message,
+                        message,
                         type: whatIs(message)
                     }));
                     return;
                 }
-                console.warn("Node Simple Server: The WebSocket is not ready or the connection was closed.");
+                console.warn('Node Simple Server: The WebSocket is not ready or the connection was closed.');
             };
 
             /** Generate a random unique ID for this page; will be registered in the back-end. */
@@ -139,31 +139,37 @@
             let restartAttempts = 0;
             let restartInterval = null;
 
+            // Prep window path.
+            let pathname = window.location.pathname;
+            if (pathname === '/') {
+                pathname = '';
+            }
+
             // Socket specific variables.
-            const protocol = window.location.protocol === "http:" ? "ws://" : "wss://";
-            const address = protocol + window.location.host + window.location.pathname + "/ws?id=" + pageId;
+            const protocol = window.location.protocol === 'http:' ? 'ws://' : 'wss://';
+            const address = `${protocol}{{HOST_ADDRESS}}${pathname}/ws?id=${pageId}`;
             const socket = new WebSocket(address);
 
             // Respond to messages the socket receives.
             socket.onmessage = (evt) => {
                 const msgObj = JSON.parse(evt.data); // NSS uses a standard messaging object.
                 switch (msgObj.message) {
-                    case "close":
+                    case 'close':
                         ready = false;
                         break;
-                    case "disableAutoRestart":
+                    case 'disableAutoRestart':
                         autoRestart = false;
                         clearInterval(restartInterval);
                         clearInterval(counterInterval);
-                        console.log("Node Simple Server: Auto restart disabled, manually refresh page if server disconnects.");
+                        console.log('Node Simple Server: Auto restart disabled, manually refresh page if server disconnects.');
                         break;
                     case 'ping':
                         send('pong');
                         break;
-                    case "refreshCSS":
+                    case 'refreshCSS':
                         refreshCSS();
                         break;
-                    case "reload":
+                    case 'reload':
                         window.location.reload();
                         break;
                     default:
@@ -173,14 +179,14 @@
                             }
                             return;
                         }
-                        console.log(`Received from WebSocket: ${msgObj.data}`);
+                        console.log(`Received from WebSocket: ${msgObj.message}`);
                 }
             };
 
             // Mark the script as not ready when the websocket connection is closed.
-            socket.addEventListener("close", () => {
+            socket.addEventListener('close', () => {
                 ready = false;
-                console.warn("Node Simple Server: Connection closed, live reload disabled.");
+                console.warn('Node Simple Server: Connection closed, live reload disabled.');
                 if (autoRestart) {
                     disconnected();
                     restartInterval = setInterval(restart, 3000);
@@ -188,8 +194,8 @@
             });
 
             // Mark the script as ready when a websocket connection is established.
-            socket.addEventListener("open", () => {
-                console.log("Node Simple Server: Live reload enabled.");
+            socket.addEventListener('open', () => {
+                console.log('Node Simple Server: Live reload enabled.');
                 ready = true;
             });
 
@@ -203,7 +209,7 @@
             };
         })();
     } else {
-        console.error("Node Simple Server: This Browser does NOT support WebSocket for live reloading.");
+        console.error('Node Simple Server: This Browser does NOT support WebSocket for live reloading.');
     }
     // ]]>
 </script>