Detect Action Cable connection status

Question

I have a Vue app that connects to a Rails back-end and need to find out whether the connection is established or not.

In my app I do:

var app = new Vue({
    name: "Site",
    store,
    router,
    i18n,
    components: {},
    mixins: [],
    data: {
     cable: App.cable
    }
});

However cable.connection.disconnected is always true even when actually connected.

How can I reliably figure out (when needed) what the connection status is?

Answer 1

Got it sorted out. In my components, when I need to find out cable status, I do

this.$root.cable.connection.isOpen()

If false I revert to HTTP.

Hope this helps someone later on.