Changing default host to match window location

.github/workflows/build-space.yml

@@ -0,0 +1,29 @@
+name: Docker Build Space
+
+on:
+  push:
+    paths-ignore:
+        - 'docs/**'
+        - 'tests/**'
+
+jobs:
+  docker:
+    runs-on:
+      group: larger-runners
+    steps:
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+
+      - name: Login to Docker Hub
+        uses: docker/login-action@v3
+        with:
+          username: ${{ secrets.DOCKERHUB_USERNAME }}
+          password: ${{ secrets.DOCKERHUB_TOKEN }}
+
+      - name: Build and push
+        uses: docker/build-push-action@v6
+        with:
+          push: true
+          tags: rsamf/graphbook:space-v1
+          cache-from: type=registry,ref=rsamf/graphbook:space-v1
+          cache-to: type=inline

README.md

@@ -133,3 +133,4 @@ You can use any other virtual environment solution, but it is highly adviced to
 1. `cd web`
 1. `deno install`
 1. `deno run dev`
+1. In your browser, navigate to localhost:5173, and in the settings, change your **Graph Server Host** to `localhost:8005`.

graphbook/web.py

@@ -416,6 +416,9 @@ async def _async_start(self):
         loop.run_in_executor(None, self.view_manager.start)
         await asyncio.Event().wait()
 
+    async def on_shutdown(self):
+        self.view_manager.close_all()
+
     def start(self):
         self.app.router.add_routes(self.routes)
 
@@ -427,6 +430,8 @@ def start(self):
         if self.web_dir is not None:
             self.app.router.add_routes([web.static("/", self.web_dir)])
 
+        self.app.on_shutdown.append(self.on_shutdown)
+
         print(f"Starting graph server at {self.host}:{self.port}")
         self.node_hub.start()
         try:

web/src/api.ts

@@ -9,11 +9,15 @@ export class ServerAPI {
     private websocket: WebSocket | null;
     private listeners: Set<[string, EventListenerOrEventListenerObject]>
     private reconnectListeners: Set<Function>;
+    private protocol: string;
+    private wsProtocol: string;
 
     constructor() {
         this.nodes = {};
         this.listeners = new Set();
         this.reconnectListeners = new Set();
+        this.protocol = window.location.protocol;
+        this.wsProtocol = this.protocol === 'https:' ? 'wss:' : 'ws:';
     }
 
     public connect(host: string, mediaHost: string) {
@@ -33,7 +37,7 @@ export class ServerAPI {
     private connectWebSocket() {
         const connect = () => {
             try {
-                this.websocket = new WebSocket(`ws://${this.host}/ws`);
+                this.websocket = new WebSocket(`${this.wsProtocol}//${this.host}/ws`);
             } catch (e) {
                 console.error(e);
                 return;
@@ -116,7 +120,7 @@ export class ServerAPI {
 
     private async post(path, data): Promise<any> {
         try {
-            const response = await fetch(`http://${this.host}/${path}`, {
+            const response = await fetch(`${this.protocol}//${this.host}/${path}`, {
                 method: 'POST',
                 headers: {
                     'Content-Type': 'application/json'
@@ -133,19 +137,24 @@ export class ServerAPI {
     }
 
     private async put(path, data): Promise<Response> {
-        const response = await fetch(`http://${this.host}/${path}`, {
-            method: 'PUT',
-            headers: {
-                'Content-Type': 'application/json'
-            },
-            body: JSON.stringify(data)
-        });
-        return response;
+        try {
+            const response = await fetch(`${this.protocol}//${this.host}/${path}`, {
+                method: 'PUT',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify(data)
+            });
+            return response;
+        } catch (e) {
+            console.error(`PUT request error: ${e}`);
+            throw e;
+        }
     }
 
     private async get(path): Promise<any> {
         try {
-            const response = await fetch(`http://${this.host}/${path}`);
+            const response = await fetch(`${this.protocol}//${this.host}/${path}`);
             if (response.ok) {
                 return await response.json();
             }
@@ -157,7 +166,7 @@ export class ServerAPI {
 
     private async delete(path): Promise<any> {
         try {
-            const response = await fetch(`http://${this.host}/${path}`, {
+            const response = await fetch(`${this.host}/${path}`, {
                 method: 'DELETE',
                 headers: {
                     'Content-Type': 'application/json'

web/src/hooks/Settings.ts

@@ -1,11 +1,12 @@
 import { useState, useEffect, useCallback } from "react";
 
 const MONITOR_DATA_COLUMNS = ['stats', 'logs', 'notes', 'images'];
+const defaultPort = window.location.port === '' ? '' : `:${window.location.port}`;
 let settings = {
     theme: "Light",
     disableTooltips: false,
-    graphServerHost: "localhost:8005",
-    mediaServerHost: "localhost:8006",
+    graphServerHost: `${window.location.hostname}${defaultPort}`,
+    mediaServerHost: `${window.location.hostname}:8006`,
     useExternalMediaServer: false,
     monitorDataColumns: MONITOR_DATA_COLUMNS,
     monitorLogsShouldScrollToBottom: true,