Friend List and Status Feed

Using Subscription Management and the Presence service, you can create simple friend graphs and a real‑time status feed with PubNub. The friend graph here is a follow/follower model. For multi‑degree graphs or advanced traversal, use a graph database such as Neo4J. These complex cases are less common.

Channel Groups are essential. A Channel Group is a persistent collection of channels you modify dynamically. You subscribe to the group to receive messages from all member channels. Learn more about Channel Groups.

Channel Group multiplexing enables friend lists and status feeds. The diagram and steps follow.

Overview: subscribe for status messages and presence events via Channel Groups

User identification​

Presence uses the User ID set during PubNub client initialization to track each user. See Managing User IDs.

User channels​

Every user will need two channels:

  • A channel the user publishes status messages to.
  • A channel the user subscribes to for online status. This channel is unique per user. For examples, we use user‑[letter], such as user-a or user-b.

Per‑user channels: status publish and present subscribe

Add these channels to Channel Groups to aggregate status messages into a feed and to monitor presence for online status. You can implement either feature independently.

Two Channel Groups per user: friends presence and status feed

Channel Group management

Call the Add/Remove Channel to/from Channel Group APIs from your server (for example, on account registration). Doing this on the client reduces channel security.

// Publish a status message
pubnub.publish(
  {
    channel: "ch-user-a-status",
    message: {
      author: "user-a",
      status: "I am reading about Advanced Channel Groups!",
      timestamp: Date.now() / 1000
    }
  },
  function (status, response) {
    if (status.error) {
      console.log(status);
    }
    else {
show all 19 lines

User channel groups​

Each user will also have two channel groups:

  • A channel group for observing the online status of friends.
  • A channel group to receive status updates in real time.

Again, we'll use the same convention for unique user identifiers:

  • cg-user-a-friends
  • cg-user-a-status-feed

Two Channel Groups

Creating channel groups requires you to add at least one channel to the channel group. The easiest way to do this is add the user's present channel (ch-user-a-present) to each channel group.

Channel Group Management

You should only call the Add/Remove Channel to/from Channel Group APIs from your back-end server when a user registers for an account. Doing so from the client side reduces the security of your channels.

// Add ch-user-a-present to cg-user-a-friends
pubnub.channelGroups.addChannels(
  {
    channels: ["ch-user-a-present"],
    channelGroup: "cg-user-a-friends",
  },
  function(status) {
    if (status.error) {
      console.log("operation failed w/ status: ", status);
    }
    else {
      console.log("Channel added to channel group");
    }
  }
);
show all 31 lines

Friending​

Expanding the friend graph through friending is straightforward: you add channels to channel groups. When User A and User B become friends, you add each user's -present channel to the other's friend group, and add the -status channel to each user's status-feed group. Again, you should only call these APIs from your back-end server when you receive the friendship confirmation from both users.

Users Friends Group

User A and User B become friends:

// ************************************
// * User A and User B become friends
// ************************************

// Add User B to User A's groups: Add ch-user-b-present to cg-user-a-friends
pubnub.channelGroups.addChannels(
  {
    channels: ["ch-user-b-present"],
    channelGroup: "cg-user-a-friends"
  },
  function(status) {
    if (status.error) {
      console.log("operation failed w/ status: ", status);
    }
    else {
show all 67 lines

Subscribe​

To see these working, it comes to how you subscribe. What is a bit different here is that you'll subscribe to one channel group for messages (status-feed) but subscribe to the other channel group's presence event channel group for the online/offline status of friends.

Friends Online/Offline​

User ID / UUID

User ID is also referred to as UUID/uuid in some APIs and server responses but holds the value of the userId parameter you set during initialization.

For presence, we track the subscribers on a channel, and we create a side channel based on the channel name for all the presence events on the main channel. This side channel is the channel name + -pnpres. So for channel ch-user-a-present, the presence side channel is ch-user-a-present-pnpres and that is where PubNub publishes presence events that occur on ch-user-a-present.

The presence events are as follows:

  • join - client subscribed
  • leave - client unsubscribed
  • timeout - client disconnected without unsubscribing (occurs after the timeout period expires)
  • state-change - client changed the contents of the state object

And for each event, we also include the User ID and the channel occupancy (how many subscribers).

To see your friends online/offline status and be updated in real time, you subscribe to the friends channel group, but not directly. You subscribe to the presence event side channel group only, by appending -pnpres to the channel group name.

The reason you do not want to subscribe directly to the channel group is because Channel Groups are Subscribe groups, and therefore you would inadvertently subscribe to all of that users' friends' presence channels. We are only interested in the presence events of this channel group and not the message of those users.

Friends Presence

// Get the List of Friends
pubnub.channelGroups.listChannels(
  {
    channelGroup: "cg-user-a-friends"
  },
  function (status, response) {
  if (status.error) {
    console.log("operation failed w/ error:", status);
    return;
  }

    console.log("FRIENDLIST: ")
    response.channels.forEach( function (channel) {
      console.log(channel);
    });
show all 41 lines

Status feed (messages)​

The status-feed channel group is much more straightforward, you're going to subscribe directly to the channel group and you'll receive status updates in real time via each channel in the channel group.

Status Feed

Since we include the user's present channel (ch-user-a-present) for this user in the channel group, this will also have the net effect of subscribing to that channel. It also means it generates a join event for every channel group that includes this user's present channel. So, if User B is friends with User A, when User A subscribes to this status-feed channel group, it also subscribes to User A's present channel and generates that join event, in addition to all the other presence events.

Friend List Only Implementation

If you're implementing only the friend list and not the status feed, User A will need to subscribe to this ch-user-a-present channel directly since User A isn't subscribing to the status feed group which includes this channel.

pubnub.addListener({
  message: function(message) {
    console.log("STATUS: ", message);
  }
});

// Get Status Feed Messages
pubnub.subscribe({channelGroups: ["cg-user-a-status-feed"]});

Retrieve history​

Retrieving history of status messages can be a bit more work as you have to retrieve messages from each channel in the group individually (each friend) and mash/sort them together client side. You can retrieve message from multiple channels in a single request, but you still have to mash/sort them together when you get those messages.

Complex use cases​

There are other complex use cases of changing status feeds that can make things a bit trickier, one is weighting the status message, so that it's no longer chronological, but rather based on interests, or activity, or other things. Another layer of complexity that you can add is commenting on status items. Again, it requires a bit more logic here, and PubNub has some additional features, like Message Actions, that will provide some assistance.

Summary​

Simple and powerful friend graphs are fairly easy to do with PubNub. It's much easier than trying to develop a full back end to support the presence and status feeds, and on top of that, it's real-time.

Last updated on
On this page