add support for connecting via http

liamcottle · Nov 16, 2024 · 0082967 · 0082967
1 parent a8cd564
commit 0082967
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 3 deletions.
diff --git a/src/components/pages/ConnectPage.vue b/src/components/pages/ConnectPage.vue
@@ -8,7 +8,7 @@
         <div class="mx-auto my-auto space-y-2">
 
             <!-- bluetooth -->
-            <button @click="connectViaBluetooth" type="button" class="w-full flex cursor-pointer bg-blue-500 rounded shadow px-2 py-1 text-white space-x-2 font-semibold hover:bg-blue-400">
+            <button @click="connectViaBluetooth" type="button" class="w-full flex cursor-pointer bg-white rounded shadow px-3 py-2 text-black space-x-2 font-semibold hover:bg-gray-100">
                 <span>
                     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" class="w-6">
                         <rect width="256" height="256" fill="none"/>
@@ -22,7 +22,7 @@
             </button>
 
             <!-- serial -->
-            <button @click="connectViaSerial" type="button" class="w-full flex cursor-pointer bg-blue-500 rounded shadow px-2 py-1 text-white space-x-2 font-semibold hover:bg-blue-400">
+            <button @click="connectViaSerial" type="button" class="w-full flex cursor-pointer bg-white rounded shadow px-3 py-2 text-black space-x-2 font-semibold hover:bg-gray-100">
                 <span>
                     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" class="w-6">
                         <rect width="256" height="256" fill="none"/>
@@ -36,6 +36,18 @@
                 <span>Connect via Serial</span>
             </button>
 
+            <!-- http -->
+            <button @click="connectViaHttp" type="button" class="w-full flex cursor-pointer bg-white rounded shadow px-3 py-2 text-black space-x-2 font-semibold hover:bg-gray-100">
+                <span>
+                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
+                        <path stroke-linecap="round" stroke-linejoin="round" d="M12 21a9.004 9.004 0 0 0 8.716-6.747M12 21a9.004 9.004 0 0 1-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a8.997 8.997 0 0 1 7.843 4.582M12 3a8.997 8.997 0 0 0-7.843 4.582m15.686 0A11.953 11.953 0 0 1 12 10.5c-2.998 0-5.74-1.1-7.843-2.918m15.686 0A8.959 8.959 0 0 1 21 12c0 .778-.099 1.533-.284 2.253m0 0A17.919 17.919 0 0 1 12 16.5c-3.162 0-6.133-.815-8.716-2.247m0 0A9.015 9.015 0 0 1 3 12c0-1.605.42-3.113 1.157-4.418" />
+                    </svg>
+                </span>
+                <span>Connect via HTTP</span>
+            </button>
+
+            <div class="text-gray-700 text-sm">HTTP requires a proxy to bypass CORS</div>
+
         </div>
 
     </Page>
@@ -65,6 +77,21 @@ export default {
                 name: "main",
             });
         },
+        async connectViaHttp() {
+
+            // ask for device address, and do nothing if not provided
+            const address = prompt("Enter IP Address or Hostname");
+            if(!address){
+                return;
+            }
+
+            await Connection.connectViaHttp(address);
+
+            this.$router.push({
+                name: "main",
+            });
+
+        },
     },
 }
 </script>
diff --git a/src/js/Connection.js b/src/js/Connection.js
@@ -1,5 +1,5 @@
 import GlobalState from "./GlobalState.js";
-import {BleConnection, Constants, Protobuf, SerialConnection, Types,} from "@meshtastic/js";
+import {BleConnection, Constants, HttpConnection, Protobuf, SerialConnection, Types,} from "@meshtastic/js";
 
 class Connection {
 
@@ -21,6 +21,14 @@ class Connection {
         });
     }
 
+    static async connectViaHttp(address) {
+        await this.connect(new HttpConnection(), {
+            address: address,
+            fetchInterval: 1000,
+            tls: true,
+        });
+    }
+
     static async connect(connection, connectionArgs) {
 
         // check if already connected