client, logs-content: Added change subscription setup and hooked it up to the logs-content page.

rpdata/api/Log.js

@@ -1,4 +1,4 @@
-const {query} = require("../client")
+const {query, Subscription} = require("../client")
 
 const {Character} = require("./Character")
 const {Channel} = require("./Channel")
@@ -193,7 +193,6 @@ class LogAPI {
     })
   }
 
-
   /**
    * Call `removeLog(input)` mutation, returns the id
    * 
@@ -211,6 +210,48 @@ class LogAPI {
       return editLog
     })
   }
+
+  /**
+   * Subscribe to the changes.
+   * 
+   * @param {string} logId The long logId, the short one won't do.
+   */
+  subscribeChanges(logId) {
+    return new Subscription(`
+      subscription Changes($keys: [ChangeKeyInput!]!) {
+        changes(keys: $keys) {
+          id
+          model
+          op
+          author
+          listed
+          keys {
+            model
+            id
+          }
+          date
+          objects {
+            type: __typename
+            ...on Log {
+              id
+              title
+              eventName
+              description
+              open
+            }
+            ...on Post {
+              id
+              time
+              kind
+              nick
+              text
+              position
+            }
+          }
+        }
+      }
+    `, {keys: [{model: "Log", id: logId}]})
+  }
 }
 
 module.exports = { Log, logsApi: new LogAPI }

rpdata/client.js

@@ -1,3 +1,4 @@
+const EventEmitter = require("events")
 const fetch = require("isomorphic-fetch")
 const config = require("../config")
 const compressQuery = require("graphql-query-compress")
@@ -30,4 +31,88 @@ function query(query, variables = {}, options = {}) {
   })
 }
 
-module.exports = { query }
+class Subscription extends EventEmitter {
+  constructor(query, variables) {
+    super()
+
+    this.query = query
+    this.variables = Object.assign({}, variables)
+    this.websocket = null
+    this.verboseLogging = false
+  }
+
+  connect() {
+    const baseUrl = (window.location.protocol === 'https:' ? 'wss://' : 'ws://') + window.location.host
+    let id = 1
+
+    this.websocket = new WebSocket(baseUrl + config.graphqlEndpoint, "graphql-ws")
+    
+    this.websocket.onopen = () => {
+      this.websocket.send(JSON.stringify({type: "connection_init", payload: {}}));
+      this.websocket.send(JSON.stringify({id: (id++).toFixed(0), type: "start", payload: {
+        query: this.query,
+        variables: this.variables,
+        extensions: {},
+      }}));
+
+      console.log("WS Open")
+    }
+
+    this.websocket.onmessage = (ev) => {
+      let data = {}
+      try {
+        data = JSON.parse(ev.data)
+      } catch (err) {
+        console.warn("Error", err, ev)
+        return
+      }
+
+      if (this.verboseLogging) {
+        console.log("WS Data:", data)
+      }
+
+      switch (data.type) {
+        case "connection_ack": {
+          this.emit("connect")
+          
+          break;
+        }
+
+        case "connection_error": {
+          console.warn("WS Connection Error", data.payload.message)
+          this.websocket.close()
+
+          this.emit("error", new Error(data.payload.message))
+
+          break;
+        }
+
+        case "data": {
+          if (data.payload.errors != null && data.payload.errors.length > 0) {
+            this.emit("error", data.payload.errors)
+          } else {
+            this.emit("data", data.payload.data)
+          }
+
+          break;
+        }
+      }
+    }
+
+    this.websocket.onerror = (err) => {
+      console.warn("WS Error", err)
+    }
+
+    this.websocket.onclose = () => {
+      this.emit("disconnect")
+    }
+  }
+
+  disconnect() {
+    if (this.websocket != null) {
+      this.websocket.close();
+    }
+  }
+}
+
+module.exports = { query, Subscription }