Pusher is not catching the triggered event since there is a change of TLS from September 6, 2018. It not giving a single error on console, when I open the page that contains the client side JavaScript of pusher it shows that channels are connected to the pusher server but when I trigger any of it It doesn't responds neither gives any error. Simply its not calling the bind event callback at all. Here is the minified pusher.js that I included.
<script src="https://js.pusher.com/4.3/pusher.min.js"></script>
And this is the client side JS binded event code.
var notificationsWrapper = $('.dropdown-notifications');
var notificationsToggle = notificationsWrapper.find('a[data-toggle]');
var notificationsCountElem = notificationsToggle.find('i[data-count]');
var notificationsCount = parseInt(notificationsCountElem.data('count'));
var notifications = notificationsWrapper.find('ul.dropdown-menu');
if (notificationsCount <= 0) {
notificationsWrapper.hide();
}
// Enable pusher logging - don't include this in production
Pusher.logToConsole = true;
var pusher = new Pusher('AppKey', {
cluster: 'ap2',
forceTLS: true
});
// Subscribe to the channel we specified in our Laravel Event
var channel = pusher.subscribe('subscribed');
channel.bind('pusher:subscription_succeeded', function(members) {
console.log('subscribed successful') ;
});
channel.bind('pusher:subscription_error', function(status) {
console.log('subscribed error: '+ status) ;
});
channel.bind('theEvent', function(data) {
var existingNotifications = notifications.html();
var avatar = Math.floor(Math.random() * (71 - 20 + 1)) + 20;
var newNotificationHtml = `
<li class="notification active">
<div class="media">
<div class="media-left">
<div class="media-object">
<img src="https://api.adorable.io/avatars/71/`+avatar+`.png" class="img-circle" alt="50x50" style="width: 50px; height: 50px;">
</div>
</div>
<div class="media-body">
<strong class="notification-title">`+data.type+`</strong>
<!--p class="notification-desc">Extra description can go here</p-->
<div class="notification-meta">
<small class="timestamp">`+data.date_time+`</small>
</div>
</div>
</div>
</li>
`;
notifications.html(newNotificationHtml + existingNotifications);
notificationsCount += 1;
notificationsCountElem.attr('data-count', notificationsCount);
notificationsWrapper.find('.notif-count').text(notificationsCount);
notificationsWrapper.show();
$.playSound('/notification/notification.mp3') ;
});
This is where I call the trigger in laravel controller.
$pusher = HomeController::getPusher() ;
$pusher->trigger('subscribed', 'theEvent', $callBack);
These two lines are in a function that is called if a specific route is called and executed before controller respond with view. and the Pusher instance is created with the reference of Home Controller. and these both route function and below the pusher function is in Home Controller.
public function getPusher() {
$options = array(
'cluster' => 'ap2',
'useTLS' => true
);
$pusher = new Pusher(
'AppKey',
'AppSecret',
'AppId',
$options
);
return $pusher ;
}
