Calling subscribe and unsubscribe methods multiple times

Describe the bug I have a download button component on a web page. This page will be the most visited page. You can think it’s a product page so I need to use my resources very efficient.

When a user clicks the download button, the server responds with a URL or calls the download service (trigger a background job) and responds with 200. A spinner icon appears on the download button, so the user understands he/she needs to wait.

User can click download button multiple times if he/she wants.

I want to initiate the action cable process on demand so I call the below code on download button click function.

this.$cable.subscribe({ channel: 'DownloadChannel', id: this.recordId });

After download service completes its job, it broadcasts to DownloadChannel with a URL.

On received function, I call the below code and the user starts downloading the file.

this.$cable.unsubscribe('DownloadChannel'); window.location = data.url;

After the second click on the download button, an error appears.

To Reproduce Please see download_button.vue component for testing purpose

Steps to reproduce the behavior:

1. debug: true, debugLevel: ‘all’
2. Click download button Successfully connected to channel 'DownloadChannel'. Unsubscribing from channel 'DownloadChannel'.
3. Click download button again Uncaught TypeError: Cannot read property '_uid' of undefined

Expected behavior User can click download button multiple times if he/she wants. Calling unsubscribe method removes the DownloadChannel from this._channels object. https://github.com/mclintprojects/actioncable-vue/blob/b1d57527c65ff3484a143c3deb70442d27a7d874/src/cable.js#L103 _addChannel invoke only once when the component mounted. https://github.com/mclintprojects/actioncable-vue/blob/b1d57527c65ff3484a143c3deb70442d27a7d874/src/cable.js#L176 If the subscribe method can invoke the _addChannel method then my problem will resolve.

Screenshots After the second click on the download button, an error appears on this line. Uncaught TypeError: Cannot read property '_uid' of undefined https://github.com/mclintprojects/actioncable-vue/blob/b1d57527c65ff3484a143c3deb70442d27a7d874/src/cable.js#L201

Variables on this line after first click

Variables on this line after second click

Websocket network after second click

Plugin version (please complete the following information): "actioncable-vue": "1.3.0",

[mclintprojects]

Hey, @rokumatsumoto! Thanks for getting back to me. I now understand what you want to do.

Your use-case made me realize that I never even added a way to re-subscribe if a user intentionally unsubscribed. It also made me realize that invoking unsubscribe should do only https://github.com/mclintprojects/actioncable-vue/blob/b1d57527c65ff3484a143c3deb70442d27a7d874/src/cable.js#L203 instead of removing the channel (should only happen when the component is destroyed). If I do that, I won’t have to make you pass in a this when subscribing.

I’ll add this fix in an update before the end of day.

[mclintprojects]

@rokumatsumoto I just published a patch (v1.4.2) that adds the log statement when you unsubscribe.

No, you don’t need to. If you unsubscribe from a channel, the resources you’ll still be using are negligible. Think of it as if you have an iron plugged into a socket that’s turned off. You’re not wasting any electricity. Also, it’s probably quicker to get back to using the iron because it’s already plugged into the socket.

If you want to disconnect a client though, it has to be from the server-side. Use the answers from this SO post.