Showing who is online with Pusher presence (in PHP)

We’ve had our presence feature out for a while now. However, our examples have only been in Ruby so far.

To remedy this situation, I have dabbled with PHP again (for the first time in about 4 years), to try and get across how cool this is. Rather than starting completely from scratch, I have helped customise a demo application by Tom Arnfeld, to make it show who is online. The source is currently available here.

Note: The above demo source may be out of date. Please refer to our presence documentation for the most up to date information

Naming your channels

The first thing you need to do when working with presence channels is to prefix them with presence-. This means that mychannel becomes presence-mychannel. This needs to be consistent in your application both at the point where you trigger your events, and where you subscribe to the channel in your JS.

Authentication and identification

Once you have got the name of the channel, your users need to be able to subscribe to it. In your JS you would probably have something like this:

javascript
1var pusher = new Pusher("public_key");
2var PresenceChannel = 
3  pusher.subscribe("presence-test_channel");
Copy

Because you have specified this as a presence channel, the Pusher library will make an AJAX request from the browser to your server to request information about the user who is trying to connect.

Creating your presence endpoint

You therefore need to provide a url that will serve up the correct signature. By default, Pusher sends the request to http://yourserver.com/pusher/auth. However, you can send this anywhere you like, eg:

javascript
1Pusher.channel_auth_endpoint = "/pusher_auth.php";
Copy

Endpoint code sample

The contents of your endpoint would look something like the following:

php
1session_start();
2header("Content-Type: application/json");
3require_once("pusher_info.php");
4
5if(!isset($_SESSION["user_id"]))
6{
7    $_SESSION["user_id"] = time();
8}
9$channel_name = $_POST["channel_name"];
10
11// check user has access to $channel_name
12echo $_pusher--->presence_auth($channel_name, $_POST["socket_id"], $_SESSION["user_id"], array("id" => $_SESSION["user_id"]));
Copy

The parameters that come through to this request are the name of the channel the user is trying to access, and a socket_id that Pusher has generated for them.

In this example we store a timestamp for each user in their session, and use this as a unique identifier that we return in the signature.

In a real example, there would likely be a check to see whether the user was logged in, then their details would be retrieved from a database. You could also check whether they are allowed to access the channel.

For our purposes, it is enough to simply show that they are there. We therefore return some JSON as the response, using this library.

Generating the signature

The signature generator takes the channel name, the socket id, a unique identifier for the user, and some optional user attributes.

These attributes are used in the javascript client to say, for example “max has joined”, but can be arbitrary JSON.

Using presence info in your JS

Once all the endpoint stuff is out of the way, you can start doing some neat stuff in your javascript.

The Pusher library provides you with 3 events for your Presence channel. Below is a very simple example of how these can be used. It’s also worth having a look at our docs on the members parameter which is passed to the pusher:subscriptionsucceeded event handler:

javascript
1var PresenceChannel = socket.subscribe("presence-test_channel");
2PresenceChannel.bind("pusher:subscription_succeeded", function (members) {
3  $("#members").empty();
4  members.each(function(member) {
5    addMember(member);
6  });
7 });
8
9PresenceChannel.bind("pusher:member_added", function(member){
10  addMember(member);
11});
12
13PresenceChannel.bind("pusher:member_removed", function(member){
14  removeMember(member)
15});
16
17function addMember(member){
18  var p = $("<a />", { 
19    text: member.info.id, 
20    id: "member_" + member.id 
21  }); 
22  $("#members").append(p); 
23} 
24
25function removeMember (member) { 
26  $("#member_" + member.id).remove() 
27}
Copy

In a nutshell, when you connect to a presence channel, you get a list of who is connected so far. When someone joins, you get information about who they are, likewise when someone leaves, you are told about it.

In this example, we simply show a list of people connected. Note that I am just using their id in the list, because I didn’t send much data. However you could very easily make this change to link to the users:

javascript
1function addMember(member){
2  var p = $("<a />", { 
3    text: member.info.name, 
4    href: member.info.url, 
5    id: "member_" + member.id 
6  });
7  $("#members").append(p);
8}
Copy

I hope this shows how neat the feature is, and provides a jumping off point for some cool new applications.

P.s. If you haven’t done so already, feel free to create a free Pusher account and let us know what you think!