From 80f11aae0ed667e0602a8f9cafadb1ea14ae05c5 Mon Sep 17 00:00:00 2001
From: Martin Man <mman@martinman.net>
Date: Tue, 13 Aug 2024 17:41:36 +0200
Subject: [PATCH] fix(mqtt): derive websocket protocol from html app protocol

---
 src/app/KVNRV/App.tsx     | 16 +++++++++++++---
 src/app/Marine2/App.tsx   | 16 +++++++++++++---
 src/app/MarineApp/App.tsx | 16 +++++++++++++---
 src/index.tsx             |  7 ++++---
 4 files changed, 43 insertions(+), 12 deletions(-)

diff --git a/src/app/KVNRV/App.tsx b/src/app/KVNRV/App.tsx
index e8cf5ca2..6e6e441a 100644
--- a/src/app/KVNRV/App.tsx
+++ b/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()
diff --git a/src/app/Marine2/App.tsx b/src/app/Marine2/App.tsx
index b54895b4..a4774b0c 100644
--- a/src/app/Marine2/App.tsx
+++ b/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) {
diff --git a/src/app/MarineApp/App.tsx b/src/app/MarineApp/App.tsx
index a953e451..7f0a47f1 100644
--- a/src/app/MarineApp/App.tsx
+++ b/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()
diff --git a/src/index.tsx b/src/index.tsx
index 16d8482b..25b95459 100644
--- a/src/index.tsx
+++ b/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