Pusher "No callbacks on channel for an event" in laravel and vue

Question

I wanted to try to integrate pusher with my laravel app. After I followed pusher documentation, my test say Pusher : : ["No callbacks on my-channel for my_event"]. The data is there as you can see first line on attached screen shot but the that second line is a culprit reason that data on first line can't render on my blade component. What's lacking on my code below? Anyone please comment your thoughts.

My event file

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

public $message;

public function __construct($message)
{
    $this->message = $message;
}

public function broadcastOn()
{
    return ['my-channel'];
}

public function broadcastAs()
{
    return 'my-event';
}
}

My route file to trigger the event on welcome.blade.php

Route::get('event-test', function () {

$pusher = new Pusher\Pusher(
    env('PUSHER_APP_KEY'),
    env('PUSHER_APP_SECRET'),
    env('PUSHER_APP_ID'),
    array('cluster' => env('PUSHER_APP_CLUSTER'))
);

$pusher->trigger(
    'my-channel',
    'my_event',
    'Welcome'
);

return "Event has been sent";
});

My blade file:

<body>
    <div class="flex-center position-ref full-height">
        <h6>Pusher Test</h6>
        <p>
            Publish an event to channel <code>my-channel</code>
            with event name <code>my-event</code>; it will appear below:
        </p>

        <div id="app" class="mt-4">
            <ul>
                <li v-for="message in messages">
                    @{{ message }}
                </li>
            </ul>
        </div>
    </div>


        <script src="https://js.pusher.com/7.0/pusher.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        // Enable pusher logging - don't include this in production
        Pusher.logToConsole = true;

        var pusher = new Pusher('{{ env('PUSHER_APP_KEY') }}', {
            cluster: 'ap1'
        });

        var channel = pusher.subscribe('my-channel');
        channel.bind('my-event', function(data) {
            app.messages.push(JSON.stringify(data));

            alert(JSON.stringify(data));
        });

        // Vue application
        const app = new Vue({
            el: '#app',
            data: {
                messages: [],
            },
        });
    </script>
</body>

When I trigger event with the url created in route "event-test"

And here's what I get on console:

A.S · Accepted Answer · 2021-09-01 07:57:27Z

2

You are triggering to my_event (with underscore), but your client code is listening to my-event (with hyphen).

Change the event name in your PHP code like bellow and it should work.

$pusher->trigger(
    'my-channel',
    'my-event',
    'Welcome'
);

answered Sep 1, 2021 at 7:57

A.S

2661 silver badge3 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Pusher "No callbacks on channel for an event" in laravel and vue

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related