0xee/mqtt-dash
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Reconnect to MQTT broker automatically

Browse Source
This commit is contained in:
0xee 2019-11-09 09:10:06 +01:00
parent 2d40ab72ff
commit 4e6b2307dd
2 changed files with 142 additions and 129 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

269
mqtt_dash/static/main.js
View File

@ -1,148 +1,163 @@
// Called after form input is processed // Called after form input is processed
function startConnect(brokerUri) { function startConnect() {
// Generate a random client ID // Generate a random client ID
clientId = "clientId-" + parseInt(Math.random() * 100); clientId = "clientId-" + parseInt(Math.random() * 1000000);
document.getElementById("wrapper").classList.add("wrapper-error"); document.getElementById("wrapper").classList.add("wrapper-error");
document.getElementById("wrapper").classList.remove("wrapper-ok"); document.getElementById("wrapper").classList.remove("wrapper-ok");
// Print output for the user in the messages div // Print output for the user in the messages div
document.getElementById("messages").innerHTML += log('Connecting to: ' + window.brokerUri + ', client ID: ' + clientId);
'<span>Connecting to: ' + brokerUri+ '</span><br/>';
document.getElementById("messages").innerHTML +=
'<span>Using the following client value: ' + clientId + '</span><br/>';
// Initialize new Paho client connection // Initialize new Paho client connection
client = new Paho.MQTT.Client(brokerUri, clientId=clientId); client = new Paho.MQTT.Client(window.brokerUri, clientId=clientId);
// Set callback handlers // Set callback handlers
client.onConnectionLost = onConnectionLost; client.onConnectionLost = onConnectionLost;
client.onMessageArrived = onMessageArrived; client.onMessageArrived = onMessageArrived;
// Connect the client, if successful, call onConnect function // Connect the client, if successful, call onConnect function
client.connect({ client.connect({
onSuccess: onConnect, onSuccess: onConnect,
}); });
}
// Called when the client connects connectionCheckTimeout = setTimeout(checkConnection, 1000);
function onConnect() { }
document.getElementById("wrapper").classList.remove("wrapper-error");
document.getElementById("wrapper").classList.add("wrapper-ok");
var subWidgets = document.getElementsByClassName("subscriber");
var topics = new Set()
for (var i = 0; i < subWidgets.length; i++) {
var c = subWidgets.item(i);
var topic = c.getAttribute('data-sub-topic');
topics.add(topic);
c.classList.add('widget-unset');
}
for (let topic of topics)
{
client.subscribe(topic);
}
// Subscribe to the requested topic
}
// Called when the client loses its connection function log(msg) {
function onConnectionLost(responseObject) { console.log(msg);
document.getElementById("wrapper").classList.remove("wrapper-ok"); //document.getElementById("messages").innerHTML += '<span>' + msg + '</span><br/>';
document.getElementById("wrapper").classList.add("wrapper-error"); }
if (responseObject.errorCode !== 0) {
console.log("onConnectionLost: " + responseObject.errorMessage);
}
}
function getByPath(obj, path) { function checkConnection(){
var current=obj; clearTimeout(connectionCheckTimeout);
path.split('.').forEach(function(p){ current = current[p]; }); if (!client.isConnected()) {
return current; //log("Error connecting to broker");
} startConnect();
}
}
// Called when a message arrives // Called when the client connects
function onMessageArrived(message) { function onConnect() {
var views = document.getElementsByClassName(message.destinationName + "-value"); clearTimeout(connectionCheckTimeout);
for (var i = 0 ; i < views.length; i++) { document.getElementById("wrapper").classList.remove("wrapper-error");
var view = views.item(i); document.getElementById("wrapper").classList.add("wrapper-ok");
if (view.classList.contains("update-policy-replace-content")) { var subWidgets = document.getElementsByClassName("subscriber");
view.innerHTML = message.payloadString; var topics = new Set()
} else if(view.classList.contains("update-policy-append-content")) { for (var i = 0; i < subWidgets.length; i++) {
view.innerHTML += message.payloadString + "<br/>"; var c = subWidgets.item(i);
view.scrollTop = view.scrollHeight; var topic = c.getAttribute('data-sub-topic');
} else if(view.classList.contains("update-policy-add-row")) { topics.add(topic);
var now = (new Date()).toLocaleTimeString(); c.classList.add('widget-unset');
view.innerHTML = "<tr><td>"+ now + "</td><td>" +message.payloadString + "</td></tr>" + view.innerHTML; }
} else if(view.classList.contains("update-policy-update-value")) { for (let topic of topics)
jsonPath = view.getAttribute('data-value-path'); {
if (jsonPath) { client.subscribe(topic);
view.value = getByPath(JSON.parse(message.payloadString), }
jsonPath); // Subscribe to the requested topic
} else { }
view.value = message.payloadString;
}
view.onchange();
}
}
var widgets = document.querySelectorAll("[data-sub-topic='" + message.destinationName + "']"); // Called when the client loses its connection
for (var i = 0 ; i < widgets.length; i++) { function onConnectionLost(responseObject) {
widgets.item(i).classList.remove("widget-unset"); document.getElementById("wrapper").classList.remove("wrapper-ok");
} document.getElementById("wrapper").classList.add("wrapper-error");
if (responseObject.errorCode !== 0) {
console.log("onConnectionLost: " + responseObject.errorMessage);
}
startConnect();
}
} function getByPath(obj, path) {
var current=obj;
path.split('.').forEach(function(p){ current = current[p]; });
return current;
}
// Called when the disconnection button is pressed // Called when a message arrives
function startDisconnect() { function onMessageArrived(message) {
client.disconnect(); var views = document.getElementsByClassName(message.destinationName + "-value");
document.getElementById("messages").innerHTML += '<span>Disconnected</span><br/>'; for (var i = 0 ; i < views.length; i++) {
updateScroll(); // Scroll to bottom of window var view = views.item(i);
} if (view.classList.contains("update-policy-replace-content")) {
view.innerHTML = message.payloadString;
} else if(view.classList.contains("update-policy-append-content")) {
view.innerHTML += message.payloadString + "<br/>";
view.scrollTop = view.scrollHeight;
} else if(view.classList.contains("update-policy-add-row")) {
var now = (new Date()).toLocaleTimeString();
view.innerHTML = "<tr><td>"+ now + "</td><td>" +message.payloadString + "</td></tr>" + view.innerHTML;
} else if(view.classList.contains("update-policy-update-value")) {
jsonPath = view.getAttribute('data-value-path');
if (jsonPath) {
view.value = getByPath(JSON.parse(message.payloadString),
jsonPath);
} else {
view.value = message.payloadString;
}
view.onchange();
}
}
// Updates #messages div to auto-scroll var widgets = document.querySelectorAll("[data-sub-topic='" + message.destinationName + "']");
function updateScroll() { for (var i = 0 ; i < widgets.length; i++) {
var element = document.getElementById("messages"); widgets.item(i).classList.remove("widget-unset");
element.scrollTop = element.scrollHeight; }
}
function publish(topic, value) { }
var message = new Paho.MQTT.Message(value);
message.destinationName = topic;
client.send(message);
}
function updateContents(id, value) { // Called when the disconnection button is pressed
elem = document.getElementById(id); function startDisconnect() {
elem.innerHTML = value; client.disconnect();
} document.getElementById("messages").innerHTML += '<span>Disconnected</span><br/>';
updateScroll(); // Scroll to bottom of window
}
function init(brokerUri) { // Updates #messages div to auto-scroll
startConnect(brokerUri); function updateScroll() {
var element = document.getElementById("messages");
element.scrollTop = element.scrollHeight;
}
var sliders = document.getElementsByClassName("slider"); function publish(topic, value) {
var message = new Paho.MQTT.Message(value);
message.destinationName = topic;
client.send(message);
}
for (var i = 0 ; i < sliders.length; i++) { function updateContents(id, value) {
var slider = sliders.item(i); elem = document.getElementById(id);
slider.onchange = function() { elem.innerHTML = value;
document.getElementById(this.id + "-textual").innerHTML = }
this.value;
};
slider.oninput = function() {
this.onchange()
var topic = this.getAttribute('data-pub-topic');
publish(topic, this.value);
};
}
var logDeletes = document.getElementsByClassName("log-delete"); function init(brokerUri) {
window.brokerUri = brokerUri
startConnect();
for (var i = 0 ; i < logDeletes.length; i++) { var sliders = document.getElementsByClassName("slider");
var elem = logDeletes.item(i);
elem.onclick = function() { for (var i = 0 ; i < sliders.length; i++) {
console.log(this.id); var slider = sliders.item(i);
table = document.getElementById(this.id + "-content"); slider.onchange = function() {
console.log(table.id); document.getElementById(this.id + "-textual").innerHTML =
table.innerHTML = ""; this.value;
}; };
} slider.oninput = function() {
this.onchange()
var topic = this.getAttribute('data-pub-topic');
publish(topic, this.value);
};
}
var logDeletes = document.getElementsByClassName("log-delete");
for (var i = 0 ; i < logDeletes.length; i++) {
var elem = logDeletes.item(i);
elem.onclick = function() {
console.log(this.id);
table = document.getElementById(this.id + "-content");
console.log(table.id);
table.innerHTML = "";
};
}
} }

2
mqtt_dash/templates/base.html
View File

@ -26,8 +26,6 @@
</div> </div>
<br/> <br/>
<div id="messages"></div> <div id="messages"></div>
<input type="button" onclick="startConnect()" value="Connect">
<input type="button" onclick="startDisconnect()" value="Disconnect">
</div> </div>
<br/> <br/>
</div> </div>