Pusher Window Refresh Issue - pusher

Question

i am very new to pusher.com:
I am trying to set up a presence-channel Chat.
Here is my code:
var PresenceChannel = pusher.subscribe('presence-test_channel');
PresenceChannel.bind('pusher:subscription_succeeded', function(members){
$("#chatMembers").empty();
members.each(function(member) {
$("#chatMembers").prepend("<li id='"+member.info.employee_id+"'>"+member.info.customer_id+"</li>");
});
});
PresenceChannel.bind('pusher:member_added',function(member){
$("#chatMembers").prepend("<li id='"+member.info.employee_id+"'>"+member.info.customer_id+"</li>");
});
PresenceChannel.bind('pusher:member_removed',function(member){
$("li#"+member.info.employee_id).remove();
});
Its working as expected.
But i have a problem:
When i refresh one of the opened browser windows, the following events get fired:
PresenceChannel.bind('pusher:member_added',function(member){...
And directly after that,
PresenceChannel.bind('pusher:member_removed',function(member){...
get fired.
So, after a refresh of one window, the user get removed from my list, and
1 second later, the user again is added to the list....
1) Reload 1 browser window
2) The other window triggers 'pusher:member_removed': User removed from List
3) The other window triggers 'pusher:member_added': User added to the list agein
What to do ?

Answer 1

The 2nd window receives a pusher:member_removed because the 1st window has unloaded and the user had therefore left the presence channel. When the 2nd window reloads and the user resubscribes to the presence channel the pusher:member_added is triggered.
This is expected behaviour.
However, Pusher do add a delay to these event in order to try and stop events being triggered in this scenario. In your case it would seem that the delay in not long enough to stop that happening. In your situation there is an FAQ which provides some information about what you can do to work around this:
How can I stop users going offline for an instant when they navigate between pages?

Answer 2

It is simply solved.
Try this.
Pusher dashboard -> Webhooks
and add Webhook url & event type to Presense.
$app_secret = 'YOUR PUSHER SECRET KEY';
$app_key = $request->headers->get('X-Pusher-Key');
$webhook_signature = $request->headers->get('X-Pusher-Signature');
$body = file_get_contents('php://input');
$expected_signature = hash_hmac( 'sha256', $body, $app_secret, false );
if($webhook_signature == $expected_signature) {
// decode as associative array
$payload = json_decode( $body, true );
foreach($payload['events'] as &$event) {
// do something with the event
if ($event['name'] == 'member_added') {
// do process user joind & trigger message
$this->setAddMember($event);
} elseif ($event['name'] == 'member_removed') {
// do process user out & trigger message
$this->setRemoveMember($event);
}
}
header("Status: 200 OK");
}
else {
header("Status: 401 Not authenticated");
}
More detailed information see document this.
https://pusher.com/docs/webhooks