[web] Add static backend.

2 files changed, 60 insertions, 1 deletions

diff --git a/web/src/js/app.jsx b/web/src/js/app.jsx
index 76720124..ee660fd6 100644
--- a/web/src/js/app.jsx
+++ b/web/src/js/app.jsx
@@ -9,6 +9,7 @@ import rootReducer from './ducks/index'
 import { add as addLog } from './ducks/eventLog'
 import useUrlState from './urlState'
 import WebSocketBackend from './backends/websocket'
+import StaticBackend from './backends/static'
 import { logger } from 'redux-logger'
 
 
@@ -25,7 +26,11 @@ const store = createStore(
 )
 
 useUrlState(store)
-window.backend = new WebSocketBackend(store)
+if (MITMWEB_STATIC) {
+    window.backend = new StaticBackend(store)
+} else {
+    window.backend = new WebSocketBackend(store)
+}
 
 window.addEventListener('error', msg => {
     store.dispatch(addLog(msg))
diff --git a/web/src/js/backends/static.js b/web/src/js/backends/static.js
new file mode 100644
index 00000000..676468ce
--- /dev/null
+++ b/web/src/js/backends/static.js
@@ -0,0 +1,54 @@
+/*
+ * This backend uses the REST API only to host static instances,
+ * without any Websocket connection.
+ */
+import { fetchApi } from "../utils"
+
+const CMD_RESET = 'reset'
+
+export default class StaticBackend {
+   constructor(store) {
+       this.activeFetches = {}
+       this.store = store
+       this.onOpen()
+   }
+
+   onOpen() {
+        this.fetchData("settings")
+        this.fetchData("flows")
+        this.fetchData("events")
+        this.fetchData("options")
+   }
+
+   fetchData(resource) {
+       let queue = []
+       this.activeFetches[resource] = queue
+       fetchApi(`/${resource}`)
+           .then(res => res.json())
+           .then(json => {
+               if (this.activeFetches[resource] === queue)
+                   this.receive(resource, json)
+           })
+   }
+
+   onMessage(msg) {
+       if (msg.cmd === CMD_RESET) {
+           return this.fetchData(msg.resource)
+       }
+       if (msg.resource in this.activeFetches) {
+           this.activeFetches[msg.resource].push(msg)
+       } else {
+           let type = `${msg.resource}_${msg.cmd}`.toUpperCase()
+           this.store.dispatch({ type, ...msg})
+       }
+   }
+
+   receive(resource, data) {
+       let type = `${resource}_RECEIVE`.toUpperCase()
+       this.store.dispatch({ type, cmd: "receive", resource, data })
+       let queue = this.activeFetches[resource]
+       delete this.activeFetches[resource]
+       queue.forEach(msg => this.onMessage(msg))
+   }
+
+}