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); | |||||
} |