fully working example and many fixes

frontend/misc/Loading.vue

@@ -6,7 +6,8 @@ import {VContainer, VRow, VCol, VProgressCircular} from "vuetify/lib/components/
   <v-container>
     <v-row justify="center" style="height: 100%">
       <v-col align-self="center">
-        <v-progress-circular indeterminate style="display: block; margin: 0 auto;"/>
+        <v-progress-circular indeterminate style="display: block; margin: 0 auto;"></v-progress-circular>
+        <slot/>
       </v-col>
     </v-row>
   </v-container>

frontend/misc/network.ts

@@ -24,8 +24,10 @@ export class NetworkManager extends EventTarget {
      * Updates will be emitted as "update" events, including the download URL and the model name.
      */
     async load(url: string) {
-        if (url.startsWith("ws://") || url.startsWith("wss://")) {
-            this.monitorWebSocket(url);
+        if (url.startsWith("dev+")) {
+            let baseUrl = new URL(url.slice(4));
+            baseUrl.searchParams.set("api_updates", "true");
+            this.monitorDevServer(baseUrl);
         } else {
             // Get the last part of the URL as the "name" of the model
             let name = url.split("/").pop();
@@ -38,21 +40,20 @@ export class NetworkManager extends EventTarget {
         }
     }
 
-    private monitorWebSocket(url: string) {
+    private monitorDevServer(url: string) {
         // WARNING: This will spam the console logs with failed requests when the server is down
-        let ws = new WebSocket(url);
-        ws.onmessage = (event) => {
+        let eventSource = new EventSource(url);
+        eventSource.onmessage = (event) => {
             let data = JSON.parse(event.data);
             console.debug("WebSocket message", data);
             let urlObj = new URL(url);
-            urlObj.protocol = urlObj.protocol === "ws:" ? "http:" : "https:";
+            urlObj.searchParams.delete("api_updates");
             urlObj.searchParams.set("api_object", data.name);
             this.foundModel(data.name, data.hash, urlObj.toString());
         };
-        ws.onerror = () => ws.close();
-        ws.onclose = () => setTimeout(() => this.monitorWebSocket(url), settings.monitorEveryMs);
-        let timeoutFaster = setTimeout(() => ws.close(), settings.monitorOpenTimeoutMs);
-        ws.onopen = () => clearTimeout(timeoutFaster);
+        eventSource.onerror = () => { // Retry after a very short delay
+            setTimeout(() => this.monitorDevServer(url), settings.monitorEveryMs);
+        }
     }
 
     private foundModel(name: string, hash: string | null, url: string) {

frontend/misc/settings.ts

@@ -10,11 +10,11 @@ export const settings = {
         // @ts-ignore
         // new URL('../../assets/logo_build/img.jpg.glb', import.meta.url).href,
         // Websocket URLs automatically listen for new models from the python backend
-        "ws://127.0.0.1:32323/"
+        "dev+http://127.0.0.1:32323/"
     ],
     displayLoadingEveryMs: 1000, /* How often to display partially loaded models */
     monitorEveryMs: 100,
-    monitorOpenTimeoutMs: 100,
+    monitorOpenTimeoutMs: 1000,
     // ModelViewer settings
     autoplay: true,
     arModes: 'webxr scene-viewer quick-look',