# Remote observing ESP SerialMonitor

**URL:** https://discourse.nodered.org/t/remote-observing-esp-serialmonitor/90072
**Category:** General
**Created:** [9 August 2024 09:16 UTC](https://discourse.nodered.org/t/remote-observing-esp-serialmonitor/90072 "2024-08-09T09:16:06Z")
**Posts on this page:** 4
**Page:** 1

<div class="post-metadata">

### Author: ![Tany](https://avatars.discourse-cdn.com/v4/letter/t/dfb087/32.png) [@Tany](https://discourse.nodered.org/u/Tany)
#### Post date: [9 August 2024 09:16 UTC](https://discourse.nodered.org/t/remote-observing-esp-serialmonitor/90072/1 "2024-08-09T09:16:06Z")

</div>

E1cid.[Append payload to textarea element in open template/WebPage - #3 by E1cid](https://discourse.nodered.org/t/append-payload-to-textarea-element-in-open-template-webpage/88715/3)

Hallo,  
The suggestion of E1cid was applied, and working fine : change ESP32 SerialMonitor to WebSerial, or to No Serial.  
Except... the ESP callback() accepts each msg correct. But goes bananas when... an other is sent ???.  
And sometimes accepts 2 consecutive msg, and then fails for a 3rd.

I debugged the NR MQTT out-node, and that looks fine (eg 09\_esp32/WebSerialSts : msg.payload : string[2] "WS").  
NR generates only NS, WS or SM.  
When the callback fails, the SerialMonitor is death, though the ESP keeps on publishing sensor readings to NR.  
I cannot debug the callback as the SerialMonitor does not react anymore.  
It is not elegant, but for now, I added ESP.restart().

No idea if this is a NR or an ESP issue.

What am I missing ?

Cheers,

T

```auto
//--- called by Setup ------------------------------------------------------------
void initMQTT() {
  client.setServer(MQTT_IP.c_str(), MQTT_PORT);
  client.setCallback(MQTTcallback);       
}

//--- called by Setup ------------------------------------------------------------
void MQTTcallback(char* topic, byte* message, unsigned int length) {
  message[length] = '\0'; // Null-terminate the message to treat it as a C-style string   
  String strMsg = String((char*)message).substring(0, length); 
  echoSerial("MQTTcallback message arrived on topic : " + String(topic) +" : " + strMsg); 

  if (strcmp(topic, "09_esp32/WebSerialSts")==0) {   
    WebSerialSts(strMsg);
  }

  else {
    echoSerial("debug MQTT : Invalid topic");
    client.publish("esp32/WebSerialMsg", "MQTTcallback failed to get topic ! ESP.restart..."); 
    ESP.restart();
  }
}

//--- called by Loop ------------------------------------------------------------
void MQTTreconnect() {
  while (!client.connected()) {
    echoSerial("MQTTreconnect - Attempting reconnect...");

    if (client.connect("espClient_09")) {
      echoSerial("MQTTreconnect - connected ! ");
      client.subscribe("09_esp32/WebSerialSts");     
    } else {
      Serial.println("MQTTreconnect - failed, rc=" + String(client.state()) + " try again in 3 seconds");   
      delay(3000);
    }
  }
}

```

```auto
[
    {
        "id": "50da04b3.af25fc",
        "type": "websocket out",
        "z": "b27365bdbcced484",
        "name": "",
        "server": "985ecbc7.67a138",
        "client": "",
        "x": 490,
        "y": 420,
        "wires": []
    },
    {
        "id": "42a28745.bd5d78",
        "type": "http response",
        "z": "b27365bdbcced484",
        "name": "",
        "x": 610,
        "y": 80,
        "wires": []
    },
    {
        "id": "1787be40.e87842",
        "type": "http in",
        "z": "b27365bdbcced484",
        "name": "",
        "url": "/webserial",
        "method": "get",
        "upload": false,
        "swaggerDoc": "",
        "x": 100,
        "y": 80,
        "wires": [
            [
                "adf5eb6fdb320197",
                "8d534dbaaeecbb04"
            ]
        ]
    },
    {
        "id": "eccc8bc2.133378",
        "type": "websocket in",
        "z": "b27365bdbcced484",
        "name": "",
        "server": "985ecbc7.67a138",
        "client": "",
        "x": 110,
        "y": 520,
        "wires": [
            [
                "9adfff59.652"
            ]
        ]
    },
    {
        "id": "9adfff59.652",
        "type": "debug",
        "z": "b27365bdbcced484",
        "name": "",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "payload",
        "targetType": "msg",
        "statusVal": "",
        "statusType": "auto",
        "x": 310,
        "y": 520,
        "wires": []
    },
    {
        "id": "9e0187980030a273",
        "type": "mqtt out",
        "z": "b27365bdbcced484",
        "name": "05 Techn. Room",
        "topic": "05_esp32/WebSerialSts",
        "qos": "0",
        "retain": "false",
        "respTopic": "",
        "contentType": "",
        "userProps": "",
        "correl": "",
        "expiry": "",
        "broker": "407a01e4.6b637",
        "x": 740,
        "y": 140,
        "wires": []
    },
    {
        "id": "220bfe5c6a10d807",
        "type": "http in",
        "z": "b27365bdbcced484",
        "name": "",
        "url": "/webserialPost",
        "method": "post",
        "upload": false,
        "swaggerDoc": "",
        "x": 110,
        "y": 200,
        "wires": [
            [
                "4ec8b329cbb601b2",
                "92b37cebce018d80"
            ]
        ]
    },
    {
        "id": "f26dc0cef4885c5c",
        "type": "mqtt in",
        "z": "b27365bdbcced484",
        "name": "",
        "topic": "esp32/WebSerialMsg",
        "qos": "2",
        "datatype": "auto-detect",
        "broker": "407a01e4.6b637",
        "nl": false,
        "rap": true,
        "rh": 0,
        "inputs": 0,
        "x": 120,
        "y": 420,
        "wires": [
            [
                "50da04b3.af25fc",
                "90668d0fa6c6de08"
            ]
        ],
        "info": "Bentel will activate a contactor when in mode \"Awake and Up\". This contactor is connected to 05_ESP32 pin 31.\n05_ESP32 will MQTT-publish to topic \"05_esp32/stateBentel\".\nNR will MQTT-publish \"on\" to topic 08_esp32/FOSCAM\n08_ESP32 will MQTT-subscribe to NR topic 08_esp32/FOSCAM, and set Relais 1 and switch the CAM off. "
    },
    {
        "id": "d492f8d112d2f31c",
        "type": "template",
        "z": "b27365bdbcced484",
        "name": "HTML",
        "field": "payload",
        "fieldType": "msg",
        "format": "handlebars",
        "syntax": "mustache",
        "template": "<!DOCTYPE html>\n<head>\n <title>NodeRed WebPage</title>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>ESP32 Serial Monitor</title>\n <style>\n html {\n font-family: Arial, Helvetica, sans-serif;\n text-align: left;\n }\n h1 {\n font-size: 1.8rem;\n color: white;\n text-align: center;\n }\n h2 {\n font-size: 1.5rem;\n font-weight: bold;\n color: #143642;\n }\n h3 {\n font-size: 1.0rem;\n font-weight: bold;\n color: #143642;\n }\n .topnav {\n overflow: hidden;\n background-color: #143642;\n } \n .button {\n padding: 15px 50px;\n font-size: 24px;\n text-align: center;\n outline: none;\n color: #fff;\n background-color: #0f8b8d;\n border: none;\n border-radius: 5px;\n -webkit-touch-callout: none;\n -webkit-user-select: none;\n -khtml-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n -webkit-tap-highlight-color: rgba(0,0,0,0);\n }\n .button:active {\n background-color: #0f8b8d;\n box-shadow: 2 2px #CDCDCD;\n transform: translateY(2px);\n } \n\n </style>\n</head>\n\n<script type = \"text/javascript\">\n window.onload = function() {\n addEvents();\n }\n \n function addEvents() {\n //list all events\n //addEvent(document.getElementById('state08.2.update'), 'click', updateState082);\n } \n\n function addEvent(element, evnt, funct){\n if (element.attachEvent)\n return element.attachEvent('on'+evnt, funct);\n else\n return element.addEventListener(evnt, funct, false);\n }\n\n var ws;\n var wsUri = \"ws:\";\n var loc = window.location;\n console.log(loc);\n if (loc.protocol === \"https:\") { wsUri = \"wss:\"; }\n // This needs to point to the web socket in the Node-RED flow\n // ... in this case it's ws/simple\n wsUri += \"//\" + loc.host + loc.pathname.replace(\"webserial\",\"ws/webserial\");\n\n\n var line = \"\"; // either uncomment this for a building list of messages\n function wsConnect() {\n console.log(\"connect\",wsUri);\n ws = new WebSocket(wsUri);\n //var line = \"\"; // either uncomment this for a building list of messages\n ws.onmessage = function(msg) {\n // var line = \"\"; // or uncomment this to overwrite the existing message\n // parse the incoming message as a JSON object\n var data = msg.data;\n var initialLine = \"\";\n console.log(data);\n line = `${data}\\r\\n${line}`;\n document.getElementById('messages').textContent = line;\n }\n ws.onopen = function() {\n document.getElementById('status').innerHTML = \"<b>WebSocket: connected</b>\";\n console.log(\"WebSocket: connected\");\n }\n ws.onclose = function() {\n document.getElementById('status').innerHTML = \"WebSocket: not connected\";\n setTimeout(wsConnect,3000); // in case of lost connection tries to reconnect every 3 secs\n }\n }\n\n function input_update(newID, newVal) {\n newVal = newVal.toUpperCase();\n switch(newVal) {\n case \"NS\":\n input_post(newID, newVal);\n break; \n case \"SM\":\n input_post(newID, newVal);\n break; \n case \"WS\":\n input_post(newID, newVal);\n break; \n case \"C\":\n document.getElementById(\"messages\").textContent = \"\";\n break;\n default:\n document.getElementById('serialInput').value = \"Invalid entry\";\n } \n }\n function input_post(newID, newVal) {\n fetch(\"http://192.168.0.4:1880/webserialPost\", {\n method: \"POST\", \n body: JSON.stringify({newID, newVal}),\n headers: { \"Content-type\": \"application/json; charset=UTF-8\" } })\n .then((response) => response.json())\n .then((json) => window.location.reload()); \n }\n\n</script>\n\n<body onload=\"wsConnect();\" onunload=\"ws.disconnect();\">\n <div class=\"topnav\">\n <h1>ESP32 WebSerial Monitor</h1>\n </div>\n\n <p>Return ...... : <a href=\"/wsHC\">Home Control</a></p>\n <p>Return ...... : <a href=\"/wsESPSU\">ESP Set up</a></p><br> \n\n <input type=\"text\" id=\"serialESP\" size=\"15\" style=\"font-weight: bold\" value=\"{{global[file].WebSerial_ESPID}}\" readonly> <br><br>\n\n <input type=\"text\" id=\"serialInput\" size=\"15\" style=\"background-color: lightyellow\" >\n <input type=\"submit\" id=\"btn.update\"\n onclick=\"input_update(serialESP.value,serialInput.value)\" value=\"Send\" />\n <p>...NS: No Serial, SM: Serial Monitor, WS: WebSerial</p> \n <p>...C: Clear output</p> \n\n <div id=\"status\">unknown</div>\n\n <textarea id=\"messages\" rows=\"20\" cols=\"80\" style=\"resize: vertical;\"> </textarea>\n\n</body>\n</html>\n",
        "output": "str",
        "x": 470,
        "y": 80,
        "wires": [
            [
                "42a28745.bd5d78"
            ]
        ]
    },
    {
        "id": "adf5eb6fdb320197",
        "type": "change",
        "z": "b27365bdbcced484",
        "name": "set globals",
        "rules": [
            {
                "t": "set",
                "p": "#:(file)::WebSerial_ESPID",
                "pt": "global",
                "to": "payload.ESPID",
                "tot": "msg"
            }
        ],
        "action": "",
        "property": "",
        "from": "",
        "to": "",
        "reg": false,
        "x": 310,
        "y": 80,
        "wires": [
            [
                "d492f8d112d2f31c"
            ]
        ]
    },
    {
        "id": "8d534dbaaeecbb04",
        "type": "debug",
        "z": "b27365bdbcced484",
        "name": "debug",
        "active": false,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "payload",
        "targetType": "msg",
        "statusVal": "",
        "statusType": "auto",
        "x": 290,
        "y": 120,
        "wires": []
    },
    {
        "id": "4ec8b329cbb601b2",
        "type": "debug",
        "z": "b27365bdbcced484",
        "name": "debug",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "payload",
        "targetType": "msg",
        "statusVal": "",
        "statusType": "auto",
        "x": 290,
        "y": 220,
        "wires": []
    },
    {
        "id": "90668d0fa6c6de08",
        "type": "debug",
        "z": "b27365bdbcced484",
        "name": "debug",
        "active": false,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "payload",
        "targetType": "msg",
        "statusVal": "",
        "statusType": "auto",
        "x": 290,
        "y": 440,
        "wires": []
    },
    {
        "id": "92b37cebce018d80",
        "type": "function",
        "z": "b27365bdbcced484",
        "name": "WebSerialSts",
        "func": "var pl = msg.payload;\nvar gv = global.get(\"WebSerial_ESPID\", \"file\") || \"Oops !\";\nvar topic = `${gv}/WebSerialSts`; \nvar msg1 = null; // 05 Techn. Room\nvar msg2 = null; // 06 Techn. Room CV\nvar msg3 = null; // 07 tbn\nvar msg4 = null; // 08 Garage\nvar msg5 = null; // 09 Garage TECLO\nvar msg6 = null; // 10 tbn\nvar msg7 = null; // 11 Living\nvar msg8 = null; // 12 Bedroom 1\nvar msg9 = null; // 13 Bedroom 2\n\nif (gv == \"05_esp32\") {\n msg1 = {\n topic: topic,\n payload: pl.newVal\n };\n}\nelse if (gv == \"06_esp32\") {\n msg1 = null; \n msg2 = {\n topic: topic,\n payload: pl.newVal\n };\n}\nelse if (gv == \"09_esp32\") {\n msg1 = null; \n msg5 = {\n topic: topic,\n payload: pl.newVal\n };\n}\n\nreturn [msg1, msg2, msg3, msg4, msg5, msg6, msg7, msg8, msg9]; ",
        "outputs": 9,
        "timeout": 0,
        "noerr": 0,
        "initialize": "",
        "finalize": "",
        "libs": [],
        "x": 480,
        "y": 200,
        "wires": [
            [
                "9e0187980030a273",
                "e3c018165d6de37f"
            ],
            [
                "a6c75673c6495d5a"
            ],
            [
                "ef4b321fdad53af5"
            ],
            [
                "28ca1eed57366a5e",
                "ac67bbd109977a1d"
            ],
            [
                "f277d99b550b4479",
                "ac4cc8adc94cbbba"
            ],
            [
                "dd6b48ca93e86a29"
            ],
            [
                "6f8c0a274e20380e",
                "03fcb5a37a6c2431"
            ],
            [
                "1e5fe79e8098ccfe"
            ],
            [
                "0141a12e9ee29dd6",
                "a70ad6054f13b2f3"
            ]
        ]
    },
    {
        "id": "a6c75673c6495d5a",
        "type": "mqtt out",
        "z": "b27365bdbcced484",
        "name": "06 Techn. Room CV",
        "topic": "06_esp32/WebSerialSts",
        "qos": "0",
        "retain": "false",
        "respTopic": "",
        "contentType": "",
        "userProps": "",
        "correl": "",
        "expiry": "",
        "broker": "407a01e4.6b637",
        "x": 760,
        "y": 200,
        "wires": []
    },
    {
        "id": "e3c018165d6de37f",
        "type": "debug",
        "z": "b27365bdbcced484",
        "name": "debug 134",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "false",
        "statusVal": "",
        "statusType": "auto",
        "x": 950,
        "y": 140,
        "wires": []
    },
    {
        "id": "ac4cc8adc94cbbba",
        "type": "debug",
        "z": "b27365bdbcced484",
        "name": "debug 135",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "false",
        "statusVal": "",
        "statusType": "auto",
        "x": 950,
        "y": 380,
        "wires": []
    },
    {
        "id": "28ca1eed57366a5e",
        "type": "mqtt out",
        "z": "b27365bdbcced484",
        "name": "08 Garage",
        "topic": "08_esp32/WebSerialSts",
        "qos": "0",
        "retain": "false",
        "respTopic": "",
        "contentType": "",
        "userProps": "",
        "correl": "",
        "expiry": "",
        "broker": "407a01e4.6b637",
        "x": 730,
        "y": 320,
        "wires": []
    },
    {
        "id": "f277d99b550b4479",
        "type": "mqtt out",
        "z": "b27365bdbcced484",
        "name": "09 Garage TECLO",
        "topic": "09_esp32/WebSerialSts",
        "qos": "0",
        "retain": "false",
        "respTopic": "",
        "contentType": "",
        "userProps": "",
        "correl": "",
        "expiry": "",
        "broker": "407a01e4.6b637",
        "x": 750,
        "y": 380,
        "wires": []
    },
    {
        "id": "6f8c0a274e20380e",
        "type": "mqtt out",
        "z": "b27365bdbcced484",
        "name": "11 Living",
        "topic": "11_esp32/WebSerialSts",
        "qos": "0",
        "retain": "false",
        "respTopic": "",
        "contentType": "",
        "userProps": "",
        "correl": "",
        "expiry": "",
        "broker": "407a01e4.6b637",
        "x": 720,
        "y": 500,
        "wires": []
    },
    {
        "id": "1e5fe79e8098ccfe",
        "type": "mqtt out",
        "z": "b27365bdbcced484",
        "name": "12 Bed 1",
        "topic": "12_esp32/WebSerialSts",
        "qos": "0",
        "retain": "false",
        "respTopic": "",
        "contentType": "",
        "userProps": "",
        "correl": "",
        "expiry": "",
        "broker": "407a01e4.6b637",
        "x": 720,
        "y": 560,
        "wires": []
    },
    {
        "id": "0141a12e9ee29dd6",
        "type": "mqtt out",
        "z": "b27365bdbcced484",
        "name": "13 Bed 2",
        "topic": "13_esp32/WebSerialSts",
        "qos": "0",
        "retain": "false",
        "respTopic": "",
        "contentType": "",
        "userProps": "",
        "correl": "",
        "expiry": "",
        "broker": "407a01e4.6b637",
        "x": 720,
        "y": 620,
        "wires": []
    },
    {
        "id": "ef4b321fdad53af5",
        "type": "mqtt out",
        "z": "b27365bdbcced484",
        "name": "07 tbn",
        "topic": "07_esp32/WebSerialSts",
        "qos": "0",
        "retain": "false",
        "respTopic": "",
        "contentType": "",
        "userProps": "",
        "correl": "",
        "expiry": "",
        "broker": "407a01e4.6b637",
        "x": 710,
        "y": 260,
        "wires": []
    },
    {
        "id": "dd6b48ca93e86a29",
        "type": "mqtt out",
        "z": "b27365bdbcced484",
        "name": "10 tbn",
        "topic": "10_esp32/WebSerialSts",
        "qos": "0",
        "retain": "false",
        "respTopic": "",
        "contentType": "",
        "userProps": "",
        "correl": "",
        "expiry": "",
        "broker": "407a01e4.6b637",
        "x": 710,
        "y": 440,
        "wires": []
    },
    {
        "id": "03fcb5a37a6c2431",
        "type": "debug",
        "z": "b27365bdbcced484",
        "name": "debug 136",
        "active": false,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "false",
        "statusVal": "",
        "statusType": "auto",
        "x": 950,
        "y": 500,
        "wires": []
    },
    {
        "id": "a70ad6054f13b2f3",
        "type": "debug",
        "z": "b27365bdbcced484",
        "name": "debug 137",
        "active": false,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "false",
        "statusVal": "",
        "statusType": "auto",
        "x": 950,
        "y": 620,
        "wires": []
    },
    {
        "id": "ac67bbd109977a1d",
        "type": "debug",
        "z": "b27365bdbcced484",
        "name": "debug 159",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "false",
        "statusVal": "",
        "statusType": "auto",
        "x": 950,
        "y": 320,
        "wires": []
    },
    {
        "id": "985ecbc7.67a138",
        "type": "websocket-listener",
        "z": "b27365bdbcced484",
        "path": "/ws/webserial",
        "wholemsg": "false"
    },
    {
        "id": "407a01e4.6b637",
        "type": "mqtt-broker",
        "name": "",
        "broker": "localhost",
        "port": "1883",
        "clientid": "",
        "autoConnect": true,
        "usetls": false,
        "protocolVersion": "4",
        "keepalive": "60",
        "cleansession": true,
        "birthTopic": "",
        "birthQos": "0",
        "birthPayload": "",
        "birthMsg": {},
        "closeTopic": "",
        "closePayload": "",
        "closeMsg": {},
        "willTopic": "",
        "willQos": "0",
        "willPayload": "",
        "willMsg": {},
        "sessionExpiry": ""
    }
]

```

---

<div class="post-metadata">

### Author: ![E1cid](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/e1cid/32/77971_2.png) [@E1cid](https://discourse.nodered.org/u/E1cid)
#### Post date: [9 August 2024 10:35 UTC](https://discourse.nodered.org/t/remote-observing-esp-serialmonitor/90072/2 "2024-08-09T10:35:39Z")

</div>

Note sure what is going on but two things i notice right off.  
1 There is no response node to your http in post node.  
2 Your fetch call has no error catch to handle any errors.

[edit] Another thing i notice is you force a page reload, would it be better just to update the dome elements data.

---

<div class="post-metadata">

### Author: ![Tany](https://avatars.discourse-cdn.com/v4/letter/t/dfb087/32.png) [@Tany](https://discourse.nodered.org/u/Tany)
#### Post date: [10 August 2024 19:54 UTC](https://discourse.nodered.org/t/remote-observing-esp-serialmonitor/90072/3 "2024-08-10T19:54:23Z")

</div>

Thank You E1cid.

1. Page reload : is now out. no need for.
2. error catch : indeed, should be added
3. no node in post : "[ws]/ws/webserial" was twice in. is now removed.

Probably the issue is on the ESP32 side, though the snippet (callback) is copy conform with an example of RandomNerdTutorials.

Thanks anyway.  
T

---

<div class="post-metadata">

### Author: ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)
#### Post date: [8 November 2024 19:54 UTC](https://discourse.nodered.org/t/remote-observing-esp-serialmonitor/90072/4 "2024-11-08T19:54:26Z")

</div>

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.