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

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

Discussion (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 Author • Edited on

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

Collapse
irfanullahshakir profile image
Irfan Ullah Shakir Author

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

Collapse
irfanullahshakir profile image
Irfan Ullah Shakir Author • Edited on

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 Author
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 Author • Edited on

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