pusher-js 1.12 released

Earlier this month, we pushed out version 1.12 of the Pusher JavaScript library. It contains a couple of new features that are worth highlighting.

A channel.members.me property on presence channels

Pusher has a feature called presence channels that keep track of the identities of the people subscribed. When a new user subscribes, your server can provide Pusher with extra identifying information for this user. With the channel.members.me property, you can now retrieve this information for the local user.

var pusher = new Pusher('app_key');
var channel = pusher.subscribe('presence-channel');
channel.bind('pusher:subscription_succeeded', subSuccess);

function subSuccess(members) {
  members.each(displayMember);
}

function displayMember(member) {
  var currentUser = (member.id === channel.members.me.id);
  // when displaying this member
  // you can indicate 'this is you'
}

For full details check out the channel.members documentation.

Sending additional data with authentication requests

A number of web frameworks provide built-in support for CSRF (Cross Site Request Forgery) detection. When subscribing a user to a presence or private channel, the Pusher JavaScript makes a call to your server to check the user is allowed to join the channel. Up until now, the CSRF detection would have to be disabled for user authentication calls because there was no way of sending a CSRF token with the request. Now, there is. Specify an auth.headers property on the options object when you instantiate Pusher, and include a header with the name and value required by your framework:

var CSRF_TOKEN = 'SOME_FRAMEWORK_TOKEN';

var pusher = new Pusher('app_key', {
  auth: {
    headers: { 'X-CSRF-Token', CSRF_TOKEN }
  }
});
// auth request made upon subscription
var channel = pusher.subscribe('private-channel');
<span style="font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif; font-size: 13px; line-height: 19px;">Easy.</span>

Also available for use is the auth.params property. Properties on this object are passed as query parameters during the auth request. You could use this to supply user information, and even login:

var pusher = new Pusher('app_key', {
  auth: {
    params: {
      username : document.getElementById('username').value,
      password : document.getElementById('password').value
    }
  }
});
// auth request made upon subscription
var channel = pusher.subscribe('presence-channel');

For full details, see the Pusher options parameter docs.

As always, the pusher-js changelog lists all the changes in this release. If you have any feedback at all please leave a comment below or get in touch via any of our other communication channels.

Ready to begin?

Start building your realtime experience today.

From in-app chat to realtime graphs and location tracking, you can rely on Pusher to scale to million of users and trillions of messages