Add configurable base path for reverse proxy use (#169)

* ui: Refactor routing functions into Router record
* ui: Store base URI in AppConfig
* ui: Use basePath in Router functions
* backend: Add Web.BasePath config option and update routes
* Tweaks to get SPA to bootstrap basePath configured
* ui: basePath support for apis/serve
* ui: basePath support for message monitor
* web: Redirect requests to / when basePath configured
* doc: add basepath to config.md
* Closes #107

ui/src/monitorMessages.js

@@ -3,22 +3,55 @@
 customElements.define(
   'monitor-messages',
   class MonitorMessages extends HTMLElement {
+    static get observedAttributes() {
+      return [ 'src' ]
+    }
+
     constructor() {
-      const self = super()
-      // TODO make URI/URL configurable.
-      var uri = '/api/v1/monitor/messages'
-      self._url = ((window.location.protocol === 'https:') ? 'wss://' : 'ws://') + window.location.host + uri
-      self._socket = null
+      super()
+      this._url = null    // Current websocket URL.
+      this._socket = null // Currently open WebSocket.
     }
 
     connectedCallback() {
+      if (this.hasAttribute('src')) {
+        this.wsOpen(this.getAttribute('src'))
+      }
+    }
+
+    attributeChangedCallback() {
+      // Checking _socket prevents connection attempts prior to connectedCallback().
+      if (this._socket && this.hasAttribute('src')) {
+        this.wsOpen(this.getAttribute('src'))
+      }
+    }
+
+    disconnectedCallback() {
+      this.wsClose()
+    }
+
+    // Connects to WebSocket and registers event listeners.
+    wsOpen(uri) {
+      const url =
+        ((window.location.protocol === 'https:') ? 'wss://' : 'ws://') +
+        window.location.host + uri
+      if (this._socket && url === this._url) {
+        // Already connected to same URL.
+        return
+      }
+      this.wsClose()
+      this._url = url
+
+      console.info("Connecting to WebSocket", url)
+      const ws = new WebSocket(url)
+      this._socket = ws
+
+      // Register event listeners.
       const self = this
-      self._socket = new WebSocket(self._url)
-      var ws = self._socket
-      ws.addEventListener('open', function (e) {
+      ws.addEventListener('open', function (_e) {
         self.dispatchEvent(new CustomEvent('connected', { detail: true }))
       })
-      ws.addEventListener('close', function (e) {
+      ws.addEventListener('close', function (_e) {
         self.dispatchEvent(new CustomEvent('connected', { detail: false }))
       })
       ws.addEventListener('message', function (e) {
@@ -28,11 +61,20 @@ customElements.define(
       })
     }
 
-    disconnectedCallback() {
-      var ws = this._socket
+    // Closes WebSocket connection.
+    wsClose() {
+      const ws = this._socket
       if (ws) {
         ws.close()
       }
     }
+
+    get src() {
+      return this.getAttribute('src')
+    }
+
+    set src(value) {
+      this.setAttribute('src', value)
+    }
   }
 )