How to implement laravel-echo client into Vue project

Hello i am giving you the whole step how to configure VUE with Laravel and Echo functionality

Step1 Install laravel first

composer create-project laravel/laravel your-project-name 5.4.*

STEP 2 Set Variables change Broadcastserviceprovider

we first need to register the App\Providers\BroadcastServiceProvider. Open config/app.php and uncomment the following line in the providers array.

// App\Providers\BroadcastServiceProvider

We need to tell Laravel that we are using the Pusher driver in the .env file:

BROADCAST_DRIVER=pusher

add pusher Class in config/app.php

'Pusher' => Pusher\Pusher::class,

STEP 3 Add A Pusher to your laravel project

composer require pusher/pusher-php-server

STEP 4 Add following to config/broadcasting.php

'options' => [          'cluster' => env('PUSHER_CLUSTER'),          'encrypted' => true,      ],

STEP 5 Set Pusher Variable

PUSHER_APP_ID=xxxxxxPUSHER_APP_KEY=xxxxxxxxxxxxxxxxxxxxPUSHER_APP_SECRET=xxxxxxxxxxxxxxxxxxxxPUSHER_CLUSTER=xx

STEP 6 Install Node

npm install

STEP 7 Installl Pusher js

npm install --save laravel-echo pusher-js 

STEP 8 uncommnet Following

// resources/assets/js/bootstrap.jsimport Echo from "laravel-echo"window.Echo = new Echo({    broadcaster: 'pusher',    key: 'xxxxxxxxxxxxxxxxxxxx',    cluster: 'eu',    encrypted: true});

STEP 9 Before you create Migration

// app/Providers/AppServiceProvider.php// remember to useIlluminate\Support\Facades\Schema;public function boot(){  Schema::defaultStringLength(191);}

To start client listeners i used Vuex. Then, when my application starts I dispatch the action INIT_CHANNEL_LISTENERS to start listeners.

index.js of channels MODULE vuex

import actions from './actions'import Echo from 'laravel-echo'import getters from './getters'import mutations from './mutations'window.io = require('socket.io-client')export default {  state: {    channel_listening: false,    echo: new Echo({      broadcaster: 'socket.io',      // host: 'http://localhost:6001'      host: process.env.CHANNEL_URL    }),    notifiable_public_channels: [      {        channel: 'Notificacio',        event: 'Notificacio'      },      {        channel: 'EstatRepetidor',        event: 'BroadcastEstatRepetidor'      }    ]  },  actions,  getters,  mutations}

actions.js of channels MODULE vuex

import * as actions from '../action-types'import { notifyMe } from '../../helpers'// import { notifyMe } from '../../helpers'export default {  /*  * S'entent com a notifiable un event que té "títol" i "message" (Per introduir-los a la notificació)  * */  /**   * Inicialitza tots els listeners per als canals. Creat de forma que es pugui ampliar.   * En cas de voler afegir més canals "Notifiables" s'ha de afegir un registre al state del index.js d'aquest modul.   * @param context   */  [ actions.INIT_CHANNEL_LISTENERS ] (context) {    console.log('Initializing channel listeners...')    context.commit('SET_CHANNEL_LISTENING', true)    context.getters.notifiable_public_channels.forEach(listener => {      context.dispatch(actions.INIT_PUBLIC_NOTIFIABLE_CHANNEL_LISTENER, listener)    })    // }  },  /**   * Inicialitza un event notificable a través d'un canal.   * Per anar bé hauria de tenir un titol i un missatge.   * @param context   * @param listener   */  [ actions.INIT_PUBLIC_NOTIFIABLE_CHANNEL_LISTENER ] (context, listener) {    context.getters.echo.channel(listener.channel).listen(listener.event, payload => {      notifyMe(payload.message, payload.title)    })  }}

notifyMe function in helpersThat function dispatches notification on the browser

export function notifyMe (message, titol = 'TITLE', icon = icon) {  if (!('Notification' in window)) {    console.error('This browser does not support desktop notification')  } else if (Notification.permission === 'granted') {    let notification = new Notification(titol, {      icon: icon,      body: message,      vibrate: [100, 50, 100],      data: {        dateOfArrival: Date.now(),        primaryKey: 1      }    })  }

Then the backend uses laravel-echo-server like the question. Using redis to queue events and supervisor to start laravel-echo-server at startup of the server.

for the socket io

npm install socket.io --save

If u got invalid fram header set the auth end point in bootstrap.js as follows

window.Echo = new Echo({ authEndpoint : 'http://project/broadcasting/auth', broadcaster: 'pusher', key: '63882dbaf334b78ff949', cluster: 'ap2', encrypted: true});