Adding presence to PubNub Messenger.

index.html

<div data-role="page" id="chatPage" data-theme="c" class="type-interior">

  <div data-role="content">
    <div class="content-primary">
      <div data-role="header" data-position="fixed" data-tap-toggle="false">
        <h1>Pub Messenger</h1>
      </div><!-- /header -->

      <div data-role="content">
        <ul data-role="listview" id="messageList">
          <!-- <li><span class="username">User123:</span>This is my message.</li> -->
        </ul>
      </div>

      <div data-role="footer" data-theme="c">
        <textarea id="messageContent"></textarea>
          <div class="ui-grid-a">
            <div class="ui-block-a"><a href="#" id="sendMessageButton" data-role="button">Send Message</a></div>
            <div class="ui-block-b"><a href="#" id="backButton" data-rel="back" data-role="button">Chat Rooms</a></div>
          </div>
      </div>
    </div>

    <div class="content-secondary">
      <ul data-role="listview" id="userList" data-theme="c">
    
      </ul>
    </div>
  </div><!-- /content -->

</div><!-- /page -->

messenger.js

var users = [],
    userList = $("#userList");

pubnub.subscribe({
  channel: chatChannel,
  message: handleMessage, // Our global handle message function
  presence: function(message, env, channel) { // This gets called on user leave / enter
    if (message.action == "join") {
      users.push(message.uuid);
      userList.append("<li data-username='" + message.uuid + "'>" + message.uuid + "</li>");
    } else if (message.action == "leave") {
      users.splice(users.indexOf(message.uuid), 1);
      userList.find('[data-username="' + message.uuid + '"]').remove();
    }

    userList.listview('refresh');
  }
});

uuid-addition.js

PUBNUB.init({
  publish_key: 'demo',
  subscribe_key: 'demo',
  uuid: username // This is where the entered username goes.
});