loading...
Cover image for Laravel Echo not listening Event from Pusher

Laravel Echo not listening Event from Pusher

irfanullahshakir profile image Irfan Ullah Shakir Updated on ・1 min read

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

My Vue File

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

Error:

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

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

Discussion

pic
Editor guide
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
Collapse
irfanullahshakir profile image
Collapse
irfanullahshakir profile image
Irfan Ullah Shakir Author

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
irfanullahshakir profile image
Irfan Ullah Shakir Author

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