Abstract MQTT from communication and make mqtt optional (#4462)

* Add option for mqtt config

* Setup communication layer

* Have a dispatcher which is responsible for handling and sending messages

* Move mqtt to communication

* Separate ws communications module

* Make ws client conform to communicator

* Cleanup imports

* Migrate to new dispatcher

* Clean up

* Need to set topic prefix

* Remove references to mqtt in dispatcher

* Don't start mqtt until dispatcher is subscribed

* Cleanup

* Shorten package

* Formatting

* Remove unused

* Cleanup

* Rename mqtt to ws on web

* Fix ws mypy

* Fix mypy

* Reformat

* Cleanup if/else chain

* Catch bad set commands

web/src/AppBar.jsx

@@ -9,7 +9,7 @@ import FrigateRestartIcon from './icons/FrigateRestart';
 import Prompt from './components/Prompt';
 import { useDarkMode } from './context';
 import { useCallback, useRef, useState } from 'preact/hooks';
-import { useRestart } from './api/mqtt';
+import { useRestart } from './api/ws';
 
 export default function AppBar() {
   const [showMoreMenu, setShowMoreMenu] = useState(false);

web/src/api/__tests__/index.test.jsx

@@ -1,11 +1,11 @@
 import { h } from 'preact';
-import * as Mqtt from '../mqtt';
+import * as WS from '../ws';
 import { ApiProvider, useApiHost } from '..';
 import { render, screen } from 'testing-library';
 
 describe('useApiHost', () => {
   beforeEach(() => {
-    vi.spyOn(Mqtt, 'MqttProvider').mockImplementation(({ children }) => children);
+    vi.spyOn(WS, 'WsProvider').mockImplementation(({ children }) => children);
   });
 
   test('is set from the baseUrl', async () => {

web/src/api/__tests__/ws.test.jsx

@@ -1,10 +1,10 @@
 import { h } from 'preact';
-import { Mqtt, MqttProvider, useMqtt } from '../mqtt';
+import { WS, WsProvider, useWs } from '../ws';
 import { useCallback, useContext } from 'preact/hooks';
 import { fireEvent, render, screen } from 'testing-library';
 
 function Test() {
-  const { state } = useContext(Mqtt);
+  const { state } = useContext(WS);
   return state.__connected ? (
     <div data-testid="data">
       {Object.keys(state).map((key) => (
@@ -18,7 +18,7 @@ function Test() {
 
 const TEST_URL = 'ws://test-foo:1234/ws';
 
-describe('MqttProvider', () => {
+describe('WsProvider', () => {
   let createWebsocket, wsClient;
   beforeEach(() => {
     wsClient = {
@@ -45,23 +45,23 @@ describe('MqttProvider', () => {
     });
   });
 
-  test('connects to the mqtt server', async () => {
+  test('connects to the ws server', async () => {
     render(
-      <MqttProvider config={mockConfig} createWebsocket={createWebsocket} mqttUrl={TEST_URL}>
+      <WsProvider config={mockConfig} createWebsocket={createWebsocket} wsUrl={TEST_URL}>
         <Test />
-      </MqttProvider>
+      </WsProvider>
     );
     await screen.findByTestId('data');
     expect(wsClient.args).toEqual([TEST_URL]);
     expect(screen.getByTestId('__connected')).toHaveTextContent('true');
   });
 
-  test('receives data through useMqtt', async () => {
+  test('receives data through useWs', async () => {
     function Test() {
       const {
         value: { payload, retain },
         connected,
-      } = useMqtt('tacos');
+      } = useWs('tacos');
       return connected ? (
         <div>
           <div data-testid="payload">{JSON.stringify(payload)}</div>
@@ -71,26 +71,26 @@ describe('MqttProvider', () => {
     }
 
     const { rerender } = render(
-      <MqttProvider config={mockConfig} createWebsocket={createWebsocket} mqttUrl={TEST_URL}>
+      <WsProvider config={mockConfig} createWebsocket={createWebsocket} wsUrl={TEST_URL}>
         <Test />
-      </MqttProvider>
+      </WsProvider>
     );
     await screen.findByTestId('payload');
     wsClient.onmessage({
       data: JSON.stringify({ topic: 'tacos', payload: JSON.stringify({ yes: true }), retain: false }),
     });
     rerender(
-      <MqttProvider config={mockConfig} createWebsocket={createWebsocket} mqttUrl={TEST_URL}>
+      <WsProvider config={mockConfig} createWebsocket={createWebsocket} wsUrl={TEST_URL}>
         <Test />
-      </MqttProvider>
+      </WsProvider>
     );
     expect(screen.getByTestId('payload')).toHaveTextContent('{"yes":true}');
     expect(screen.getByTestId('retain')).toHaveTextContent('false');
   });
 
-  test('can send values through useMqtt', async () => {
+  test('can send values through useWs', async () => {
     function Test() {
-      const { send, connected } = useMqtt('tacos');
+      const { send, connected } = useWs('tacos');
       const handleClick = useCallback(() => {
         send({ yes: true });
       }, [send]);
@@ -98,9 +98,9 @@ describe('MqttProvider', () => {
     }
 
     render(
-      <MqttProvider config={mockConfig} createWebsocket={createWebsocket} mqttUrl={TEST_URL}>
+      <WsProvider config={mockConfig} createWebsocket={createWebsocket} wsUrl={TEST_URL}>
         <Test />
-      </MqttProvider>
+      </WsProvider>
     );
     await screen.findByRole('button');
     fireEvent.click(screen.getByRole('button'));
@@ -118,9 +118,9 @@ describe('MqttProvider', () => {
       },
     };
     render(
-      <MqttProvider config={config} createWebsocket={createWebsocket} mqttUrl={TEST_URL}>
+      <WsProvider config={config} createWebsocket={createWebsocket} wsUrl={TEST_URL}>
         <Test />
-      </MqttProvider>
+      </WsProvider>
     );
     await screen.findByTestId('data');
     expect(screen.getByTestId('front/detect/state')).toHaveTextContent(

web/src/api/index.jsx

@@ -1,7 +1,7 @@
 import { h } from 'preact';
 import { baseUrl } from './baseUrl';
 import useSWR, { SWRConfig } from 'swr';
-import { MqttProvider } from './mqtt';
+import { WsProvider } from './ws';
 import axios from 'axios';
 
 axios.defaults.baseURL = `${baseUrl}api/`;
@@ -14,14 +14,14 @@ export function ApiProvider({ children, options }) {
         ...options,
       }}
     >
-      <MqttWithConfig>{children}</MqttWithConfig>
+      <WsWithConfig>{children}</WsWithConfig>
     </SWRConfig>
   );
 }
 
-function MqttWithConfig({ children }) {
+function WsWithConfig({ children }) {
   const { data } = useSWR('config');
-  return data ? <MqttProvider config={data}>{children}</MqttProvider> : children;
+  return data ? <WsProvider config={data}>{children}</WsProvider> : children;
 }
 
 export function useApiHost() {

web/src/api/ws.jsx

@@ -4,7 +4,7 @@ import produce from 'immer';
 import { useCallback, useContext, useEffect, useRef, useReducer } from 'preact/hooks';
 
 const initialState = Object.freeze({ __connected: false });
-export const Mqtt = createContext({ state: initialState, connection: null });
+export const WS = createContext({ state: initialState, connection: null });
 
 const defaultCreateWebsocket = (url) => new WebSocket(url);
 
@@ -30,11 +30,11 @@ function reducer(state, { topic, payload, retain }) {
   }
 }
 
-export function MqttProvider({
+export function WsProvider({
   config,
   children,
   createWebsocket = defaultCreateWebsocket,
-  mqttUrl = `${baseUrl.replace(/^http/, 'ws')}ws`,
+  wsUrl = `${baseUrl.replace(/^http/, 'ws')}ws`,
 }) {
   const [state, dispatch] = useReducer(reducer, initialState);
   const wsRef = useRef();
@@ -50,7 +50,7 @@ export function MqttProvider({
 
   useEffect(
     () => {
-      const ws = createWebsocket(mqttUrl);
+      const ws = createWebsocket(wsUrl);
       ws.onopen = () => {
         dispatch({ topic: '__CLIENT_CONNECTED' });
       };
@@ -66,14 +66,14 @@ export function MqttProvider({
       };
     },
     // Forces reconnecting
-    [state.__reconnectAttempts, mqttUrl] // eslint-disable-line react-hooks/exhaustive-deps
+    [state.__reconnectAttempts, wsUrl] // eslint-disable-line react-hooks/exhaustive-deps
   );
 
-  return <Mqtt.Provider value={{ state, ws: wsRef.current }}>{children}</Mqtt.Provider>;
+  return <WS.Provider value={{ state, ws: wsRef.current }}>{children}</WS.Provider>;
 }
 
-export function useMqtt(watchTopic, publishTopic) {
-  const { state, ws } = useContext(Mqtt);
+export function useWs(watchTopic, publishTopic) {
+  const { state, ws } = useContext(WS);
 
   const value = state[watchTopic] || { payload: null };
 
@@ -98,7 +98,7 @@ export function useDetectState(camera) {
     value: { payload },
     send,
     connected,
-  } = useMqtt(`${camera}/detect/state`, `${camera}/detect/set`);
+  } = useWs(`${camera}/detect/state`, `${camera}/detect/set`);
   return { payload, send, connected };
 }
 
@@ -107,7 +107,7 @@ export function useRecordingsState(camera) {
     value: { payload },
     send,
     connected,
-  } = useMqtt(`${camera}/recordings/state`, `${camera}/recordings/set`);
+  } = useWs(`${camera}/recordings/state`, `${camera}/recordings/set`);
   return { payload, send, connected };
 }
 
@@ -116,7 +116,7 @@ export function useSnapshotsState(camera) {
     value: { payload },
     send,
     connected,
-  } = useMqtt(`${camera}/snapshots/state`, `${camera}/snapshots/set`);
+  } = useWs(`${camera}/snapshots/state`, `${camera}/snapshots/set`);
   return { payload, send, connected };
 }
 
@@ -125,6 +125,6 @@ export function useRestart() {
     value: { payload },
     send,
     connected,
-  } = useMqtt('restart', 'restart');
+  } = useWs('restart', 'restart');
   return { payload, send, connected };
 }

web/src/context/__tests__/index.test.jsx

@@ -3,7 +3,7 @@ import { set as setData } from 'idb-keyval';
 import { DarkModeProvider, useDarkMode, usePersistence } from '..';
 import { fireEvent, render, screen } from 'testing-library';
 import { useCallback } from 'preact/hooks';
-import * as Mqtt from '../../api/mqtt';
+import * as WS from '../../api/ws';
 
 function DarkModeChecker() {
   const { currentMode } = useDarkMode();
@@ -12,7 +12,7 @@ function DarkModeChecker() {
 
 describe('DarkMode', () => {
   beforeEach(() => {
-    vi.spyOn(Mqtt, 'MqttProvider').mockImplementation(({ children }) => children);
+    vi.spyOn(WS, 'WsProvider').mockImplementation(({ children }) => children);
   });
 
   test('uses media by default', async () => {

web/src/routes/Cameras.jsx

@@ -5,7 +5,7 @@ import CameraImage from '../components/CameraImage';
 import ClipIcon from '../icons/Clip';
 import MotionIcon from '../icons/Motion';
 import SnapshotIcon from '../icons/Snapshot';
-import { useDetectState, useRecordingsState, useSnapshotsState } from '../api/mqtt';
+import { useDetectState, useRecordingsState, useSnapshotsState } from '../api/ws';
 import { useMemo } from 'preact/hooks';
 import useSWR from 'swr';
 

web/src/routes/System.jsx

@@ -3,7 +3,7 @@ import ActivityIndicator from '../components/ActivityIndicator';
 import Button from '../components/Button';
 import Heading from '../components/Heading';
 import Link from '../components/Link';
-import { useMqtt } from '../api/mqtt';
+import { useWs } from '../api/ws';
 import useSWR from 'swr';
 import axios from 'axios';
 import { Table, Tbody, Thead, Tr, Th, Td } from '../components/Table';
@@ -18,7 +18,7 @@ export default function System() {
 
   const {
     value: { payload: stats },
-  } = useMqtt('stats');
+  } = useWs('stats');
   const { data: initialStats } = useSWR('stats');
 
   const { cpu_usages, detectors, service = {}, detection_fps: _, ...cameras } = stats || initialStats || emptyObject;

web/src/routes/__tests__/Camera.test.jsx

@@ -1,6 +1,6 @@
 import { h } from 'preact';
 import * as AutoUpdatingCameraImage from '../../components/AutoUpdatingCameraImage';
-import * as Mqtt from '../../api/mqtt';
+import * as WS from '../../api/ws';
 import Camera from '../Camera';
 import { set as setData } from 'idb-keyval';
 import * as JSMpegPlayer from '../../components/JSMpegPlayer';
@@ -14,7 +14,7 @@ describe('Camera Route', () => {
     vi.spyOn(JSMpegPlayer, 'default').mockImplementation(() => {
       return <div data-testid="mock-jsmpeg" />;
     });
-    vi.spyOn(Mqtt, 'MqttProvider').mockImplementation(({ children }) => children);
+    vi.spyOn(WS, 'WsProvider').mockImplementation(({ children }) => children);
   });
 
   // eslint-disable-next-line jest/no-disabled-tests

web/src/routes/__tests__/Cameras.test.jsx

@@ -1,13 +1,13 @@
 import { h } from 'preact';
 import * as CameraImage from '../../components/CameraImage';
-import * as Mqtt from '../../api/mqtt';
+import * as WS from '../../api/ws';
 import Cameras from '../Cameras';
 import { fireEvent, render, screen, waitForElementToBeRemoved } from 'testing-library';
 
 describe('Cameras Route', () => {
   beforeEach(() => {
     vi.spyOn(CameraImage, 'default').mockImplementation(() => <div data-testid="camera-image" />);
-    vi.spyOn(Mqtt, 'useMqtt').mockImplementation(() => ({ value: { payload: 'OFF' }, send: vi.fn() }));
+    vi.spyOn(WS, 'useWs').mockImplementation(() => ({ value: { payload: 'OFF' }, send: vi.fn() }));
   });
 
   test('shows an ActivityIndicator if not yet loaded', async () => {
@@ -39,13 +39,13 @@ describe('Cameras Route', () => {
     const sendDetect = vi.fn();
     const sendRecordings = vi.fn();
     const sendSnapshots = vi.fn();
-    vi.spyOn(Mqtt, 'useDetectState').mockImplementation(() => {
+    vi.spyOn(WS, 'useDetectState').mockImplementation(() => {
       return { payload: 'ON', send: sendDetect };
     });
-    vi.spyOn(Mqtt, 'useRecordingsState').mockImplementation(() => {
+    vi.spyOn(WS, 'useRecordingsState').mockImplementation(() => {
       return { payload: 'OFF', send: sendRecordings };
     });
-    vi.spyOn(Mqtt, 'useSnapshotsState').mockImplementation(() => {
+    vi.spyOn(WS, 'useSnapshotsState').mockImplementation(() => {
       return { payload: 'ON', send: sendSnapshots };
     });
 

web/src/routes/__tests__/Recording.test.jsx

@@ -1,13 +1,13 @@
 import { h } from 'preact';
 import * as CameraImage from '../../components/CameraImage';
-import * as Mqtt from '../../api/mqtt';
+import * as WS from '../../api/ws';
 import Cameras from '../Cameras';
 import { render, screen, waitForElementToBeRemoved } from 'testing-library';
 
 describe('Recording Route', () => {
   beforeEach(() => {
     vi.spyOn(CameraImage, 'default').mockImplementation(() => <div data-testid="camera-image" />);
-    vi.spyOn(Mqtt, 'useMqtt').mockImplementation(() => ({ value: { payload: 'OFF' }, send: jest.fn() }));
+    vi.spyOn(WS, 'useWs').mockImplementation(() => ({ value: { payload: 'OFF' }, send: jest.fn() }));
   });
 
   test('shows an ActivityIndicator if not yet loaded', async () => {