@rails/actioncable 7.0.0-alpha1 → 7.0.0-rc3

package/app/assets/javascripts/action_cable.js

@@ -246,6 +246,7 @@
         return this.monitor.recordPing();
 
        case message_types.confirmation:
+        this.subscriptions.confirmSubscription(identifier);
         return this.subscriptions.notify(identifier, "connected");
 
        case message_types.rejection:
@@ -310,9 +311,46 @@
       return this.consumer.subscriptions.remove(this);
     }
   }
+  class SubscriptionGuarantor {
+    constructor(subscriptions) {
+      this.subscriptions = subscriptions;
+      this.pendingSubscriptions = [];
+    }
+    guarantee(subscription) {
+      if (this.pendingSubscriptions.indexOf(subscription) == -1) {
+        logger.log(`SubscriptionGuarantor guaranteeing ${subscription.identifier}`);
+        this.pendingSubscriptions.push(subscription);
+      } else {
+        logger.log(`SubscriptionGuarantor already guaranteeing ${subscription.identifier}`);
+      }
+      this.startGuaranteeing();
+    }
+    forget(subscription) {
+      logger.log(`SubscriptionGuarantor forgetting ${subscription.identifier}`);
+      this.pendingSubscriptions = this.pendingSubscriptions.filter((s => s !== subscription));
+    }
+    startGuaranteeing() {
+      this.stopGuaranteeing();
+      this.retrySubscribing();
+    }
+    stopGuaranteeing() {
+      clearTimeout(this.retryTimeout);
+    }
+    retrySubscribing() {
+      this.retryTimeout = setTimeout((() => {
+        if (this.subscriptions && typeof this.subscriptions.subscribe === "function") {
+          this.pendingSubscriptions.map((subscription => {
+            logger.log(`SubscriptionGuarantor resubscribing ${subscription.identifier}`);
+            this.subscriptions.subscribe(subscription);
+          }));
+        }
+      }), 500);
+    }
+  }
   class Subscriptions {
     constructor(consumer) {
       this.consumer = consumer;
+      this.guarantor = new SubscriptionGuarantor(this);
       this.subscriptions = [];
     }
     create(channelName, mixin) {
@@ -327,7 +365,7 @@
       this.subscriptions.push(subscription);
       this.consumer.ensureActiveConnection();
       this.notify(subscription, "initialized");
-      this.sendCommand(subscription, "subscribe");
+      this.subscribe(subscription);
       return subscription;
     }
     remove(subscription) {
@@ -345,6 +383,7 @@
       }));
     }
     forget(subscription) {
+      this.guarantor.forget(subscription);
       this.subscriptions = this.subscriptions.filter((s => s !== subscription));
       return subscription;
     }
@@ -352,7 +391,7 @@
       return this.subscriptions.filter((s => s.identifier === identifier));
     }
     reload() {
-      return this.subscriptions.map((subscription => this.sendCommand(subscription, "subscribe")));
+      return this.subscriptions.map((subscription => this.subscribe(subscription)));
     }
     notifyAll(callbackName, ...args) {
       return this.subscriptions.map((subscription => this.notify(subscription, callbackName, ...args)));
@@ -366,6 +405,15 @@
       }
       return subscriptions.map((subscription => typeof subscription[callbackName] === "function" ? subscription[callbackName](...args) : undefined));
     }
