Why are the connections duplicated?

Rails 6.0.3.2 @rails/actioncable 6.0.3 @types/actioncable 5.2.3 actioncable-vue 2.3.0

---

I have some list. Each item in this list is wrapped in a component. Inside this component I have a subscription to the channel.

const CHANNEL_NAME = 'GoodNameChannel'

export default {
  props: {
    item: {
      type: Object,
      required: true
    }
  },

  channels: {
    [CHANNEL_NAME]: {
      connected() {
        console.info(
          `${CHANNEL_NAME}: connected()`, this.item.id
        )
      },
      received(data) {
        console.info(
          `${CHANNEL_NAME}: received()`, data
        )
      },
      disconnected() {
        console.info(
          `${CHANNEL_NAME}: disconnected()`
        )
      }
    }
  },

  mounted() {
    this.$cable.subscribe({
      channel: CHANNEL_NAME,
      item_id: this.item.id
    })
  }
}

There are two items in the list. So there are two components within which the subscription takes place.

If we look at the server logs, we will see these two subscriptions:

15:43:20 web.1       | GoodNameChannel is transmitting the subscription confirmation
15:43:20 web.1       | GoodNameChannel is streaming from good_name_item:Z2lkOi8vZ28tc2F5LWFjYWRlbXktc3xhdGZvcm0vTWVzc2VuZ2VyOjpSb29tLzQ0
15:43:20 web.1       | GoodNameChannel is transmitting the subscription confirmation
15:43:20 web.1       | GoodNameChannel is streaming from good_name_item:Z2lkOi8vZ28tc2F5LWFjYWRlbXktc3xhdGZvcm0vTWVzc2VuZ2VyOjpSb29tLzQz

But if look at the result of this code:

console.info(
  `${CHANNEL_NAME}: connected()`
)

Then you can see the following:

GoodNameChannel: connected() 123 GoodNameChannel: connected() 124 GoodNameChannel: connected() 123 GoodNameChannel: connected() 124

That is, this code is executed 4 times.

mounted() is executed twice as expected (once for each component)

Why is this happening?

In other places, where there are more than 2 items (components) in the list, I get not duplication, but item * n, where n is more than 2 or even 4.

[afuno]

@mclintprojects I moved the subscription to the channel from each list item component to the root list component. This fixed the problem with “multiplying” subscriptions on the JS side. Thank you.

[mclintprojects]

@afuno Yes, kindly email me.