tlsd 2.7.1 → 2.9.0

package/README.md

@@ -7,8 +7,9 @@ This is a node.js based webserver.
 
 	- SSL/TLS magically via Greenlock
 	- Websockets built in
-	- Standardised RPC protocol for front/back end communcations
+	- Standardised Websockets/RPC protocol for front/back end communcations
 	- Utility command 'tlsd'
+    - Browser reload on src changes
 
 
 ## Installing
@@ -70,7 +71,7 @@ All arguments are required
 
 Adds a domain to Greenlock for production.
 
-	tlsd domain foo.bar
+	tlsd domain example.com
 
 
 ## tlsd version
@@ -94,5 +95,7 @@ You must also add your domain to greenlock before running nodes or it won't be r
 
 Production mode serves files with Letsencrypt SSL certs magically.
 
+The browser reload feature does not operate in production mode.
+
 
 

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "tlsd",
-  "version": "2.7.1",
+  "version": "2.9.0",
   "description": "A server for web app prototyping with HTTPS and Websockets",
   "main": "tlsd.js",
   "bin": {
     "tlsd": "tlsd"
   },
   "scripts": {
+    "dev": "./tlsd run dev scaffold 12345 5",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "author": "Joe Hitchens <joe@sleepless.com>",
@@ -19,9 +20,9 @@
     "cors": "^2.8.5",
     "g": "^2.0.1",
     "greenlock-express": "^4.0.3",
+    "sass": "^1.69.5",
     "serve-static": "^1.15.0",
     "sleepless": "^5.13.0",
-    "tlsd": "^2.4.1",
     "websocket": "^1.0.34"
   }
 }

package/{server_static → rpc_static}/rpc/rpc.js

@@ -24,9 +24,11 @@
 	const time = function( dt ) { return Math.round( ( new Date() ).getTime() / 1000 ); }
 
 
-	let DBG = msg => {
+	let DBG = function( ...args ) {
 		if( RPC.debug ) {
-			console.log( "RPC: " + o2j( msg ) );
+            args.unshift( "RPC:" ); 
+            console.log.apply( this, args );
+			//console.log( "RPC: ", args );
 		}
 	};
 
@@ -47,11 +49,11 @@
 				delete wraps[id]
 				num -= 1
 				if(num == 0) {
-					DBG( "clearInterval " + timer );
+					//DBG( "clearInterval", timer );
 					clearInterval(timer)
 					timer = null
 				}
-				DBG("forgetting " + id + " " + o2j( p ));
+				//DBG("forgetting", id, p );
 			}
 			return p
 		}
@@ -60,7 +62,7 @@
 		// Put a msg into the list
 		// ttl is in secs and should not be less than 10 (default is 60 if not provided)
 		const ins = self.ins = function(p, id, ttl) {
-			DBG( "remembering " + id + " " + o2j( p ) );
+			//DBG( "remembering", id, p );
 			const w = {
 				expire: time() + (ttl || 60),
 				payload: p,
@@ -77,7 +79,7 @@
 						}
 					}
 				}, 10 * 1000);
-				DBG( "setInterval " + timer );
+				//DBG( "setInterval", timer );
 			}
 		}
 
@@ -99,7 +101,6 @@
 		const waiting = new WaitList()
 
 		const send = function(m, cb, fail) {
-			DBG( "send: " + o2j( m ) );
 			if(m.msg_id === undefined) {
 				m.msg_id = "CMID-" + next_seq(); // every message must have an id
 			}
@@ -109,7 +110,7 @@
 				waiting.ins( { msg: m, cb, fail }, m.msg_id );
 			}
 
-			DBG(">>---> server "+o2j( m ));
+			DBG(">>--->", m );
 			socket.send( o2j( m ) );
 		}
 
