ActionCableVueJWT is an easy-to-use Action Cable integration for VueJS when using JSON Web Tokens.

NOTE: ActionCableVueJWT was forked from ActionCableVue in order to add JWT authentication in the same vein as action-cable-react-jwt. If you do not need JWT authentication, rather use ActionCableVue.

🚀 Installation

npm install actioncable-vue-jwt --save

import Vue from 'vue';
import App from './App.vue';
import ActionCableVueJWT from 'actioncable-vue-jwt';

Vue.use(ActionCableVueJWT, {
	debug: true,
	debugLevel: 'error',
	connectionUrl: 'ws://localhost:5000/api/cable',
	connectImmediately: false,
	jwt: function() { this.$auth.getToken() }
});

new Vue({
	router,
	store,
	render: h => h(App)
}).$mount('#app');

| Parameters | Type | Default | Required | Description | | ------------------ | -------- | ------------ | ------------ | ------------------------------------------------------------------ | | debug | Boolean | false | Optional | Enable logging for debug | | debugLevel | String | error | Optional | Debug level required for logging. Either info, error, or all | | connectionUrl | String | null | Required | ActionCable websocket server url | | connectImmediately | Boolean | true | Optional | Connect on initialization, otherwise first subscription | | jwt | Function | null | Optional | A way to obtain the JWT for the current user |

🌈 Component Level Usage

new Vue({
	data() {
		return {
			message: 'Hello world'
		};
	},
	channels: {
		ChatChannel: {
			connected() {},
			rejected() {},
			received(data) {},
			disconnected() {}
		}
	},
	methods: {
		sendMessage: function() {
			this.$cable.perform({
				channel: 'ChatChannel',
				action: 'send_message',
				data: { content: this.message }
			});
		}
	},
	mounted() {
		this.$cable.subscribe({ channel: 'ChatChannel', room: 'public' });
	}
});

✨ Subscriptions

1. Subscribing to a channel

Requires that you have an object defined in your component's channels object matching the action cable server channel name you passed for the subscription.

new Vue({
	channels: {
		ChatChannel: {
			connected() {
				console.log('I am connected.');
			}
		}
	},
	mounted() {
		this.$cable.subscribe({ channel: 'ChatChannel' });
	}
});

Important

ActionCableVue automatically uses your ActionCable server channel name if you do not pass in a specific channel name to use in your channels. It will also override clashing channel names.

2. Subscribing to the same channel but different rooms

new Vue({
	channels: {
		chat_channel_public: {
			connected() {
				console.log('I am connected to the public chat channel.');
			}
		},
		chat_channel_private: {
			connected() {
				console.log('I am connected to the private chat channel.');
			}
		}
	},
	mounted() {
		this.$cable.subscribe(
			{ channel: 'ChatChannel', room: 'public' },
			'chat_channel_public'
		);
		this.$cable.subscribe(
			{ channel: 'ChatChannel', room: 'private' },
			'chat_channel_private'
		);
	}
});

3. Subscribing to a channel with a dynamic name

new Vue({
	data() {
		return {
			user: {
				id: 7
			}
		};
	},
	computed: {
		channelId() {
			return `${this.user.id}_chat_channel`;
		}
	},
	channels: {
		[this.channelId]: {
			connected() {
				console.log("I am connected to a user's chat channel.");
			}
		}
	},
	mounted() {
		this.$cable.subscribe(
			{ channel: 'ChatChannel', room: this.user.id },
			this.channelId
		);
	}
});

🎃 Unsubscriptions

When your component is destroyed ActionCableVue automatically unsubscribes from any channel that component was subscribed to.

new Vue({
	methods: {
		unsubscribe() {
			this.$cable.unsubscribe('ChatChannel');
		}
	},
	mounted() {
		this.$cable.subscribe({ channel: 'ChatChannel' });
	}
});

♣ Performing an action on your Action Cable server

Requires that you have a method defined in your Rails Action Cable channel whose name matches the action property passed in.

new Vue({
	channels: {
		ChatChannel: {
			connected() {
				console.log('Connected to the chat channel');
			},
			received(data) {
				console.log('Message received');
			}
		}
	},
	methods: {
		sendMessage() {
			this.$cable.perform({
				channel: 'ChatChannel',
				action: 'send_message',
				data: { content: 'Hi' }
			});
		}
	},
	mounted() {
		this.$cable.subscribe({ channel: 'ChatChannel' });
	}
});