+    subscribe(subscription) {
+      if (this.sendCommand(subscription, "subscribe")) {
+        this.guarantor.guarantee(subscription);
+      }
+    }
+    confirmSubscription(identifier) {
+      logger.log(`Subscription confirmed ${identifier}`);
+      this.findAll(identifier).map((subscription => this.guarantor.forget(subscription)));
+    }
     sendCommand(subscription, command) {
       const {identifier: identifier} = subscription;
       return this.consumer.send({
@@ -429,6 +477,7 @@
   exports.Consumer = Consumer;
   exports.INTERNAL = INTERNAL;
   exports.Subscription = Subscription;
+  exports.SubscriptionGuarantor = SubscriptionGuarantor;
   exports.Subscriptions = Subscriptions;
   exports.adapters = adapters;
   exports.createConsumer = createConsumer;

package/app/assets/javascripts/actioncable.esm.js

@@ -254,6 +254,7 @@ Connection.prototype.events = {
       return this.monitor.recordPing();
 
      case message_types.confirmation:
+      this.subscriptions.confirmSubscription(identifier);
       return this.subscriptions.notify(identifier, "connected");
 
      case message_types.rejection:
@@ -321,9 +322,47 @@ class Subscription {
   }
 }
 
+class SubscriptionGuarantor {
+  constructor(subscriptions) {
+    this.subscriptions = subscriptions;
+    this.pendingSubscriptions = [];
+  }
+  guarantee(subscription) {
+    if (this.pendingSubscriptions.indexOf(subscription) == -1) {
+      logger.log(`SubscriptionGuarantor guaranteeing ${subscription.identifier}`);
+      this.pendingSubscriptions.push(subscription);
+    } else {
+      logger.log(`SubscriptionGuarantor already guaranteeing ${subscription.identifier}`);
+    }
+    this.startGuaranteeing();
+  }
+  forget(subscription) {
+    logger.log(`SubscriptionGuarantor forgetting ${subscription.identifier}`);
+    this.pendingSubscriptions = this.pendingSubscriptions.filter((s => s !== subscription));
+  }
+  startGuaranteeing() {
+    this.stopGuaranteeing();
+    this.retrySubscribing();
+  }
+  stopGuaranteeing() {
+    clearTimeout(this.retryTimeout);
+  }
+  retrySubscribing() {
+    this.retryTimeout = setTimeout((() => {
+      if (this.subscriptions && typeof this.subscriptions.subscribe === "function") {
+        this.pendingSubscriptions.map((subscription => {
+          logger.log(`SubscriptionGuarantor resubscribing ${subscription.identifier}`);
+          this.subscriptions.subscribe(subscription);
+        }));
+      }
+    }), 500);
+  }
+}
+
 class Subscriptions {
   constructor(consumer) {
     this.consumer = consumer;
+    this.guarantor = new SubscriptionGuarantor(this);
     this.subscriptions = [];
   }
   create(channelName, mixin) {
@@ -338,7 +377,7 @@ class Subscriptions {
     this.subscriptions.push(subscription);
     this.consumer.ensureActiveConnection();
     this.notify(subscription, "initialized");
-    this.sendCommand(subscription, "subscribe");
+    this.subscribe(subscription);
     return subscription;
   }
   remove(subscription) {
@@ -356,6 +395,7 @@ class Subscriptions {
     }));
   }
   forget(subscription) {
+    this.guarantor.forget(subscription);
     this.subscriptions = this.subscriptions.filter((s => s !== subscription));
     return subscription;
   }
@@ -363,7 +403,7 @@ class Subscriptions {
     return this.subscriptions.filter((s => s.identifier === identifier));
   }
   reload() {
-    return this.subscriptions.map((subscription => this.sendCommand(subscription, "subscribe")));
+    return this.subscriptions.map((subscription => this.subscribe(subscription)));
   }
   notifyAll(callbackName, ...args) {
     return this.subscriptions.map((subscription => this.notify(subscription, callbackName, ...args)));
@@ -377,6 +417,15 @@ class Subscriptions {
     }
     return subscriptions.map((subscription => typeof subscription[callbackName] === "function" ? subscription[callbackName](...args) : undefined));
   }
+  subscribe(subscription) {
+    if (this.sendCommand(subscription, "subscribe")) {
+      this.guarantor.guarantee(subscription);
+    }
+  }
+  confirmSubscription(identifier) {
+    logger.log(`Subscription confirmed ${identifier}`);
+    this.findAll(identifier).map((subscription => this.guarantor.forget(subscription)));
+  }
   sendCommand(subscription, command) {
     const {identifier: identifier} = subscription;
     return this.consumer.send({
@@ -439,4 +488,4 @@ function getConfig(name) {
   }
 }
 
-export { Connection, ConnectionMonitor, Consumer, INTERNAL, Subscription, Subscriptions, adapters, createConsumer, createWebSocketURL, getConfig, logger };
+export { Connection, ConnectionMonitor, Consumer, INTERNAL, Subscription, SubscriptionGuarantor, Subscriptions, adapters, createConsumer, createWebSocketURL, getConfig, logger };

package/app/assets/javascripts/actioncable.js

@@ -246,6 +246,7 @@
         return this.monitor.recordPing();
 
        case message_types.confirmation:
+        this.subscriptions.confirmSubscription(identifier);
         return this.subscriptions.notify(identifier, "connected");
 
        case message_types.rejection:
@@ -310,9 +311,46 @@
       return this.consumer.subscriptions.remove(this);
     }
   }
+  class SubscriptionGuarantor {
+    constructor(subscriptions) {
+      this.subscriptions = subscriptions;
+      this.pendingSubscriptions = [];
+    }
+    guarantee(subscription) {
+      if (this.pendingSubscriptions.indexOf(subscription) == -1) {
+        logger.log(`SubscriptionGuarantor guaranteeing ${subscription.identifier}`);
+        this.pendingSubscriptions.push(subscription);
+      } else {
+        logger.log(`SubscriptionGuarantor already guaranteeing ${subscription.identifier}`);
+      }
+      this.startGuaranteeing();
+    }
+    forget(subscription) {
+      logger.log(`SubscriptionGuarantor forgetting ${subscription.identifier}`);
+      this.pendingSubscriptions = this.pendingSubscriptions.filter((s => s !== subscription));
+    }
+    startGuaranteeing() {
+      this.stopGuaranteeing();
+      this.retrySubscribing();
+    }
+    stopGuaranteeing() {
+      clearTimeout(this.retryTimeout);
+    }
+    retrySubscribing() {
+      this.retryTimeout = setTimeout((() => {
+        if (this.subscriptions && typeof this.subscriptions.subscribe === "function") {
+          this.pendingSubscriptions.map((subscription => {
+            logger.log(`SubscriptionGuarantor resubscribing ${subscription.identifier}`);
+            this.subscriptions.subscribe(subscription);
+          }));
+        }
+      }), 500);
+    }
+  }
   class Subscriptions {
     constructor(consumer) {
       this.consumer = consumer;
+      this.guarantor = new SubscriptionGuarantor(this);
       this.subscriptions = [];
     }
     create(channelName, mixin) {
@@ -327,7 +365,7 @@
       this.subscriptions.push(subscription);
       this.consumer.ensureActiveConnection();
       this.notify(subscription, "initialized");
-      this.sendCommand(subscription, "subscribe");
+      this.subscribe(subscription);
       return subscription;
     }
     remove(subscription) {
@@ -345,6 +383,7 @@
       }));
     }
     forget(subscription) {
+      this.guarantor.forget(subscription);
       this.subscriptions = this.subscriptions.filter((s => s !== subscription));
       return subscription;
     }
@@ -352,7 +391,7 @@
       return this.subscriptions.filter((s => s.identifier === identifier));
     }
     reload() {
-      return this.subscriptions.map((subscription => this.sendCommand(subscription, "subscribe")));
+      return this.subscriptions.map((subscription => this.subscribe(subscription)));
     }
     notifyAll(callbackName, ...args) {
       return this.subscriptions.map((subscription => this.notify(subscription, callbackName, ...args)));
@@ -366,6 +405,15 @@
       }
       return subscriptions.map((subscription => typeof subscription[callbackName] === "function" ? subscription[callbackName](...args) : undefined));
     }