@@ -117,7 +118,7 @@
 		var socket = new WebSocket( ( loc.protocol == "http:" ? "ws:" : "wss:" ) + "//" + loc.host + path )
 
 		socket.onerror = function( evt ) {
-			DBG( "error: " + evt.data );
+			DBG( "error:", evt.data );
 			cb_ctrl( "error", evt.data );
 		}
 
@@ -125,7 +126,7 @@
 			DBG( "close" );
 			cb_ctrl( "disconnect", conn.attempt );
 			setTimeout( () => {
-				DBG( "reconnect atttempt " + conn.attempt );
+				DBG( "reconnect atttempt", conn.attempt );
 				ws_connect( cb_msg, cb_ctrl, path );
 			}, 2 * 1000 );
 		}
@@ -137,7 +138,7 @@
 
 		// handle incoming messages from server
 		socket.onmessage = function( evt ) {
-			DBG( "<---<< server " + o2j( evt.data ) )
+			//DBG( "<---<<", evt.data )
 
 			var json = evt.data		// raw message is a utf8 string
 			var msg_in = j2o( json )
@@ -146,8 +147,10 @@
 				return;
 			}
 
+			DBG( "<---<<", msg_in )
+
 			if(typeof msg_in.msg !== "undefined") {
-				// server initiated msg (not a reply)
+				// server initiated msg (not a reply to a client msg)
 
 				msg_in.reply = function( response ) {
 					send( { msg_id: msg_in.msg_id, response, } );
@@ -181,7 +184,7 @@
             }
 
 			if( typeof msg_in.response !== "undefined" ) {
-				// response to a client initiated msg
+				// normal response to a client initiated msg
 
 				var x = waiting.rem( msg_in.msg_id ); 
 				if( ! x ) {
@@ -257,14 +260,27 @@
 
 	ws_connect( msg => {
 		// msg initiated by server 
-		DBG( "Server says: " + msg );
+
+        // If there's a handler set for this, call that
 		const fn = RPC[ "onmessage" ];
 		if( typeof fn == "function" ) {
-			fn( msg );
+			if( fn( msg ) ) {
+                // returning true means it was handled by client
+                return;
+            }
 		}
+
+        // Server is telling browser to reload the page
+        // this is due to the dev-mode hot-reload feature
+        // server sends this when it detects any changes to the
+        // site root dir, which includes the static/ and rpc/ dirs.
+        if( msg.msg === "RELOAD"  ) {
+            location.reload();
+        }
+
 	}, ( evt, detail ) => {
 		// event occurred
-		DBG( "Event: " + evt );
+		DBG( "Event:", evt );
 		if( evt === "connect" ) {
 			RPC.connected = true;
 		}

package/scaffold/static/404/index.html

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<title>Page Not Found </title>
+	</head>
+	<body>
+        <h1>Sorry, nothing there, mate!</h1>
+        <p>
+            <script>
+                let url = decodeURIComponent( document.location.search.split( "=" ).pop() );
+                document.write( "Requested URL: " + url );
+            </script>
+        </p>
+	</body>
+</html>
+

package/scaffold/static/index.html

@@ -1,7 +1,13 @@
 <html>
+<head>
+    <link href="/local.sass.css" rel="stylesheet">
+</head>
 <body>
 	
-	<h1> Hello </h1>
+	<h1>TLSD Test Page</h1>
+    <script>
+        document.write( Date() );
+    </script>
 
 	<script src="/rpc/rpc.js"></script>
 
@@ -15,6 +21,15 @@
 		RPC.POST() or RPC.WS().
 		*/
 
+        RPC.debug = true;   // enables debug output to browser console
+
+        RPC.onmessage = msg => {
+            // Message originating from server (not a response to client message)
+            // returning true will prevent tlsd from doing anything further
+            // with the message, such as try to detect hot-reload messages, etc.
+            return false;
+        };
+
 		RPC.on_connect = function( evt ) {
 			// RPC is ready to be used
 			RPC( { action: "hello" }, console.log, alert )

package/scaffold/static/local.sass

@@ -0,0 +1,11 @@
+
+body
+    margin: 2em 2vw
+    font-family: sans-serif
+    text-align: center
+
+h1
+  font-size: 40px
+  a
+    font-style: italic
+

package/scaffold/static/local.sass.css

@@ -0,0 +1,12 @@
+body {
+  margin: 2em 2vw;
+  font-family: sans-serif;
+  text-align: center;
+}
+
+h1 {
+  font-size: 40px;
+}
+h1 a {
+  font-style: italic;
+}

package/tlsd.js

@@ -159,25 +159,33 @@ const basic_handler = function( root ) {
 
 	} );
 
-	// Serve my own static files
-	// this is primarily so that GET /rpc/rpc.js can return the client-side code for 
-	// sending WS and RPC messages (similar to how socket.io works)
-	app.use( serveStatic( __dirname + "/server_static" ) );
 
-	// Serve static files for domain
+	// Serve my (tlsd's) own static files
+	// This is primarily so that GET /rpc/rpc.js can return the client-side code for 
+	// sending WS RPC messages (similar to how socket.io works) and providing the
+    // browser hot-reload feature (which requires WS RPC)
+	app.use( serveStatic( __dirname + "/rpc_static" ) );
+
+
+	// Serve static files for the domain
 	app.use( serveStatic( root + "/static" ) );
 
+
 	// finally, if serveStatic can't service the request,
 	// look for a 404/ dir and redirect to that if present
 	app.use( function( req, res, next ) {
 		// I can't just return a redirect here because if the /404 doesn't exist,
 		// I will just go into a redirect loop, so I have to test to see if the
 		// dir exists, and then if so, redirect to it, otherwise, just return 404.
-		is_file( root + "/404", so => {
-			if( so )
-				res.writeHead( 302, { "Location": "/404/", });
-			else
+		let { url, } = req;
+        let p = root + "/static/404";
+		is_dir( p, so => {
+			if( so ) {
+                let p404 = "/404/?original_path=" + encodeURIComponent( url );
+				res.writeHead( 302, { "Location": p404, } );
+            } else {
 				res.writeHead( 404 );
+            }
 			res.end();
 		} );
 	} );
@@ -220,18 +228,22 @@ const rest_handler = function( root, req, rsp ) {
 };
 
 
+// tracked websocket connections
+const ws_connections = {};
+
+
 const ws_attach = function( httpServer, msg_handler ) {
 
 	const wsd = new websocket.server( { httpServer, autoAcceptConnections: false, } );
 
-	wsd.on( "request", function( req ) {
-		V( "WS: connection request from "+req.remoteAddress+" "+req.resource )
+	wsd.on( "request", function( wsreq ) {
+		V( "WS: connection request from "+wsreq.remoteAddress+" "+wsreq.resource )
 	
-		const domain = req.httpRequest.headers[ "host" ];
+		const domain = wsreq.httpRequest.headers[ "host" ];
 
-		const socket = req.accept( null, req.origin );
+		const socket = wsreq.accept( null, wsreq.origin );
 
-		const name = "ws-client-"+next_seq();
+		const name = "ws-client-"+next_seq();       // XXX just use the websocket id
 
 		// send msg to connected client
 		const send = function( msg , cb ) {
@@ -250,6 +262,7 @@ const ws_attach = function( httpServer, msg_handler ) {
 
 		socket.on("close", function() {
 			D( "WS: disconnect" );
+            delete ws_connections[ name ];  // remove from tracked connections
 		});
 
 		// incoming msgs from client come through here
@@ -281,6 +294,8 @@ const ws_attach = function( httpServer, msg_handler ) {
 
 		D( "WS: connected: "+name );
 
+        ws_connections[ name ] = conn;      // add to tracked connections
+
 	} );
 
 	D( "WS: initialized" );
@@ -290,6 +305,84 @@ const ws_attach = function( httpServer, msg_handler ) {
 };
 
 
+
+const build_sass = function( path ) {
+    //D( "_________ auto_build sass " + path );
+    const sass = require( "sass" );
+    const result = sass.compile( path );
+    fs.writeFileSync( path + ".css", result.css, "utf8" );
+};
+
+const auto_builders = [
+    [ /\.(sass|scss)$/, build_sass ],
+];
+
+// Do auto-build processes (dev mode only)
+const auto_build = function( paths ) {
+
+    for( let path of paths ) {
+//        D( "___ path? " + path );
+        for( const bldr of auto_builders ) {
+            if( bldr[ 0 ].test( path ) ) {
+                bldr[ 1 ]( path );
+            }
+        }
+
+    }
+
+};
+
+
+// Engage the filesystem watcher (dev mode only)
+const enable_fs_watch = function( root ) {
+
+    let paths_noted = {};
+
+    let hot_reload_tid = null;
+    let hot_reload_count = 0;
+
+    function hot_reload_tick() {
+        hot_reload_count -= 1;     // reduce count by 1
+        if( hot_reload_count <= 0 ) {
+            // counter reached 0
+            clearInterval( hot_reload_tid );   // turn off the ticker
+            hot_reload_tid = null;
+
+            auto_build( Object.keys( paths_noted ) );
+            paths_noted = {};
+
+            // send RELOAD msg to all client that have an active ws connection
+            for( let conn of Object.values( ws_connections ) ) {
+                conn.send( { msg: "RELOAD" } );     // send RELOAD msg to browser
+            }
+        }
+    }
+
+    function note( evt, path ) {
+        // A change of some sort was seen
+        // Hundreds of these can happen very rapidly, so the timer stuff
+        // above is used to delay sending the RELOAD command until 
+        // a second or so has passed without any more calls to this function
+
+        paths_noted[ path ] = evt;  // XXX
+        //D( "noted fs change: [" + evt + "] " + path );
+
+        hot_reload_count = 5;
+        if( hot_reload_tid === null ) {
+            // ticker isn't running, so start it
+            hot_reload_tid = setInterval( hot_reload_tick, 200 );
+        }
+
+    };
+
+    // tell OS to start watching for any changes in root
+    fs.watch( root, { recursive: true, }, function( evt, path ) {
+        note( evt, root + "/" + path );
+    } );
+
+};
+
+
 // -----------------------
 
 const argv = process.argv;
@@ -319,7 +412,7 @@ if( argv.length == 2 ) {
 			ws_attach( httpd, ( msg, conn, domain ) => {
 				const root = path.resolve( DOMAINS_ROOT + "/" + domain );
 				ws_msg_handler( root, msg );
-			} );
+            } );
 
 			glx.serveApp( ( req, res ) => {
 				const root = path.resolve( DOMAINS_ROOT + "/" + req.headers[ "host" ] );
@@ -354,12 +447,16 @@ if( argv.length == 5 ) {
 			rest_handler( SITE_ROOT, req, res );
 		} );
 
+        // XXX call ws_attach *before* calling listen() ?
 		httpd.listen( toInt( PORT ), () => {
 
 			ws_attach( httpd, ( msg, conn, domain ) => {
 				ws_msg_handler( SITE_ROOT, msg );
 			} );
 
+            // enable the file system watch, which handles hot-reload and auto-build
+            enable_fs_watch( SITE_ROOT );
+
 			I( "Listening on " + PORT + " & serving from " + SITE_ROOT );
 
 		} );

package/server_static/rpc/test.html

@@ -1,11 +0,0 @@
-<html>
-<body>
-
-	<script src="/rpc/rpc.js"></script>
-
-	<script>
-		RPC.debug = true;
-		RPC.connect( function() {
-			RPC( { action: "ping" }, console.log, alert );
-		} );
-	</script>

package/test.html

@@ -1,4 +0,0 @@
-<html>
-<head>
-#include head.html
-</head>