Merge pull request #41415 from zedtux/features/actioncable/token

Allows passing sub protocols with ActionCable
rails · Jan 18, 2023 · 847cc9f · 847cc9f
2 parents 6d4f9a8 + 6edb465
commit 847cc9f
Show file tree

Hide file tree

Showing 7 changed files with 39 additions and 8 deletions.
diff --git a/actioncable/app/assets/javascripts/action_cable.js b/actioncable/app/assets/javascripts/action_cable.js
diff --git a/actioncable/app/assets/javascripts/actioncable.esm.js b/actioncable/app/assets/javascripts/actioncable.esm.js
@@ -157,11 +157,12 @@ class Connection {
       logger.log(`Attempted to open WebSocket, but existing socket is ${this.getState()}`);
       return false;
     } else {
-      logger.log(`Opening WebSocket, current state is ${this.getState()}, subprotocols: ${protocols}`);
+      const socketProtocols = [ ...protocols, ...this.consumer.subprotocols || [] ];
+      logger.log(`Opening WebSocket, current state is ${this.getState()}, subprotocols: ${socketProtocols}`);
       if (this.webSocket) {
         this.uninstallEventHandlers();
       }
-      this.webSocket = new adapters.WebSocket(this.consumer.url, protocols);
+      this.webSocket = new adapters.WebSocket(this.consumer.url, socketProtocols);
       this.installEventHandlers();
       this.monitor.start();
       return true;
@@ -456,6 +457,7 @@ class Consumer {
     this._url = url;
     this.subscriptions = new Subscriptions(this);
     this.connection = new Connection(this);
+    this.subprotocols = [];
   }
   get url() {
     return createWebSocketURL(this._url);
@@ -476,6 +478,9 @@ class Consumer {
       return this.connection.open();
     }
   }
+  addSubProtocol(subprotocol) {
+    this.subprotocols = [ ...this.subprotocols, subprotocol ];
+  }
 }
 
 function createWebSocketURL(url) {

diff --git a/actioncable/app/assets/javascripts/actioncable.js b/actioncable/app/assets/javascripts/actioncable.js
@@ -151,11 +151,12 @@
         logger.log(`Attempted to open WebSocket, but existing socket is ${this.getState()}`);
         return false;
       } else {
-        logger.log(`Opening WebSocket, current state is ${this.getState()}, subprotocols: ${protocols}`);
+        const socketProtocols = [ ...protocols, ...this.consumer.subprotocols || [] ];
+        logger.log(`Opening WebSocket, current state is ${this.getState()}, subprotocols: ${socketProtocols}`);
         if (this.webSocket) {
           this.uninstallEventHandlers();
         }
-        this.webSocket = new adapters.WebSocket(this.consumer.url, protocols);
+        this.webSocket = new adapters.WebSocket(this.consumer.url, socketProtocols);
         this.installEventHandlers();
         this.monitor.start();
         return true;
@@ -443,6 +444,7 @@
       this._url = url;
       this.subscriptions = new Subscriptions(this);
       this.connection = new Connection(this);
+      this.subprotocols = [];
     }
     get url() {
       return createWebSocketURL(this._url);
@@ -463,6 +465,9 @@
         return this.connection.open();
       }
     }
+    addSubProtocol(subprotocol) {
+      this.subprotocols = [ ...this.subprotocols, subprotocol ];
+    }
   }
   function createWebSocketURL(url) {
     if (typeof url === "function") {

diff --git a/actioncable/app/javascript/action_cable/connection.js b/actioncable/app/javascript/action_cable/connection.js
@@ -33,9 +33,10 @@ class Connection {
       logger.log(`Attempted to open WebSocket, but existing socket is ${this.getState()}`)
       return false
     } else {
-      logger.log(`Opening WebSocket, current state is ${this.getState()}, subprotocols: ${protocols}`)
+      const socketProtocols = [...protocols, ...this.consumer.subprotocols || []]
+      logger.log(`Opening WebSocket, current state is ${this.getState()}, subprotocols: ${socketProtocols}`)
       if (this.webSocket) { this.uninstallEventHandlers() }
-      this.webSocket = new adapters.WebSocket(this.consumer.url, protocols)
+      this.webSocket = new adapters.WebSocket(this.consumer.url, socketProtocols)
       this.installEventHandlers()
       this.monitor.start()
       return true

diff --git a/actioncable/app/javascript/action_cable/consumer.js b/actioncable/app/javascript/action_cable/consumer.js
@@ -32,6 +32,7 @@ export default class Consumer {
     this._url = url
     this.subscriptions = new Subscriptions(this)
     this.connection = new Connection(this)
+    this.subprotocols = []
   }
 
   get url() {
@@ -55,6 +56,10 @@ export default class Consumer {
       return this.connection.open()
     }
   }
+
+  addSubProtocol(subprotocol) {
+    this.subprotocols = [...this.subprotocols, subprotocol]
+  }
 }
 
 export function createWebSocketURL(url) {

diff --git a/actioncable/test/javascript/src/test_helpers/consumer_test_helper.js b/actioncable/test/javascript/src/test_helpers/consumer_test_helper.js
@@ -20,6 +20,8 @@ export default function(name, options, callback) {
     const connection = consumer.connection
     const monitor = connection.monitor
 
+    if ("subprotocols" in options) consumer.addSubProtocol(options.subprotocols)
+
     server.on("connection", function() {
       const clients = server.clients()
       assert.equal(clients.length, 1)

diff --git a/actioncable/test/javascript/src/unit/consumer_test.js b/actioncable/test/javascript/src/unit/consumer_test.js
@@ -16,4 +16,12 @@ module("ActionCable.Consumer", () => {
     client.addEventListener("close", done)
     consumer.disconnect()
   })
+
+  consumerTest("#addSubProtocol", {subprotocols: "some subprotocol"}, ({consumer, server, assert, done}) => {
+    server.on("connection", () => {
+      assert.equal(consumer.subprotocols.length, 1)
+      assert.equal(consumer.subprotocols[0], "some subprotocol")
+      done()
+    })
+  })
 })