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

interface/src/components/MenuAppBar.tsx

@@ -13,6 +13,7 @@ import SettingsIcon from '@material-ui/icons/Settings';
 import AccessTimeIcon from '@material-ui/icons/AccessTime';
 import AccountCircleIcon from '@material-ui/icons/AccountCircle';
 import SettingsInputAntennaIcon from '@material-ui/icons/SettingsInputAntenna';
+import DeviceHubIcon from '@material-ui/icons/DeviceHub';
 import LockIcon from '@material-ui/icons/Lock';
 import MenuIcon from '@material-ui/icons/Menu';
 
@@ -136,6 +137,12 @@ class MenuAppBar extends React.Component<MenuAppBarProps, MenuAppBarState> {
             </ListItemIcon>
             <ListItemText primary="Network Time" />
           </ListItem>
+          <ListItem to='/mqtt/' selected={path.startsWith('/mqtt/')} button component={Link}>
+            <ListItemIcon>
+              <DeviceHubIcon />
+            </ListItemIcon>
+            <ListItemText primary="MQTT" />
+          </ListItem>          
           <ListItem to='/security/' selected={path.startsWith('/security/')} button component={Link} disabled={!authenticatedContext.me.admin}>
             <ListItemIcon>
               <LockIcon />

interface/src/components/RestController.tsx

@@ -5,9 +5,8 @@ import { redirectingAuthorizedFetch } from '../authentication';
 
 export interface RestControllerProps<D> extends WithSnackbarProps {
   handleValueChange: (name: keyof D) => (event: React.ChangeEvent<HTMLInputElement>) => void;
-  handleSliderChange: (name: keyof D) => (event: React.ChangeEvent<{}>, value: number | number[]) => void;
 
-  setData: (data: D) => void;
+  setData: (data: D, callback?: () => void) => void;
   saveData: () => void;
   loadData: () => void;
 
@@ -16,13 +15,7 @@ export interface RestControllerProps<D> extends WithSnackbarProps {
   errorMessage?: string;
 }
 
-interface RestControllerState<D> {
-  data?: D;
-  loading: boolean;
-  errorMessage?: string;
-}
-
-const extractValue = (event: React.ChangeEvent<HTMLInputElement>) => {
+export const extractEventValue = (event: React.ChangeEvent<HTMLInputElement>) => {
   switch (event.target.type) {
     case "number":
       return event.target.valueAsNumber;
@@ -33,6 +26,12 @@ const extractValue = (event: React.ChangeEvent<HTMLInputElement>) => {
   }
 }
 
+interface RestControllerState<D> {
+  data?: D;
+  loading: boolean;
+  errorMessage?: string;
+}
+
 export function restController<D, P extends RestControllerProps<D>>(endpointUrl: string, RestController: React.ComponentType<P & RestControllerProps<D>>) {
   return withSnackbar(
     class extends React.Component<Omit<P, keyof RestControllerProps<D>> & WithSnackbarProps, RestControllerState<D>> {
@@ -43,12 +42,12 @@ export function restController<D, P extends RestControllerProps<D>>(endpointUrl:
         errorMessage: undefined
       };
 
-      setData = (data: D) => {
+      setData = (data: D, callback?: () => void) => {
         this.setState({
           data,
           loading: false,
           errorMessage: undefined
-        });
+        }, callback);
       }
 
       loadData = () => {
@@ -95,19 +94,13 @@ export function restController<D, P extends RestControllerProps<D>>(endpointUrl:
       }
 
       handleValueChange = (name: keyof D) => (event: React.ChangeEvent<HTMLInputElement>) => {
-        const data = { ...this.state.data!, [name]: extractValue(event) };
+        const data = { ...this.state.data!, [name]: extractEventValue(event) };
         this.setState({ data });
       }
 
-      handleSliderChange = (name: keyof D) => (event: React.ChangeEvent<{}>, value: number | number[]) => {
-        const data = { ...this.state.data!, [name]: value };
-        this.setState({ data });
-      };
-
       render() {
         return <RestController
           handleValueChange={this.handleValueChange}
-          handleSliderChange={this.handleSliderChange}
           setData={this.setData}
           saveData={this.saveData}
           loadData={this.loadData}

interface/src/components/RestFormLoader.tsx

@@ -2,7 +2,8 @@ import React from 'react';
 
 import { makeStyles, Theme, createStyles } from '@material-ui/core/styles';
 import { Button, LinearProgress, Typography } from '@material-ui/core';
-import { RestControllerProps } from './RestController';
+
+import { RestControllerProps } from '.';
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({

interface/src/components/WebSocketController.tsx

@@ -0,0 +1,133 @@
+import React from 'react';
+import Sockette from 'sockette';
+import throttle from 'lodash/throttle';
+import { withSnackbar, WithSnackbarProps } from 'notistack';
+
+import { addAccessTokenParameter } from '../authentication';
+import { extractEventValue } from '.';
+
+export interface WebSocketControllerProps<D> extends WithSnackbarProps {
+  handleValueChange: (name: keyof D) => (event: React.ChangeEvent<HTMLInputElement>) => void;
+
+  setData: (data: D, callback?: () => void) => void;
+  saveData: () => void;
+  saveDataAndClear(): () => void;
+
+  connected: boolean;
+  data?: D;
+}
+
+interface WebSocketControllerState<D> {
+  ws: Sockette;
+  connected: boolean;
+  clientId?: string;
+  data?: D;
+}
+
+enum WebSocketMessageType {
+  ID = "id",
+  PAYLOAD = "payload"
+}
+
+interface WebSocketIdMessage {
+  type: typeof WebSocketMessageType.ID;
+  id: string;
+}
+
+interface WebSocketPayloadMessage<D> {
+  type: typeof WebSocketMessageType.PAYLOAD;
+  origin_id: string;
+  payload: D;
+}
+
+export type WebSocketMessage<D> = WebSocketIdMessage | WebSocketPayloadMessage<D>;
+
+export function webSocketController<D, P extends WebSocketControllerProps<D>>(wsUrl: string, wsThrottle: number, WebSocketController: React.ComponentType<P & WebSocketControllerProps<D>>) {
+  return withSnackbar(
+    class extends React.Component<Omit<P, keyof WebSocketControllerProps<D>> & WithSnackbarProps, WebSocketControllerState<D>> {
+      constructor(props: Omit<P, keyof WebSocketControllerProps<D>> & WithSnackbarProps) {
+        super(props);
+        this.state = {
+          ws: new Sockette(addAccessTokenParameter(wsUrl), {
+            onmessage: this.onMessage,
+            onopen: this.onOpen,
+            onclose: this.onClose,
+          }),
+          connected: false
+        }
+      }
+
+      componentWillUnmount() {
+        this.state.ws.close();
+      }
+
+      onMessage = (event: MessageEvent) => {
+        const rawData = event.data;
+        if (typeof rawData === 'string' || rawData instanceof String) {
+          this.handleMessage(JSON.parse(rawData as string) as WebSocketMessage<D>);
+        }
+      }
+
+      handleMessage = (message: WebSocketMessage<D>) => {
+        switch (message.type) {
+          case WebSocketMessageType.ID:
+            this.setState({ clientId: message.id });
+            break;
+          case WebSocketMessageType.PAYLOAD:
+            const { clientId, data } = this.state;
+            if (clientId && (!data || clientId !== message.origin_id)) {
+              this.setState(
+                { data: message.payload }
+              );
+            }
+            break;
+        }
+      }
+
+      onOpen = () => {
+        this.setState({ connected: true });
+      }
+
+      onClose = () => {
+        this.setState({ connected: false, clientId: undefined, data: undefined });
+      }
+
+      setData = (data: D, callback?: () => void) => {
+        this.setState({ data }, callback);
+      }
+
+      saveData = throttle(() => {
+        const { ws, connected, data } = this.state;
+        if (connected) {
+          ws.json(data);
+        }
+      }, wsThrottle);
+
+      saveDataAndClear = throttle(() => {
+        const { ws, connected, data } = this.state;
+        if (connected) {
+          this.setState({
+            data: undefined
+          }, () => ws.json(data));
+        }
+      }, wsThrottle);
+
+      handleValueChange = (name: keyof D) => (event: React.ChangeEvent<HTMLInputElement>) => {
+        const data = { ...this.state.data!, [name]: extractEventValue(event) };
+        this.setState({ data });
+      }
+
+      render() {
+        return <WebSocketController
+          handleValueChange={this.handleValueChange}
+          setData={this.setData}
+          saveData={this.saveData}
+          saveDataAndClear={this.saveDataAndClear}
+          connected={this.state.connected}
+          data={this.state.data}
+          {...this.props as P}
+        />;
+      }
+
+    });
+}

interface/src/components/WebSocketFormLoader.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+
+import { makeStyles, Theme, createStyles } from '@material-ui/core/styles';
+import { LinearProgress, Typography } from '@material-ui/core';
+
+import { WebSocketControllerProps } from '.';
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    loadingSettings: {
+      margin: theme.spacing(0.5),
+    },
+    loadingSettingsDetails: {
+      margin: theme.spacing(4),
+      textAlign: "center"
+    }
+  })
+);
+
+export type WebSocketFormProps<D> = Omit<WebSocketControllerProps<D>, "connected"> & { data: D };
+
+interface WebSocketFormLoaderProps<D> extends WebSocketControllerProps<D> {
+  render: (props: WebSocketFormProps<D>) => JSX.Element;
+}
+
+export default function WebSocketFormLoader<D>(props: WebSocketFormLoaderProps<D>) {
+  const { connected, render, data, ...rest } = props;
+  const classes = useStyles();
+  if (!connected || !data) {
+    return (
+      <div className={classes.loadingSettings}>
+        <LinearProgress className={classes.loadingSettingsDetails} />
+        <Typography variant="h6" className={classes.loadingSettingsDetails}>
+          Connecting to WebSocket...
+        </Typography>
+      </div>
+    );
+  }
+  return render({ ...rest, data });
+}

interface/src/components/index.ts

@@ -6,6 +6,10 @@ export { default as MenuAppBar } from './MenuAppBar';
 export { default as PasswordValidator } from './PasswordValidator';
 export { default as RestFormLoader } from './RestFormLoader';
 export { default as SectionContent } from './SectionContent';
+export { default as WebSocketFormLoader } from './WebSocketFormLoader';
 
 export * from './RestFormLoader';
 export * from './RestController';
+
+export * from './WebSocketFormLoader';
+export * from './WebSocketController';