Merge pull request #307 from leastbad/websocket_active

ActionCable connectivity events
stimulusreflex · Sep 18, 2020 · 70bde97 · 70bde97
2 parents 35b6274 + e705fc0
commit 70bde97
Showing 1 changed file with 33 additions and 7 deletions.
diff --git a/javascript/stimulus_reflex.js b/javascript/stimulus_reflex.js
@@ -16,24 +16,25 @@ import {
 } from './attributes'
 import { extractReflexName } from './utils'
 
+// A lambda that does nothing. Very zen; we are made of stars
+const NOOP = () => {}
+
 // A reference to the Stimulus application registered with: StimulusReflex.initialize
-//
 let stimulusApplication
 
 // A reference to the ActionCable consumer registered with: StimulusReflex.initialize or getConsumer
-//
 let actionCableConsumer
 
+// Flag which will be false if the server does not accept the channel subscription
+let actionCableSubscriptionActive = false
+
 // A dictionary of promise data
-//
 const promises = {}
 
 // Indicates if we should log calls to stimulate, etc...
-//
 let debugging = false
 
 // Subscribes a StimulusReflex controller to an ActionCable channel.
-//
 // controller - the StimulusReflex controller to subscribe
 //
 const createSubscription = controller => {
@@ -43,6 +44,16 @@ const createSubscription = controller => {
   let totalOperations
   let reflexId
 
+  const emitEvent = (event, detail) => {
+    document.dispatchEvent(
+      new CustomEvent(event, {
+        bubbles: true,
+        cancelable: false,
+        detail
+      })
+    )
+  }
+
   controller.StimulusReflex.subscription =
     actionCableConsumer.subscriptions.findAll(identifier)[0] ||
     actionCableConsumer.subscriptions.create(channel, {
@@ -67,8 +78,20 @@ const createSubscription = controller => {
           promises[reflexId].totalOperations = totalOperations
           promises[reflexId].completedOperations = 0
         }
-
         CableReady.perform(data.operations)
+      },
+      connected: () => {
+        actionCableSubscriptionActive = true
+        emitEvent('stimulus-reflex:connected')
+      },
+      rejected: () => {
+        actionCableSubscriptionActive = false
+        emitEvent('stimulus-reflex:rejected')
+        if (debugging) console.warn('Channel subscription was rejected.')
+      },
+      disconnected: willAttemptReconnect => {
+        actionCableSubscriptionActive = false
+        emitEvent('stimulus-reflex:disconnected', willAttemptReconnect)
       }
     })
 }
@@ -143,6 +166,9 @@ const extendStimulusController = controller => {
       if (!this.isActionCableConnectionOpen())
         throw 'The ActionCable connection is not open! `this.isActionCableConnectionOpen()` must return true before calling `this.stimulate()`'
 
+      if (!actionCableSubscriptionActive)
+        throw 'The ActionCable channel subscription for StimulusReflex was rejected.'
+
       // lifecycle setup
       element.reflexController = this
       element.reflexData = data
@@ -185,7 +211,7 @@ const extendStimulusController = controller => {
 
       promise.reflexId = reflexId
 
-      if (debugging) promise.catch(() => {}) // noop default catch
+      if (debugging) promise.catch(NOOP)
       return promise
     },