DEV Community

Cover image for Laravel Echo not listening Event from Pusher
Irfan Ullah Shakir
Irfan Ullah Shakir

Posted on • Updated on

Laravel Echo not listening Event from Pusher

#laravel #vue #help

I have an issue.I am accessing my pusher info from .env file through process.env.VARIABLE_NAME inside bootstrap.js(As defined inside laravel Docs in broadcasting section), but it gives me an error.I am working on laravel Pusher with VueJs.

bootstrap.js



import Echo from 'laravel-echo';

window.Pusher = require('pusher-js');

Vue.prototype.$echo = new Echo({
    broadcaster: 'pusher',
    key: process.env.MIX_PUSHER_APP_KEY,
    cluster: process.env.MIX_PUSHER_APP_CLUSTER,
    forceTLS: true
});
Enter fullscreen mode Exit fullscreen mode

My Vue File



    mounted() {
        Vue.prototype.$echo.private('expense')
        .listen('ExpenseNotification', (e) => {
            console.log('irfan ullah shakir');
        });
    }
Enter fullscreen mode Exit fullscreen mode

Error:



[Vue warn]: Error in mounted hook: "TypeError: Cannot read property 'private' of undefined"
Enter fullscreen mode Exit fullscreen mode

Code works fine to broadcast event to pusher, but have problem in receiving through 'Echo' inside vue mounted hook
Alt Text

Top comments (8)

Collapse
 
thinkverse profile image
Kim Hallberg •

Just gotta ask, Echo is installed right? npm install --save laravel-echo pusher-js? As for the comment below, Presence Channels are private channels

Presence channels build on the security of private channels while exposing the additional feature of awareness of who is subscribed to the channel.

Collapse
 
irfanullahshakir profile image
Irfan Ullah Shakir • • Edited

Ys, Echo is Installed
Package.json: dev-to-uploads.s3.amazonaws.com/i/...

Collapse
 
irfanullahshakir profile image
Irfan Ullah Shakir •

Event receiving in Pusher: dev-to-uploads.s3.amazonaws.com/i/...

Collapse
 
irfanullahshakir profile image
Irfan Ullah Shakir • • Edited

Hy, I found solution.I just paste

import Echo from 'laravel-echo';

window.Pusher = require('pusher-js');

window.Echo = new Echo({
    broadcaster: 'pusher',
    key: process.env.MIX_PUSHER_APP_KEY,
    cluster: process.env.MIX_PUSHER_APP_CLUSTER,
    forceTLS: true
});

inside app.js and it is working fine now.Second, I changed Vue.prototype.$echo to window.Echo inside both app.js and Vue mounted Hook(where I am listening channel).

Collapse
 
maurobaptista profile image
Mauro Baptista •

On the sample in Laravel Doc it assigns the Echo to window.Echo. laravel.com/docs/7.x/broadcasting#...

Have you tried this way?

Collapse
 
irfanullahshakir profile image
Irfan Ullah Shakir • 
Echo.channel('orders')
    .listen('OrderShipped', (e) => {
        console.log(e.order.name);
    });

It gives me an error: "Echo is not defined", I also tried window.Echo

Collapse
 
shadow243 profile image
Muhindo Ngesera Steven(StyNet243) •

replace Echo.channel with window.Echo.channel......

Collapse
 
irfanullahshakir profile image
Irfan Ullah Shakir • • Edited

The link you sent is for Presence Channels I am using private channels
laravel.com/docs/7.x/broadcasting#...

Read next

drfcozapata profile image

How to get ESLint 9.11.1 to run in Vue 3

Francisco Zapata -

drfcozapata profile image

Cómo hacer que ESLint 9.11.1 funcione en Vue 3

Francisco Zapata -

dvalin99 profile image

7 Open Source Projects You Should Know - Vue Edition ✔️ [BONUS]

Domenico Tenace -

fangtanbamrung profile image

🔥How to Render a Beautiful PDF Viewer for Vue.js in Minutes💅

Fang Tanbamrung -