fix(mqtt): derive websocket protocol from html app protocol

Author: mman

src/app/KVNRV/App.tsx

@@ -9,6 +9,7 @@ import { useVisibleWidgetsStore } from "../MarineApp/modules"
 import { KVNRV } from "./KVNRV"
 
 export type AppProps = {
+  protocol: string
   host: string
   port: number | null
 }
@@ -23,12 +24,21 @@ const App = observer((props: AppProps) => {
 
   useEffect(() => {
     if (!appStore.remote) {
-      mqtt.boot(props.host, props.port)
+      mqtt.boot(props.protocol, props.host, props.port)
     } else if (appStore.remote && vrmStore?.webhost && vrmStore?.portalId && vrmStore?.siteId) {
-      mqtt.boot(vrmStore.webhost, null, "", true, vrmStore.portalId)
+      mqtt.boot("https", vrmStore.webhost, null, "", true, vrmStore.portalId)
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [props.host, props.port, appStore.remote, vrmStore.webhost, vrmStore.portalId, vrmStore.siteId, locale])
+  }, [
+    props.protocol,
+    props.host,
+    props.port,
+    appStore.remote,
+    vrmStore.webhost,
+    vrmStore.portalId,
+    vrmStore.siteId,
+    locale,
+  ])
 
   useEffect(() => {
     visibleWidgetsStore.clearVisibleElements()

src/app/Marine2/App.tsx

@@ -10,6 +10,7 @@ import { appErrorBoundaryProps } from "./components/ui/Error/appErrorBoundary"
 import "./css/global.css"
 
 export type AppProps = {
+  protocol: string
   host: string
   port: number | null
 }
@@ -26,12 +27,21 @@ const App = (props: AppProps) => {
 
   useEffect(() => {
     if (!appStore.remote) {
-      mqtt.boot(props.host, props.port)
+      mqtt.boot(props.protocol, props.host, props.port)
     } else if (appStore.remote && vrmStore?.webhost && vrmStore?.portalId && vrmStore?.siteId) {
-      mqtt.boot(vrmStore.webhost, null, "", true, vrmStore.portalId)
+      mqtt.boot("https", vrmStore.webhost, null, "", true, vrmStore.portalId)
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [props.host, props.port, appStore.remote, vrmStore.webhost, vrmStore.portalId, vrmStore.siteId, locale])
+  }, [
+    props.protocol,
+    props.host,
+    props.port,
+    appStore.remote,
+    vrmStore.webhost,
+    vrmStore.portalId,
+    vrmStore.siteId,
+    locale,
+  ])
 
   useEffect(() => {
     if (appStore.language) {

src/app/MarineApp/App.tsx

@@ -9,6 +9,7 @@ import { ErrorModal } from "./components/ErrorModal"
 import { Marine } from "./Marine"
 
 export type AppProps = {
+  protocol: string
   host: string
   port: number | null
 }
@@ -23,12 +24,21 @@ const App = observer((props: AppProps) => {
 
   useEffect(() => {
     if (!appStore.remote) {
-      mqtt.boot(props.host, props.port)
+      mqtt.boot(props.protocol, props.host, props.port)
     } else if (appStore.remote && vrmStore?.webhost && vrmStore?.portalId && vrmStore?.siteId) {
-      mqtt.boot(vrmStore.webhost, null, "", true, vrmStore.portalId)
+      mqtt.boot("https", vrmStore.webhost, null, "", true, vrmStore.portalId)
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [props.host, props.port, appStore.remote, vrmStore.webhost, vrmStore.portalId, vrmStore.siteId, locale])
+  }, [
+    props.protocol,
+    props.host,
+    props.port,
+    appStore.remote,
+    vrmStore.webhost,
+    vrmStore.portalId,
+    vrmStore.siteId,
+    locale,
+  ])
 
   useEffect(() => {
     visibleWidgetsStore.clearVisibleElements()

src/index.tsx

@@ -24,24 +24,25 @@ const getApp = () => {
     case "KVNRV":
       return (
         <React.Suspense fallback={<Loading />}>
-          <KvnrvApp host={host} port={port} />
+          <KvnrvApp protocol={proto} host={host} port={port} />
         </React.Suspense>
       )
     case "Marine":
       return (
         <React.Suspense fallback={<Loading />}>
-          <MarineApp host={host} port={port} />
+          <MarineApp protocol={proto} host={host} port={port} />
         </React.Suspense>
       )
     default:
       return (
         <React.Suspense fallback={<Loading />}>
-          <Marine2App host={host} port={port} />
+          <Marine2App protocol={proto} host={host} port={port} />
         </React.Suspense>
       )
   }
 }
 
+const proto = window.location.protocol
 const host = getParameterByName("host") || window.location.hostname || "localhost"
 const port = parseInt(getParameterByName("port") || window.location.port) || null