Laravel Echo not listening to Pusher broadcast

Hello, I'm struggling to get my Laravel Breeze - Inertia - Vue application to listen to an event broadcast. I have reduced it to the most basic application. So far, upon dispatching the event, it is broadcast as witnessed by the Pusher debug console. When I load or refresh the page in my Browser that is listening to the event, I also see some messages (Connection - Subscribed - Disconnection).

Bootstrap.js

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

.env

BROADCAST_DRIVER=pusher

PUSHER_APP_ID=1114993
PUSHER_APP_KEY=bbbbfe86be0d8007c4e6e
PUSHER_APP_SECRET=0acff9318e4ae7581c81
PUSHER_APP_CLUSTER=eu

MIX_PUSHER_APP_KEY="${PUSHER_APP_KEY}"
MIX_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}"

My event NewMessage.php

<?php

namespace App\Events;

use Illuminate\Broadcasting\Channel;
use Illuminate\Broadcasting\InteractsWithSockets;
use Illuminate\Broadcasting\PresenceChannel;
use Illuminate\Broadcasting\PrivateChannel;
use Illuminate\Contracts\Broadcasting\ShouldBroadcast;
use Illuminate\Foundation\Events\Dispatchable;
use Illuminate\Queue\SerializesModels;

class NewMessage implements ShouldBroadcast
{
    use Dispatchable, InteractsWithSockets, SerializesModels;

    public $message;

    /**
     * Create a new event instance.
     *
     * @return void
     */
    public function __construct()
    {
        $this->message = "Just a new message";
    }

    /**
     * Get the channels the event should broadcast on.
     *
     * @return \Illuminate\Broadcasting\Channel|array
     */
    public function broadcastOn()
    {
        return new Channel('message-channel');
    }

    public function broadcastAs()
    {
        return 'new-message';
    }
}

Broadcast.vue

<template>
    <Head title="Broadcast" />

    <div class="max-w-7xl mx-auto pt-6">
        <div>
            This is the message: {{ message }}
        </div>
    </div>
</template>

<script>
import BreezeAuthenticatedLayout from '@/Layouts/Authenticated.vue'
import { Head } from '@inertiajs/inertia-vue3';
import Echo from 'laravel-echo'

export default {
    components: {
        Head,
        Echo,
    },
    layout: BreezeAuthenticatedLayout,
    data() {
        return {
            message: 'empty',
        }
    },

    mounted() {
        window.Echo.channel('message-channel')
            .listen('new-message', (e) => {
                console.log(e)
                this.message = e.message
            })
    }
}
</script>

Pusher debug console

Data (Click row to expand)
API message
Channel: message-channel, Event: new-message
15:11:35
Disconnection
Channels: , Lifetime: 50.289929158s
Socket ID: 134088.9627929
14:58:32
Subscribed
Channel: message-channel
Socket ID: 134150.5604550
14:58:15
Connection
Origin:
Socket ID: 134150.5604550
14:58:15

Any help is greatly appreciated!

Tippin

4 years ago

Best Answer

Level 13

@mazza Two things, first, please do not post real secrets/credentials. Even though it is pusher, probably sandbox, not a good habit to be getting yourself in.

Second, the one thing that stood out to me initially is the event you are listening for may be wrong, as your broadcast class, you define the:

public function broadcastAs()
{
    return 'new-message';
}

The caveat to doing so, is laravel echo would otherwise use DOT notation for an event classes namespace, so by overwriting it by specifying the event name on the backend, you must prefix the event you listen to with a dot .

window.Echo.channel('message-channel')
    .listen('.new-message', (e) => {
        console.log(e)
        this.message = e.message
    })

6 likes

JideonwoFelix

1 year ago

Level 1

@Tippin you saved me this morning, thank you.

Mazza

4 years ago

Level 2

I did look at that DOT before but must have been using it without broadcastAs...

Anyway: just added the DOT now and it works!

Thanks a lot!!! (btw those are not the real keys and secret)

2 likes

Please or to participate in this conversation.