channel.js: debounce subscribes

pkg/arvo/app/landscape/js/channel.js

@@ -15,6 +15,7 @@ class Channel {
   }
 
   init() {
+    this.debounceInterval = 500;
     //  unique identifier: current time and random number
     //
     this.uid =
@@ -58,7 +59,19 @@ class Channel {
 
     this.outstandingJSON = [];
 
-    this.ackTimer = setInterval(this.ack.bind(this), 5000);
+    this.debounceTimer = null;
+  }
+
+  resetDebounceTimer() {
+    console.log('cancelled, debouncing in 500');
+    console.log(this.outstandingJSON);
+    if(this.debounceTimer) {
+      clearTimeout(this.debounceTimer);
+      this.debounceTimer = null;
+    }
+    this.debounceTimer = setTimeout(() => {
+      this.sendJSONToChannel();
+    }, this.debounceInterval)
   }
 
   setOnChannelError(onError = (err) => {}) {
@@ -75,16 +88,15 @@ class Channel {
     });
   }
 
-  ack() {
-    if(this.lastAcknowledgedEventId === this.lastEventId) {
-      return;
-    }
+  clearQueue() { 
+    clearTimeout(this.debounceTimer);
+    this.debounceTimer = null;
     this.sendJSONToChannel();
   }
 
   //  sends a poke to an app on an urbit ship
   //
-  poke(ship, app, mark, json, successFunc, failureFunc, queue = false) {
+  poke(ship, app, mark, json, successFunc, failureFunc) {
     let id = this.nextId();
     this.outstandingPokes.set(
       id,
@@ -103,11 +115,6 @@ class Channel {
       json
     };
 
-    if(queue) {
-      this.outstandingJSON.push(j);
-      return;
-    }
-
     this.sendJSONToChannel(j);
   }
 
@@ -123,7 +130,6 @@ class Channel {
       eventFunc = () => {},
       quitFunc = () => {},
       subAckFunc = () => {},
-      queue = false
   ) {
     let id = this.nextId();
     this.outstandingSubscriptions.set(
@@ -144,13 +150,9 @@ class Channel {
       path
     }
 
-    if(queue) {
-      this.outstandingJSON.push(json);
-      return id;
-    }
-
-    this.sendJSONToChannel(json);
+    this.resetDebounceTimer();
 
+    this.outstandingJSON.push(json);
     return id;
   }
 
@@ -182,6 +184,9 @@ class Channel {
   //  sends a JSON command command to the server.
   //
   sendJSONToChannel(j) {
+    if(!j && this.outstandingJSON.length === 0) {
+      return;
+    }
     let req = new XMLHttpRequest();
     req.open("PUT", this.channelURL());
     req.setRequestHeader("Content-Type", "application/json");
@@ -192,7 +197,6 @@ class Channel {
       }
       let x = JSON.stringify(this.outstandingJSON);
       req.send(x);
-      this.outstandingJSON = [];
     } else {
       //  we add an acknowledgment to clear the server side queue
       //
@@ -209,9 +213,9 @@ class Channel {
       let x = JSON.stringify(payload);
       req.send(x);
 
-      this.outstandingJSON = [];
       this.lastEventId = this.lastAcknowledgedEventId;
     }
+    this.outstandingJSON = [];
 
     this.connectIfDisconnected();
   }
@@ -253,6 +257,13 @@ class Channel {
           funcs["subAck"](obj);
         }
       } else if (obj.response == "diff") {
+        // ensure we ack before channel clogs
+        if((this.lastEventId - this.lastAcknowledgedEventId) > 30) {
+          clearTimeout(this.debounceTimer);
+          this.debounceTimer = null;
+          this.sendJSONToChannel();
+        }
+
         let funcs = subFuncs;
         funcs["event"](obj.json);
       } else if (obj.response == "quit") {

pkg/interface/src/logic/subscription/base.ts

@@ -9,8 +9,8 @@ export default class BaseSubscription<S extends object> {
     this.channel.setOnChannelOpen(this.onChannelOpen.bind(this));
   }
 
-  dequeue() {
-    this.channel.sendJSONToChannel();
+  clearQueue() {
+    this.channel.clearQueue();
   }
 
   delete() {
@@ -42,7 +42,7 @@ export default class BaseSubscription<S extends object> {
     }, Math.pow(2,this.errorCount - 1) * 750);
   }
 
-  subscribe(path: Path, app: string, queue = false) {
+  subscribe(path: Path, app: string) {
     return this.api.subscribe(path, 'PUT', this.api.ship, app,
       this.handleEvent.bind(this),
       (err) => {
@@ -51,7 +51,7 @@ export default class BaseSubscription<S extends object> {
       },
       () => {
         this.subscribe(path, app);
-      }, queue);
+      });
   }
 
   unsubscribe(id: number) {

pkg/interface/src/logic/subscription/global.ts

@@ -44,26 +44,20 @@ export default class GlobalSubscription extends BaseSubscription<StoreState> {
 
   start() {
     this.subscribe('/all', 'metadata-store');
-    this.subscribe('/all', 'invite-store', true);
-    this.subscribe('/all', 'launch', true);
-    this.subscribe('/all', 'weather', true);
-    this.dequeue();
+    this.subscribe('/all', 'invite-store');
+    this.subscribe('/all', 'launch');
+    this.subscribe('/all', 'weather');
+    this.subscribe('/groups', 'group-store');
+    this.clearQueue();
 
 
-    setTimeout(() => {
-      this.subscribe('/groups', 'group-store', true);
-      this.subscribe('/primary', 'contact-view', true);
-      this.subscribe('/all', 's3-store', true);
-      this.subscribe('/keys', 'graph-store', true);
-      this.subscribe('/updates', 'hark-store', true);
-      this.subscribe('/updates', 'hark-graph-hook', true);
-      this.subscribe('/updates', 'hark-group-hook', true);
-      this.subscribe('/updates', 'hark-chat-hook', true);
-      this.dequeue();
-
-    }, 200)
-    
-
+    this.subscribe('/primary', 'contact-view');
+    this.subscribe('/all', 's3-store');
+    this.subscribe('/keys', 'graph-store');
+    this.subscribe('/updates', 'hark-store');
+    this.subscribe('/updates', 'hark-graph-hook');
+    this.subscribe('/updates', 'hark-group-hook');
+    this.subscribe('/updates', 'hark-chat-hook');
   }
 
   restart() {