Pusher is not catching the triggered event since there is a change of TLS from september 6, 2018 in Laravel

Question

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 ;
}

Answer 1

Do you have the same issue if you just continue using the encrypted:true as I assume you were doing before?

I help maintain this library and will investigate this. In the meantime there have been no changes in our infrastructure relating to TLS yet - this change was just a variable rename. In the meantime you can use an older version of the library to avoid it. I'll get back to you as soon as I can!