This second example is a ”traditional” web page using the websocket nodes.
To check the status of a websocket connection, there is a property available (wSocket.readyState in the code sample below) we can use
When the readyState is 1, the connection is OK, when it is 3 or 0, it is lost/disconnected. So we can use this to re-initiate the connection when & if needed
The sample works as follows:
When you load the page in your browser, the websocket connection gets initiated and if successful, the background goes green (if it fails, it goes grey)
Two timers are started, one for a Ping function, the other for checking the websocket connection state
First you see the websocket checking the state every 1,5 second, writing just 1 on the screen if connection is fine
After 15 seconds, you will see the first incoming websocket message from the Ping timer, screen background now goes black. When in this state, everything is just fine.
If you run the browser on a mobile device, you can now try to disconnect the wifi. The screen should go gray within a second or so. When you turn on the wifi again, the connection is quickly re-established and operational again
The flow:
[{"id":"fd1492e8.21c1f","type":"http response","z":"d01d2553.fd9838","name":"","x":580,"y":650,"wires":[]},{"id":"56d7b424.222dac","type":"http in","z":"d01d2553.fd9838","name":"","url":"/test","method":"get","upload":false,"swaggerDoc":"","x":240,"y":650,"wires":[["1f42f57e.0f2f0b"]]},{"id":"1f42f57e.0f2f0b","type":"template","z":"d01d2553.fd9838","name":"test","field":"payload","fieldType":"msg","format":"html","syntax":"mustache","template":"<html lang=\"en\">\n<meta http-equiv=\"Content-Type\" content=\"text/html; charset=UTF-8\"/> \n<META HTTP-EQUIV=\"CACHE-CONTROL\" CONTENT=\"NO-CACHE\">\n<META HTTP-EQUIV=\"PRAGMA\" CONTENT=\"NO-CACHE\">\n<title>KeepAlive example</title>\n<!-- comment -->\n\n\n<script type=\"text/javascript\">\nvar pingOK = true;\nvar initial = setInterval(refresh, 1500);\nvar keepAlive = setInterval(kAlive, 15000);\nvar wSocket = null;\nvar inProgress = false;\nvar prot = \"\";\nvar ip = \"\";\nvar url = \"\";\n\nfunction init() {\n// event handlers for WebSocket:\n inProgress = true;\n wSocket = null;\n prot = \"\";\n ip = location.host;\n\n if (location.protocol == \"https:\") {\n prot = \"wss://\";\n }\n else {\n prot = \"ws://\";\n }\n\n url = prot + ip + \"/ws/location\"; \n writeToScreen(url);\n wSocket = new WebSocket(url);\n wSocket.onopen = function() {\n document.getElementById(\"theBody\").style.backgroundColor =\"green\"; //Green\n };\n wSocket.onmessage = wsMessage;\n wSocket.onclose = function() {\n document.getElementById(\"theBody\").style.backgroundColor =\"#C0C0C0\"; //Grey\n };\n inProgress = false;\n}\n\n\nfunction kAlive() {\n if (wSocket.readyState == 1 && !inProgress) {\n doPing();\n }\n}\n\n\nfunction doPing() {\n pingOK = false;\n doSend({'method':'Ping','id':keepAlive});\n}\n\n\nfunction refresh() {\n writeToScreen(wSocket.readyState);\n\n if (wSocket.readyState == 3 || wSocket.readyState == 0){\n if (!inProgress) {\n pingOK = true;\n //writeToScreen('refresh:inProgress :'+inProgress+wSocket.readyState);\n init();\n }\n }\n}\n\n\nfunction doSend(strng) {\n if (wSocket.readyState == 1) {\n wSocket.send(JSON.stringify(strng));\n //wSocket.send(strng);\n }\n}\n\n\nfunction writeToScreen(message) { \n var pre = document.createElement(\"p\"); \n pre.style.wordWrap = \"break-word\"; \n pre.innerHTML = message; \n theBody.appendChild(pre); \n} \n\n\nfunction wsMessage(event) {\n //alert(event.data);\n writeToScreen(event.data);\n inProgress = true;\n document.getElementById(\"theBody\").style.backgroundColor =\"black\"; //Black\n pingOK = true;\n inProgress = false;\n}\n\n</script>\n\n<body id=\"theBody\" onLoad=\"init()\" bgcolor=black text=white link=white vlink=white alink=white/>\n<br />\n</body>\n\n\n\n\n","x":430,"y":650,"wires":[["fd1492e8.21c1f"]]},{"id":"26a9c7a9.0e8208","type":"websocket in","z":"d01d2553.fd9838","name":"","server":"d43b3f82.93abc","client":"","x":260,"y":730,"wires":[["a397318d.2f10b"]]},{"id":"4489e27d.f932ec","type":"websocket out","z":"d01d2553.fd9838","name":"","server":"d43b3f82.93abc","client":"","x":620,"y":730,"wires":[]},{"id":"a397318d.2f10b","type":"function","z":"d01d2553.fd9838","name":"","func":"delete msg._session;\nif (msg.payload !== undefined){\n return msg;\n}\n","outputs":1,"noerr":0,"x":430,"y":730,"wires":[["4489e27d.f932ec"]]},{"id":"d43b3f82.93abc","type":"websocket-listener","z":"","path":"/ws/location","wholemsg":"false"}]
The code for the html page (part of the flow):`
<html lang="en">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<META HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE">
<META HTTP-EQUIV="PRAGMA" CONTENT="NO-CACHE">
<title>KeepAlive example</title>
<!-- comment -->
<script type="text/javascript">
var pingOK = true;
var initial = setInterval(refresh, 1500);
var keepAlive = setInterval(kAlive, 15000);
var wSocket = null;
var inProgress = false;
var prot = "";
var ip = "";
var url = "";
function init() {
// event handlers for WebSocket:
inProgress = true;
wSocket = null;
prot = "";
ip = location.host;
if (location.protocol == "https:") {
prot = "wss://";
}
else {
prot = "ws://";
}
url = prot + ip + "/ws/location";
writeToScreen(url);
wSocket = new WebSocket(url);
wSocket.onopen = function() {
document.getElementById("theBody").style.backgroundColor ="green"; //Green
};
wSocket.onmessage = wsMessage;
wSocket.onclose = function() {
document.getElementById("theBody").style.backgroundColor ="#C0C0C0"; //Grey
};
inProgress = false;
}
function kAlive() {
if (wSocket.readyState == 1 && !inProgress) {
doPing();
}
}
function doPing() {
pingOK = false;
doSend({'method':'Ping','id':keepAlive});
}
function refresh() {
writeToScreen(wSocket.readyState);
if (wSocket.readyState == 3 || wSocket.readyState == 0){
if (!inProgress) {
pingOK = true;
//writeToScreen('refresh:inProgress :'+inProgress+wSocket.readyState);
init();
}
}
}
function doSend(strng) {
if (wSocket.readyState == 1) {
wSocket.send(JSON.stringify(strng));
//wSocket.send(strng);
}
}
function writeToScreen(message) {
var pre = document.createElement("p");
pre.style.wordWrap = "break-word";
pre.innerHTML = message;
theBody.appendChild(pre);
}
function wsMessage(event) {
//alert(event.data);
writeToScreen(event.data);
inProgress = true;
document.getElementById("theBody").style.backgroundColor ="black"; //Black
pingOK = true;
inProgress = false;
}
</script>
<body id="theBody" onLoad="init()" bgcolor=black text=white link=white vlink=white alink=white/>
<br />
</body>
Today I received a very interesting question, but seems my brain has shrinked by the cold weather ...
