@mr_chick/vue_laravel_echo
v1.0.11
Published
A wrapper (and more) for the laravel-echo package
Downloads
17
Maintainers
Readme
Info
This project is based on the official laravel-echo package
I tried to implement as much as I could from the docomentation
This plugin works using socket.io
as broadcaster
TODO:
- Vuex support
- Handle socket connections
- Sugar sintax
Settings laravel echo is not part of this readme.
Install
Install the package
npm i @mr_chick/vue_laravel_echo
with the package installed, you have to import it
import echo from '@mr_chick/vue_laravel_echo'
Attach socket.io
to window
npm install --save socket.io-client
window.io = require('socket.io-client');
Attach the plugin to Vue
Vue.use(echo, {
'broadcaster': {
'name': 'socket.io'
},
'host': window.location.hostname + ':6001',
'auth' :{
'headers': {
'Authorization': 'Bearer ' + process.env.BEARER
}
}
})
The auth member is needed to authenticate private channels.
If you don't have the token in initialize, you can add it sometime after, but before joining the channels
this.$echo.addAuthToken(`token`);
If you use public channels, auth is not needed
Usage
After installation, you will be able to access echo via this.$echo
Joining a private channel
You use the .private(channel)
method to join a private channel
Then, you can chain the listener on the returned instance
this.$echo.private(`user.${process.env.USER_ID_TEST}`).notification((notification) => {
console.log(notification);
});
It will join the private channel user.${process.env.USER_ID_TEST}
and it will listen for notifications sent from that channel
You can also listen to events
, the same as notifications, you chain the listener on the returned instance
this.$echo.private(`user.${process.env.USER_ID_TEST}`).listen('TestEvent', (e) => {
console.log(e);
});
Joining a public channel
You join a public channel using .channel(channel)
or .public(channel)
metod
this.$echo.channel(`user.${process.env.USER_ID_TEST}`).notification((notification) => {
console.log(notification);
});
this.$echo.channel(`user.${process.env.USER_ID_TEST}`).listen('TestEvent', (e) => {
console.log(e);
});
Leaving a channel
You leave a channel using .leave(channel)
method
this.$echo.leave(`user.${process.env.USER_ID_TEST}`);