Laravel Echo not triggering Callback

1.8k views Asked by At

I recently set up my Laravel Application and configured Echo to receive Pusher Notifications. Unfortunately, the callback function is not triggered, even though the event is received and the data with it as well. You can find my code below:

web.php

Route::get('/pusher', function() {
    $location = ['lang' => 'langTets', 'lat' => 'latTest'];
    event(new Freight\Events\LocationUpdated($location));
    return "Event has been sent!";
});

bootstrap.js

import Echo from 'laravel-echo'

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

window.Echo = new Echo({
    broadcaster: 'pusher',
    key: 'iscorrect',
    cluster: 'eu',
    encrypted: true
});

window.Echo.channel('location-updates')
    .listen('.LocationUpdated', function(location) {
        console.log("Test");
    });

my app.blade

<!DOCTYPE html>
<html lang="{{ app()->getLocale() }}">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- CSRF Token -->
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>Freight</title>

    <!-- Styles -->
    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
    <!-- JS -->
    <script src="{{ asset('js/app.js') }}"></script>
</head>
<body>
...

This appears in my console, when I open the page:

app.js:32652 Pusher : State changed : initialized -> connecting
app.js:32652 Pusher : Connecting : {"transport":"ws","url":"censoredstuff"}
app.js:32652 Pusher : State changed : connecting -> connected with new socket ID morecensoredstuff
app.js:32652 Pusher : Event sent : {"event":"pusher:subscribe","data":{"channel":"location-updates"}}
app.js:32652 Pusher : Event recd : {"event":"pusher_internal:subscription_succeeded","data":{},"channel":"location-updates"}
app.js:32652 Pusher : No callbacks on location-updates for pusher:subscription_succeeded

Now upon a triggered event, this is what appears in the console:

Pusher : Event recd : {"event":"Freight\\Events\\LocationUpdated","data":{"location":{"lang":"langTets","lat":"latTest"}},"channel":"location-updates"}
app.js:32652 Pusher : No callbacks on location-updates for Freight\Events\LocationUpdated

Do you have any clue, why the console.log is not working correctly? If any more information is necessary, feel free to ask.

1

There are 1 answers

2
Rufrage On

I still did not figure out the source of the problem. However, this solves it perfectly:

  • Implement the Method broadcastAs() in your event like this:

broadcastAs(){ return 'myneweventname'; }

  • change the .js file so that you are listening to the newly created event alias (without the leading period).