@mr_chick/vue_laravel_echo

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}`);