Pusher event is triggered twice

Question

I'm using Pusher (pusher.com) to trigger notification to all logged in clients whenever the admin sends one.

For some reason the event is shooting twice, although I only trigger it once.

Client side subscription code:

var handleToastrListener = function() {

     var pusher = new Pusher("913284db62a0cc237db4");
     var channel = pusher.subscribe('toastr-channel');

           channel.bind('new-toast', function(data) {

            toastr.options = data.options;
            var $toast = toastr[data.scf](data.msg, data.title);

           return true;

           });  
   }

       handleToastrListener();

Server side publish code (PHP using pusher package):

 $pusher = new Pusher(PUSHER_KEY, PUSHER_SECRET, PUSHER_APP_ID);
 $pusher->trigger('toastr-channel', 'new-toast', $input );

The Pusher debug console shows that only one message was received.

The pusher-js Javascript logging, however, shows two messages:

Pusher : Event recd : {"event":"new-toast","data":{"options":{"positionClass":"toast-top-right","onclick":"","showDuration":"1000","hideDuration":"1000","timeOut":"5000","extendedTimeOut":"1000","showEasing":"swing","hideEasing":"linear","showMethod":"fadeIn","hideMethod":"fadeOut"},"title":"Toastr Notifications","msg":"Gnome & Growl type non-blocking notifications","scf":"success"},"channel":"toastr-channel"} app.js:143
Pusher : Event recd : {"event":"new-toast","data":{"options":{"positionClass":"toast-top-right","onclick":"","showDuration":"1000","hideDuration":"1000","timeOut":"5000","extendedTimeOut":"1000","showEasing":"swing","hideEasing":"linear","showMethod":"fadeIn","hideMethod":"fadeOut"},"title":"Toastr Notifications","msg":"Gnome & Growl type non-blocking notifications","scf":"success"},"channel":"toastr-channel"}

looking further I found the subscription occurs twice, although I call it only once:

Pusher : Event sent : {"event":"pusher:subscribe","data":{"channel":"toastr-channel"}} app.js:143
Pusher : Event recd : {"event":"pusher_internal:subscription_succeeded","data":{},"channel":"toastr-channel"} app.js:143
Pusher : No callbacks on toastr-channel for pusher:subscription_succeeded app.js:143
Pusher : State changed : connecting -> connected app.js:143
Pusher : Event sent : {"event":"pusher:subscribe","data":{"channel":"toastr-channel"}} app.js:143
Pusher : Event recd : {"event":"pusher_internal:subscription_succeeded","data":{},"channel":"toastr-channel"} app.js:143
Pusher : No callbacks on toastr-channel for pusher:subscription_succeeded 

Playbill

Answer 1

Two things you should definitely take a look at and update your question appropriately:

1. The Pusher Debug Console - is the event shown twice in there?
2. pusher-js JavaScript logging - is the event being logged as incoming twice?

The other common problem here is that sometimes events may have been bound to twice - hence, two callbacks. However, your code doesn't suggest that this is happening.

Lovejoy

The debug console show only one message, but the logging show two. I've updated my question accordingly – Playbill

Well, that's embarrassing. It turns out I called the handle twice in different places in my code – Playbill

Answer 2

To solve this, you need to unbind the channel before binding.

pusherClient.subscribe(1234);
pusherClient.bind(1234);
pusherClient.bind("incoming-message", (text) => {
  console.log(text);
});

See here for more info.

Tempt