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

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.

javascript
1var pusher = new Pusher('app_key');
2var channel = pusher.subscribe('presence-channel');
3channel.bind('pusher:subscription_succeeded', subSuccess);
4
5function subSuccess(members) {
6  members.each(displayMember);
7}
8
9function displayMember(member) {
10  var currentUser = (member.id === channel.members.me.id);
11  // when displaying this member
12  // you can indicate 'this is you'
13}
Copy

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:

javascript
1var CSRF_TOKEN = 'SOME_FRAMEWORK_TOKEN';
2
3var pusher = new Pusher('app_key', {
4  auth: {
5    headers: { 'X-CSRF-Token', CSRF_TOKEN }
6  }
7});
8// auth request made upon subscription
9var channel = pusher.subscribe('private-channel');
Copy

markup
1<span style="font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif; font-size: 13px; line-height: 19px;">Easy.</span>
Copy

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:

javascript
1var pusher = new Pusher('app_key', {
2  auth: {
3    params: {
4      username : document.getElementById('username').value,
5      password : document.getElementById('password').value
6    }
7  }
8});
9// auth request made upon subscription
10var channel = pusher.subscribe('presence-channel');
Copy

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.