CODEWITHSUNDEEP
javascriptphplaravelpusher
Prince Luo
Prince Luo

Reputation: 101

Pusher : No callbacks on testChannel for App\Events\Event

I built a Laravel broadcasting, planning to implement this as a live-chat App. When checking on the client-side page, the console log shows:

Pusher : Event recd : {"event":"App\\Events\\Event","data":{"message":"Greetings from PrinceLuo!"},"channel":"testChannel"}

Pusher : No callbacks on testChannel for App\Events\Event

It just ignores the callback function which does exists......

By the way, I have not yet install npm so I was using the simple Javascript code suggested by the Pusher dashboard, instead of the Vue code suggested by Laravel.

Both on the console log and the Pusher dashboard I can see the broadcasting message sent by the server.

Here is my client-side code:

<!DOCTYPE html>
<html>
    <!DOCTYPE html>
<head>
  <title>Pusher Test</title>

  <script src="{{ asset('js/pusher.min.js') }}"></script>
  <script>

    // Enable pusher logging - don't include this in production
    Pusher.logToConsole = true;

    var pusher = new Pusher('****************', {
      cluster: 'ap1',
      encrypted: true
    });

    var channel = pusher.subscribe('testChannel');
    channel.bind('App\Events\Event', function(data) {
  console.log(data);
});


  </script>
</head>
<body>
  <h1>Pusher Test</h1>
  <p>
    Try publishing an event to channel <code>testChannel</code>
    with event name <code>Event</code>.
  </p>
</body>
</html>

Just simply hide the pusher key~~

I have googled some similar cases. But no one could give me answer. Anyone has met this case or has any ideas on this case?

UPDATE:

I also post my server-side code here for anyone needed:

<?php

namespace App\Events;

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

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

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

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

And here is my route:

Route::get('test_event',function(){
    event(new Event('Greetings from PrinceLuo!'));
});

Route::get('test_listen',function(){
    return view('listenBroadcast');
});

Upvotes: 0

Views: 3661

Answers (2)

James Ikubi
James Ikubi

Reputation: 2948

This is what I did

channel.bind('pusher:subscription_succeeded', function(members) {
    // alert('successfully subscribed!');
 });

 channel.bind("App\\Events\\NewComment", function(data) {
     console.log(data);
 });

Upvotes: 0

Prince Luo
Prince Luo

Reputation: 101

For those who interesting this case, I post what I have done for solving this question:

Pay attention that the Push Logger shows 【App\Events\Event】 to escape the function of the back slash. So in the JavaScript, we have to change it the same:

channel.bind('App\\Events\\Event', function(data){});

Simple but essential.

Upvotes: 2

Related Questions