feat(js): Dynamic Actioncable WebSocket URL

Allow createWebSocketURL fn to accept a function to generate the websocket URL rather than a string.

2 files changed, 17 insertions, 3 deletions

diff --git a/actioncable/app/javascript/action_cable/index.js b/actioncable/app/javascript/action_cable/index.js
index 659418396f..1fd391a2c9 100644
--- a/actioncable/app/javascript/action_cable/index.js
+++ b/actioncable/app/javascript/action_cable/index.js
@@ -30,14 +30,20 @@ export function getConfig(name) {
 }
 
 export function createWebSocketURL(url) {
-  if (url && !/^wss?:/i.test(url)) {
+  let webSocketURL
+  if (typeof url === 'function') {
+    webSocketURL = url()
+  } else {
+    webSocketURL = url
+  }
+  if (webSocketURL && !/^wss?:/i.test(webSocketURL)) {
     const a = document.createElement("a")
-    a.href = url
+    a.href = webSocketURL
     // Fix populating Location properties in IE. Otherwise, protocol will be blank.
     a.href = a.href
     a.protocol = a.protocol.replace("http", "ws")
     return a.href
   } else {
-    return url
+    return webSocketURL
   }
 }
diff --git a/actioncable/test/javascript/src/unit/action_cable_test.js b/actioncable/test/javascript/src/unit/action_cable_test.js
index 83426fa32e..c9d34abc6d 100644
--- a/actioncable/test/javascript/src/unit/action_cable_test.js
+++ b/actioncable/test/javascript/src/unit/action_cable_test.js
@@ -41,5 +41,13 @@ module("ActionCable", () => {
 
       assert.equal(consumer.url, testURL)
     })
+
+    test("uses function to generate URL", assert => {
+      const generateURL = () => {
+        return testURL
+      }
+      const consumer = ActionCable.createConsumer(generateURL)
+      assert.equal(consumer.url, testURL)
+    })
   })
 })