From e09edf78875db58add62d1d652f41a5975b4f3b6 Mon Sep 17 00:00:00 2001
From: Mikhael Skvortsov <mikhael.skvortsov@gmail.com>
Date: Thu, 11 Apr 2024 16:28:19 +0300
Subject: [PATCH] Improve WS error handling

---
 index.html  |  5 +++--
 meshmon.css |  5 ++++-
 meshmon.js  | 35 +++++++++++++++++++++++++++++------
 3 files changed, 36 insertions(+), 9 deletions(-)

diff --git a/index.html b/index.html
index 9e3c52f..8c9329d 100644
--- a/index.html
+++ b/index.html
@@ -32,12 +32,13 @@
                         <table class="bottom-table">
                             <tr>
                                 <td class="left">
-                                    <label for="mqtt-url">MQTT URL</label>
-                                    <input id="mqtt-url" type="text" size="25"/>
+                                    <label for="mqtt-url">Broker URL</label>
+                                    <input id="mqtt-url" type="text" size="30"/>
                                     <label for="mqtt-topic">Topic</label>
                                     <input id="mqtt-topic" type="text" size="10"/>
                                     <button id="mqtt-connect">Connect</button>
                                     <button id="clear">Clear</button>
+                                    <span id="mqtt-status"></span>
                                 </td>
                                 <td class="right">
                                     <a href="https://github.com/mskvortsov/meshmon" target="_blank">
diff --git a/meshmon.css b/meshmon.css
index bb5f375..de8e0d9 100644
--- a/meshmon.css
+++ b/meshmon.css
@@ -2,7 +2,7 @@ body {
     color-scheme: dark;
     background-color: #232327;
     color: #b1b1b3;
-    font-family: sans-serif;
+    font-family: Verdana, sans-serif;
 }
 
 .main-table td {
@@ -88,6 +88,9 @@ body {
     padding: 0;
     width: 100%;
 }
+.bottom-table label, button, input, span {
+    font-family: Verdana, sans-serif;
+}
 .bottom-table td {
     padding: 0;
     border: 0;
diff --git a/meshmon.js b/meshmon.js
index 77eb50f..ddb9315 100644
--- a/meshmon.js
+++ b/meshmon.js
@@ -11,8 +11,8 @@ var packets = [];
 
 var mqttUrlInput   = null;
 var mqttTopicInput = null;
-var mqttConnected  = false;
 var mqttClient     = null;
+var mqttStatusHint = null;
 
 var tbody = null;
 var statusRow = null;
@@ -187,16 +187,15 @@ function decodeEncrypted(packet, key) {
 }
 
 function mqttOnConnect() {
-    mqttConnected = true;
     connectButton.textContent = 'Disconnect';
     connectButton.disabled = false;
     statusRow.className = 'status-connected';
+    mqttStatusHint.innerHTML = '';
     mqttClient.subscribe(`${mqttTopicInput.value}/2/c/+/+`);
     mqttClient.subscribe(`${mqttTopicInput.value}/2/e/+/+`);
 }
 
-function mqttOnDisconnect() {
-    mqttConnected = false;
+function resetToConnect() {
     mqttClient = null;
     connectButton.textContent = 'Connect';
     connectButton.disabled = false;
@@ -205,17 +204,39 @@ function mqttOnDisconnect() {
     statusRow.className = 'status-disconnected';
 }
 
+function mqttOnDisconnect() {
+    resetToConnect();
+}
+
+function mqttOnError(error) {
+    mqttStatusHint.innerHTML = error.toString();
+    resetToConnect();
+}
+
 function onClickConnect() {
     connectButton.disabled = true;
-    if (mqttConnected) {
+    if (mqttClient && mqttClient.connected) {
         mqttClient.on('close', mqttOnDisconnect);
         mqttClient.end();
     } else {
         mqttUrlInput.disabled = true;
         mqttTopicInput.disabled = true;
-        mqttClient = mqtt.connect(mqttUrlInput.value);
+        try {
+            mqttClient = mqtt.connect(mqttUrlInput.value, {
+                reconnectPeriod: 0,
+                connectTimeout: 5000,
+                manualConnect: true,
+            });
+        } catch (error) {
+            mqttStatusHint.innerHTML = error.toString();
+            resetToConnect();
+            return;
+        }
         mqttClient.on('connect', mqttOnConnect);
         mqttClient.on('message', mqttOnMessage);
+        mqttClient.on('error', mqttOnError);
+        mqttClient.connect();
+        mqttClient.stream.on('error', mqttOnError);
     }
 }
 
@@ -406,6 +427,8 @@ window.onload = function() {
     mqttTopicInput.placeholder = defaultMqttTopic;
     mqttTopicInput.defaultValue = defaultMqttTopic;
 
+    mqttStatusHint = document.getElementById('mqtt-status');
+
     connectButton = document.getElementById('mqtt-connect');
     connectButton.addEventListener('click', onClickConnect);