Rework backend add MQTT and WebSocket support

* Update back end to add MQTT and WebSocket support
* Update demo project to demonstrate MQTT and WebSockets
* Update documentation to describe newly added and modified functionallity
* Introduce separate MQTT pub/sub, HTTP get/post and WebSocket rx/tx classes
* Significant reanaming - more accurate class names
* Use PROGMEM_WWW as default
* Update README documenting PROGMEM_WWW as default
* Update README with API changes

Author: rjwats

README.md

@@ -0,0 +1,11 @@
+{
+  "enabled": false,
+  "host": "test.mosquitto.org",
+  "port": 1883,
+  "authenticated": false,
+  "username": "mqttuser",
+  "password": "mqttpassword",
+  "keepAlive": 16,
+  "cleanSession": true,
+  "maxTopicLength": 128
+}

data/config/demoSettings.json

@@ -1,3 +1,4 @@
 # Change the IP address to that of your ESP device to enable local development of the UI.
 # Remember to also enable CORS in platformio.ini before uploading the code to the device.
-REACT_APP_ENDPOINT_ROOT=http://192.168.0.21/rest/
+REACT_APP_HTTP_ROOT=http://192.168.0.99
+REACT_APP_WEB_SOCKET_ROOT=ws://192.168.0.99

data/config/mqttSettings.json

@@ -1,2 +1 @@
-REACT_APP_ENDPOINT_ROOT=/rest/
 GENERATE_SOURCEMAP=false

interface/.env.development

@@ -6,6 +6,7 @@
     "@material-ui/core": "^4.9.8",
     "@material-ui/icons": "^4.9.1",
     "@types/jwt-decode": "^2.2.1",
+    "@types/lodash": "^4.14.149",
     "@types/node": "^12.12.32",
     "@types/react": "^16.9.27",
     "@types/react-dom": "^16.9.5",
@@ -14,6 +15,7 @@
     "@types/react-router-dom": "^5.1.3",
     "compression-webpack-plugin": "^3.0.1",
     "jwt-decode": "^2.2.0",
+    "lodash": "^4.17.15",
     "mime-types": "^2.1.25",
     "moment": "^2.24.0",
     "notistack": "^0.9.7",
@@ -24,6 +26,7 @@
     "react-router": "^5.1.2",
     "react-router-dom": "^5.1.2",
     "react-scripts": "3.4.1",
+    "sockette": "^2.0.6",
     "typescript": "^3.7.5",
     "zlib": "^1.0.5"
   },

interface/.env.production

@@ -15,6 +15,7 @@ import Security from './security/Security';
 import System from './system/System';
 
 import { PROJECT_PATH } from './api';
+import Mqtt from './mqtt/Mqtt';
 
 class AppRouting extends Component {
 
@@ -31,6 +32,7 @@ class AppRouting extends Component {
           <AuthenticatedRoute exact path="/wifi/*" component={WiFiConnection} />         
           <AuthenticatedRoute exact path="/ap/*" component={AccessPoint} />
           <AuthenticatedRoute exact path="/ntp/*" component={NetworkTime} />
+          <AuthenticatedRoute exact path="/mqtt/*" component={Mqtt} />
           <AuthenticatedRoute exact path="/security/*" component={Security} /> 
           <AuthenticatedRoute exact path="/system/*" component={System} />          
           <Redirect to="/" />

interface/package-lock.json

@@ -9,6 +9,8 @@ export const LIST_NETWORKS_ENDPOINT = ENDPOINT_ROOT + "listNetworks";
 export const WIFI_SETTINGS_ENDPOINT = ENDPOINT_ROOT + "wifiSettings";
 export const WIFI_STATUS_ENDPOINT = ENDPOINT_ROOT + "wifiStatus";
 export const OTA_SETTINGS_ENDPOINT = ENDPOINT_ROOT + "otaSettings";
+export const MQTT_SETTINGS_ENDPOINT = ENDPOINT_ROOT + "mqttSettings";
+export const MQTT_STATUS_ENDPOINT = ENDPOINT_ROOT + "mqttStatus";
 export const SYSTEM_STATUS_ENDPOINT = ENDPOINT_ROOT + "systemStatus";
 export const SIGN_IN_ENDPOINT = ENDPOINT_ROOT + "signIn";
 export const VERIFY_AUTHORIZATION_ENDPOINT = ENDPOINT_ROOT + "verifyAuthorization";

interface/package.json

@@ -1,3 +1,24 @@
 export const PROJECT_NAME = process.env.REACT_APP_PROJECT_NAME!;
 export const PROJECT_PATH = process.env.REACT_APP_PROJECT_PATH!;
-export const ENDPOINT_ROOT = process.env.REACT_APP_ENDPOINT_ROOT!;
+
+export const ENDPOINT_ROOT = calculateEndpointRoot("/rest/");
+export const WEB_SOCKET_ROOT = calculateWebSocketRoot("/ws/");
+
+function calculateEndpointRoot(endpointPath: string) {
+    const httpRoot = process.env.REACT_APP_HTTP_ROOT;
+    if (httpRoot) {
+        return httpRoot + endpointPath;
+    }
+    const location = window.location;
+    return location.protocol + "//" + location.host + endpointPath;
+}
+
+function calculateWebSocketRoot(webSocketPath: string) {
+    const webSocketRoot = process.env.REACT_APP_WEB_SOCKET_ROOT;
+    if (webSocketRoot) {
+        return webSocketRoot + webSocketPath;
+    }
+    const location = window.location;
+    const webProtocol = location.protocol === "https:" ? "wss:" : "ws:";
+    return webProtocol + "//" + location.host + webSocketPath;
+}