This adds a basic WebSocket testing framework. Sources different files based upon protocol, so the testing framework will get used when opened from a file... Uses Makefile and the C Preprocessor to build a single JS file for use...main
| @@ -0,0 +1,2 @@ | |||||
| .DS_Store | |||||
| root/js/solardash.file.js | |||||
| @@ -0,0 +1,18 @@ | |||||
| .PHONY: all | |||||
| .SUFFIXES: .jspp .js | |||||
| JSFILES = root/js/solardash.file.js | |||||
| root/js/jquery.js: | |||||
| wget -O $@ "https://code.jquery.com/jquery-3.4.1.min.js" | |||||
| # manual deps | |||||
| root/js/solardash.file.js: root/js/jquery.js root/js/solardash.base.js | |||||
| all: $(JSFILES) | |||||
| .jspp.js: | |||||
| cpp -E $< | sed -e '/^#/d' > $@ | |||||
| keepupdate: | |||||
| find . -name '*.js' -o -name '*.jspp' | entr make all | |||||
| @@ -0,0 +1,8 @@ | |||||
| Fast JS loading: | |||||
| https://web.archive.org/web/20200108190917/https://humanwhocodes.com/blog/2009/07/28/the-best-way-to-load-external-javascript/ | |||||
| aiohttp websockets: | |||||
| https://web.archive.org/web/20200108235147/https://aiohttp.readthedocs.io/en/stable/web_quickstart.html#websockets | |||||
| WebSocket JS specification: | |||||
| https://web.archive.org/web/20200109005314/https://html.spec.whatwg.org/multipage/web-sockets.html#dom-websocket | |||||
| @@ -0,0 +1,24 @@ | |||||
| <!doctype html> | |||||
| <html lang="en"> | |||||
| <head> | |||||
| <meta charset="utf-8"> | |||||
| <title>Solar Dashboard</title> | |||||
| <link rel="stylesheet" type="text/css" href="css/styles.css"> | |||||
| </head> | |||||
| <body> | |||||
| <span>Production: <span id="production">Unknown</span> | |||||
| <script type="text/javascript" src="js/solardash.init.js"></script> | |||||
| <script type="text/javascript"> | |||||
| // Load testing/prod data first | |||||
| loadScript("js/solardash." + document.location.protocol.slice(0, -1) + ".js", function(){ | |||||
| loadScript("js/solardash.main.js", function(){ | |||||
| // main init code | |||||
| }); | |||||
| }); | |||||
| </script> | |||||
| </body> | |||||
| </html> | |||||
| @@ -0,0 +1,12 @@ | |||||
| socket.onopen = function() { | |||||
| // connected | |||||
| } | |||||
| socket.onmessage = function(m) { | |||||
| var msg = m.data.split(" "); | |||||
| if (msg[0] == "p") { | |||||
| // production value | |||||
| var prod = parseFloat(msg[1]); | |||||
| $("#production").text(prod.toString()); | |||||
| } | |||||
| } | |||||
| @@ -0,0 +1,39 @@ | |||||
| // Interface for testing, provides testing data, and dynamic updates, etc. | |||||
| //jquery | |||||
| #include "jquery.js" | |||||
| // WebSocket emulation class for testing | |||||
| function WebSocketTest(actions) { | |||||
| this.actions = actions.slice(); // copy | |||||
| this.actions.reverse() | |||||
| this.processNextItem() | |||||
| } | |||||
| // WebSocketTest.prototype.send = function () | |||||
| // WebSocketTest.prototype.close = function () | |||||
| // Internal | |||||
| WebSocketTest.prototype.processNextItem = function () { | |||||
| var item = this.actions.pop() | |||||
| var wst = this; | |||||
| setTimeout(function() { | |||||
| item[1](wst); | |||||
| wst.processNextItem(); | |||||
| }, item[0]); | |||||
| return this; | |||||
| } | |||||
| // Setup the socket that will be used | |||||
| var socket = new WebSocketTest([ | |||||
| [ 10, function(a) { a.onopen(new Object()) } ], | |||||
| [ 10, function(a) { a.onmessage(new MessageEvent('websockettest', { | |||||
| data : 'p .123' | |||||
| })) } ], | |||||
| [ 2000, function(a) { a.onmessage(new MessageEvent('websockettest', { | |||||
| data : 'p .234' | |||||
| })) } ], | |||||
| ]); | |||||
| #include "solardash.base.js" | |||||
| @@ -0,0 +1,22 @@ | |||||
| function loadScript(url, callback){ | |||||
| var script = document.createElement("script") | |||||
| script.type = "text/javascript"; | |||||
| if (script.readyState){ //IE | |||||
| script.onreadystatechange = function(){ | |||||
| if (script.readyState == "loaded" || | |||||
| script.readyState == "complete"){ | |||||
| script.onreadystatechange = null; | |||||
| callback(); | |||||
| } | |||||
| }; | |||||
| } else { //Others | |||||
| script.onload = function(){ | |||||
| callback(); | |||||
| }; | |||||
| } | |||||
| script.src = url; | |||||
| document.getElementsByTagName("head")[0].appendChild(script); | |||||
| } | |||||