Vue3 setup how to define channels?

[Sylor-huang]

Hi, guys

I use vue 3.2.25 and rails 7.0.

I had successed subscribe channel， but it can't console.log when it's connected. I used vue3 setup.

• vue code

// app.vue

<script setup>
import { getCurrentInstance, computed, watch, defineComponent} from "vue";
let { proxy } = getCurrentInstance();
import { useStore } from "vuex";
const store = useStore();

let connection = (token) => {
  return proxy.$cable.connection.connect(
    `${import.meta.env.VITE_APP_BASE_WS_URL}/?token=${token}`
  );
};

 defineComponent({
  channels: {
    NoticesChannel: {
      connected () {
        console.log('connected')
      },
      received (data) {
        console.log("data", data);
      },
      rejected() {
      console.log("rejected");
    },
    received(data) {
      console.log("data", data);
    },
    disconnected() {
      console.log("disconnected");
    },
    }
  }
 })

let notice_channel = (slug) => {
  proxy.$cable.subscribe({
    channel: "NoticesChannel",
    room: `notices:notices_count_${slug}`,
    public_room: "public_notices",
  }
  );
};

watch(
  () => store.state.user.current_user,
  (newVal, oldVal) => {
    if (newVal) {
      connection(store.state.user.token);
      notice_channel(newVal.slug);
    } else {
      proxy.$cable.unsubscribe({
        channel: "NoticesChannel",
      });
    }
  },
  { immediate: true }
);
</script>

• rails log display subscription is success

app/controllers/application_controller.rb:21:in `current_user'
NoticesChannel is streaming from notices:notices_count_sylor2
NoticesChannel is transmitting the subscription confirmation
NoticesChannel is streaming from public_notices

In browser console, I can not get console.log('connected') and also can not console received() log. I think maybe I used setup in vue, so channels can not use defineComponent?

If it is , how to define channels in vue setup? Thanks so much~

[Davidzhu001]

same questions

[Winters0727]

This is not an ideal solution, but I hope this may works.

It looks like actioncable-vue doesn't register channel in composition API, so you have to do it manually.

// app.vue

<script>
import { defineComponent, getCurrentInstance, onMounted } from 'vue';

export default defineComponent({
  setup() {
    const instance = getCurrentInstance();
    const cable = instance.proxy.$cable;

    const myChannelHandlers = {
      connected: () => console.log('channel connected'),
      rejected: () => console.log('channel rejected'),
      received: (data) => console.log('channel received', data),
      disconnected: () => console.log('channel disconnected'),
    };

    const subscribeChannel = (channelName, channelHandlers) => {
      cable.subscribe({ channel: channelName });
      cable._addChannel(channelName, channelHandlers, {
        _uid: instance.uid,
        _value: instance.proxy,
      });
    };

    onMounted(() => subscribeChannel('MyChannel', myChannelHandlers));
  }
})
</script>

[mclintprojects]

@Davidzhu001 @Winters0727 @Sylor-huang This is fixed in v3. Please look at the update README documentation.