Fix WebSockets Path vs. Namespace Issue

Dockerfile

@@ -15,4 +15,5 @@ ENV JADETREE_API_HOST backend
 ENV JADETREE_API_PORT 5000
 ENV JADETREE_API_PATH /api/v1
 ENV JADETREE_API_SCHEME http
+ENV JADETREE_WS_PATH /socket.io
 EXPOSE 80

docker/config.json

@@ -1,3 +1,5 @@
 {
-  "apiurl": "/api"
+  "apiurl": "/api",
+  "ws_url": "/socket.io",
+  "ws_namespace": "/"
 }

docker/nginx.conf.template

@@ -26,7 +26,7 @@ server {
     proxy_set_header X-Real-IP $remote_addr;
     proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
     proxy_set_header X-Forwarded-Proto $scheme;
-    proxy_pass ${JADETREE_API_SCHEME}://jadetree_api/socket.io;
+    proxy_pass ${JADETREE_API_SCHEME}://jadetree_api${JADETREE_WS_PATH};
   }
 
   error_page   500 502 503 504  /50x.html;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jadetree/frontend",
-  "version": "0.9.15-alpha",
+  "version": "0.9.16-alpha",
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",

public/config.json

@@ -1,3 +1,5 @@
 {
-  "apiurl": "http://localhost:5000/api/v1"
+  "apiurl": "http://localhost:5000/api/v1",
+  "ws_url": "http://localhost:5000/socket.io",
+  "ws_namespace": "/"
 }

src/main.ts

@@ -6,7 +6,7 @@ import VTooltip from 'v-tooltip';
 import VueFormulate from '@braid/vue-formulate';
 import VueSocketIOExt from 'vue-socket.io-extended';
 import { JtControls, JtFormulateLibrary } from '@jadetree/controls';
-import io from 'socket.io-client';
+import { Manager } from 'socket.io-client';
 
 // Load API
 import api from './api';
@@ -24,6 +24,8 @@ import App from './App.vue';
 // Configuration Schema
 type JadeTreeConfig = {
   apiurl: string;
+  ws_url?: string;
+  ws_namespace?: string;
 };
 
 // Configuration Loader
@@ -87,9 +89,14 @@ async function startup() {
   }
 
   api.baseUrl = config.apiurl;
-  api.socket = io(config.apiurl, { autoConnect: false });
 
-  // Setup SocketIO
+  // Setup WebSockets
+  const wsUrl = config.ws_url || config.apiurl;
+  const wsNamespace = config.ws_namespace || '/';
+  const manager = new Manager(wsUrl, { autoConnect: false });
+
+  api.socket = manager.socket(wsNamespace);
+
   Vue.use(VueSocketIOExt, api.socket);
 
   // Initialize Vuex Modules