ActionCable connect method not working with functions?

Question

Context: I use ActionCable in order to synchronize clients interface depending on events. If a client lost his connection during broadcast on the server-side, the disconnected client won't be able to catch on once reconnected. I am currently trying to solve this problem with an event on the client side asking the server if they are up to date.

Problem: I am using the "connected" method which is supposed to call a function but it does not work, even if the connection is successful with the server.

import { Controller } from "@hotwired/stimulus";
import { createConsumer } from "@rails/actioncable";

export default class extends Controller {
  initialize() {
    this.channel = createConsumer().subscriptions.create({
      channel: "GameChannel", id: this.gameIdValue,
      received: data => this.#handleData(data),
      connected: () => console.log('hello') // No message displayed
    });
  }
}

Versions: ActionCable version: 7.1.3,
Chrome version: 122.0.6261.69 (arm64)

Any clue about this problem?

An exception to the problem is that the following code works fine:

this.channel = createConsumer().subscriptions.create({
  channel: "GameChannel", id: this.gameIdValue,
  received: data => this.#handleData(data),
  connected: console.log('hello') // The message is displayed
});

I tried using this.channel.connect, this.channel.online and also using another function defined in the stimulus context... not working

Answer 1

I found a solution, which is to use the method connected after the creation of the channel.

this.channel.connected = () => { ... };
However, I still don't know why the use of custom functions with the method `connected` doesn't work during the channel creation...