+    subscribe(subscription) {
+      if (this.sendCommand(subscription, "subscribe")) {
+        this.guarantor.guarantee(subscription);
+      }
+    }
+    confirmSubscription(identifier) {
+      logger.log(`Subscription confirmed ${identifier}`);
+      this.findAll(identifier).map((subscription => this.guarantor.forget(subscription)));
+    }
     sendCommand(subscription, command) {
       const {identifier: identifier} = subscription;
       return this.consumer.send({
@@ -428,6 +476,7 @@
   exports.Consumer = Consumer;
   exports.INTERNAL = INTERNAL;
   exports.Subscription = Subscription;
+  exports.SubscriptionGuarantor = SubscriptionGuarantor;
   exports.Subscriptions = Subscriptions;
   exports.adapters = adapters;
   exports.createConsumer = createConsumer;

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@rails/actioncable",
-  "version": "7.0.0-alpha1",
+  "version": "7.0.0-rc3",
   "description": "WebSocket framework for Ruby on Rails.",
-  "module": "app/javascript/action_cable/index.js",
-  "main": "app/assets/javascripts/action_cable.js",
+  "module": "app/assets/javascripts/actioncable.esm.js",
+  "main": "app/assets/javascripts/actioncable.js",
   "files": [
     "app/assets/javascripts/*.js",
     "src/*.js"

package/src/connection.js

@@ -132,6 +132,7 @@ Connection.prototype.events = {
       case message_types.ping:
         return this.monitor.recordPing()
       case message_types.confirmation:
+        this.subscriptions.confirmSubscription(identifier)
         return this.subscriptions.notify(identifier, "connected")
       case message_types.rejection:
         return this.subscriptions.reject(identifier)

package/src/index.js

@@ -4,6 +4,7 @@ import Consumer, { createWebSocketURL } from "./consumer"
 import INTERNAL from "./internal"
 import Subscription from "./subscription"
 import Subscriptions from "./subscriptions"
+import SubscriptionGuarantor from "./subscription_guarantor"
 import adapters from "./adapters"
 import logger from "./logger"
 
@@ -14,6 +15,7 @@ export {
   INTERNAL,
   Subscription,
   Subscriptions,
+  SubscriptionGuarantor,
   adapters,
   createWebSocketURL,
   logger,

package/src/subscription_guarantor.js

@@ -0,0 +1,50 @@
+import logger from "./logger"
+
+// Responsible for ensuring channel subscribe command is confirmed, retrying until confirmation is received.
+// Internal class, not intended for direct user manipulation.
+
+class SubscriptionGuarantor {
+  constructor(subscriptions) {
+    this.subscriptions = subscriptions
+    this.pendingSubscriptions = []
+  }
+
+  guarantee(subscription) {
+    if(this.pendingSubscriptions.indexOf(subscription) == -1){ 
+      logger.log(`SubscriptionGuarantor guaranteeing ${subscription.identifier}`)
+      this.pendingSubscriptions.push(subscription) 
+    }
+    else {
+      logger.log(`SubscriptionGuarantor already guaranteeing ${subscription.identifier}`)
+    }
+    this.startGuaranteeing()
+  }
+
+  forget(subscription) {
+    logger.log(`SubscriptionGuarantor forgetting ${subscription.identifier}`)
+    this.pendingSubscriptions = (this.pendingSubscriptions.filter((s) => s !== subscription))
+  }
+
+  startGuaranteeing() {
+    this.stopGuaranteeing()
+    this.retrySubscribing()
+  }
+  
+  stopGuaranteeing() {
+    clearTimeout(this.retryTimeout)
+  }
+
+  retrySubscribing() {
+    this.retryTimeout = setTimeout(() => {
+      if (this.subscriptions && typeof(this.subscriptions.subscribe) === "function") {
+        this.pendingSubscriptions.map((subscription) => {
+          logger.log(`SubscriptionGuarantor resubscribing ${subscription.identifier}`)
+          this.subscriptions.subscribe(subscription)
+        })
+      }
+    }
+    , 500)
+  }
+}
+
+export default SubscriptionGuarantor

package/src/subscriptions.js

@@ -1,4 +1,6 @@
 import Subscription from "./subscription"
+import SubscriptionGuarantor from "./subscription_guarantor"
+import logger from "./logger"
 
 // Collection class for creating (and internally managing) channel subscriptions.
 // The only method intended to be triggered by the user is ActionCable.Subscriptions#create,
@@ -13,6 +15,7 @@ import Subscription from "./subscription"
 export default class Subscriptions {
   constructor(consumer) {
     this.consumer = consumer
+    this.guarantor = new SubscriptionGuarantor(this)
     this.subscriptions = []
   }
 
@@ -29,7 +32,7 @@ export default class Subscriptions {
     this.subscriptions.push(subscription)
     this.consumer.ensureActiveConnection()
     this.notify(subscription, "initialized")
-    this.sendCommand(subscription, "subscribe")
+    this.subscribe(subscription)
     return subscription
   }
 
@@ -50,6 +53,7 @@ export default class Subscriptions {
   }
 
   forget(subscription) {
+    this.guarantor.forget(subscription)
     this.subscriptions = (this.subscriptions.filter((s) => s !== subscription))
     return subscription
   }
@@ -60,7 +64,7 @@ export default class Subscriptions {
 
   reload() {
     return this.subscriptions.map((subscription) =>
-      this.sendCommand(subscription, "subscribe"))
+      this.subscribe(subscription))
   }
 
   notifyAll(callbackName, ...args) {
@@ -80,6 +84,18 @@ export default class Subscriptions {
       (typeof subscription[callbackName] === "function" ? subscription[callbackName](...args) : undefined))
   }
 
+  subscribe(subscription) {
+    if (this.sendCommand(subscription, "subscribe")) {
+      this.guarantor.guarantee(subscription)
+    }
+  }
+
+  confirmSubscription(identifier) {
+    logger.log(`Subscription confirmed ${identifier}`)
+    this.findAll(identifier).map((subscription) =>
+      this.guarantor.forget(subscription))
+  }
+
   sendCommand(subscription, command) {
     const {identifier} = subscription
     return this.consumer.send({command, identifier})

package/CHANGELOG.md

@@ -1,37 +0,0 @@
-## Rails 7.0.0.alpha1 (September 15, 2021) ##
-
-*   Compile ESM package that can be used directly in the browser as actioncable.esm.js.
-
-    *DHH*
-
-*   Move action_cable.js to actioncable.js to match naming convention used for other Rails frameworks, and use JS console to communicate the deprecation.
-
-    *DHH*
-
-*   Stop transpiling the UMD package generated as actioncable.js and drop the IE11 testing that relied on that.
-
-    *DHH*
-
-*   Truncate broadcast logging messages.
-
-    *J Smith*
-
-*   OpenSSL constants are now used for Digest computations.
-
-    *Dirkjan Bussink*
-
-*   The Action Cable client now includes safeguards to prevent a "thundering
-    herd" of client reconnects after server connectivity loss:
-
-    * The client will wait a random amount between 1x and 3x of the stale
-      threshold after the server's last ping before making the first
-      reconnection attempt.
-    * Subsequent reconnection attempts now use exponential backoff instead of
-      logarithmic backoff.  To allow the delay between reconnection attempts to
-      increase slowly at first, the default exponentiation base is < 2.
-    * Random jitter is applied to each delay between reconnection attempts.
-
-    *Jonathan Hefner*
-
-
-Please check [6-1-stable](https://github.com/rails/rails/blob/6-1-stable/actioncable/CHANGELOG.md) for previous changes.