User List (Dojo DGrid)

This example uses Orbiter, JavaScript, HTML, Dojo, and Dijit to create a list of users in an application room. (For a plain HTML user list, see User List.)

The above user list demonstrates how to use the following Orbiter features:

Creating a room
Joining a room
Running a function when a client joins a room
Running a function when a client leaves a room
Updating an on-screen list component with the current occupants of a room
Displaying a client's connect time

The Code

Here is the code for the preceeding example. The example relies on a locally installed copy of the Dojo framework and DGrid, a datagrid component for Dojo.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Orbiter Occupant List with Dojo DGrid</title>

<!-- Load Dojo Styles -->
<link rel="stylesheet" href="dojo/1.7.2/dojo/resources/dojo.css">
<link rel="stylesheet" href="dojo/1.7.2/dgrid/css/dgrid.css">
<link rel="stylesheet" href="dojo/1.7.2/dgrid/css/skins/claro.css">

<!--Load the Orbiter JavaScript library (non-minified version). Use during development.-->
<script type="text/javascript" src="http://unionplatform.com/cdn/Orbiter_latest.js"></script>
<!--Load the Orbiter JavaScript library (minified version). Use for production.-->
<!--<script type="text/javascript" src="http://unionplatform.com/cdn/Orbiter_latest_min.js"></script>-->

<!-- Load Dojo -->
<script src="dojo/1.7.2/dojo/dojo.js"
  data-dojo-config="async: true, debug: true"></script>

<!--Application code-->
<script type="text/javascript">
//==============================================================================
// VARIABLES
//==============================================================================
var orbiter;
var chatRoom;
var occupantStore;
var occupantGrid;
var TIMEZONE_OFFSET = new Date().getTimezoneOffset();

//==============================================================================
// INITIALIZATION
//==============================================================================
// Load Dojo modules
require(["dojo/_base/declare",
         "dojo/store/Memory",
         "dojo/store/Observable",
         "dgrid/OnDemandGrid",
         "dgrid/Keyboard",
         "dgrid/Selection",
         "dojo/domReady!"],
         dojoReady);

// Start the app when Dojo's modules have loaded
function dojoReady (declare, Memory, Observable, OnDemandGrid, Keyboard, Selection) {
  // Create the room-occupant data store
  occupantStore = Observable(new Memory({identifier: "id"}));

  // Create a grid constructor for the desired grid features
  var CustomGrid = declare([ OnDemandGrid, Keyboard, Selection ]);

  // Create a grid in which to display room occupants
  occupantGrid = new CustomGrid({
    columns: {
      name: "Name",
      clientID: "Client ID",
      connectTime: "Connect Time",
    },
    selectionMode: "single",
    cellNavigation: false,
    store: occupantStore
  }, "grid");

  occupantGrid.on("dgrid-select", function (event) {
    console.log("Row selected: ", event.rows[0].data);
  });
  occupantGrid.on("dgrid-deselect", function (event) {
    console.log("Row de-selected: ", event.rows[0].data);
  });
  occupantGrid.on(".dgrid-row:click", function (event) {
    var row = occupantGrid.row(event);
    console.log("Row clicked:", row.data);
  });

  // Create the Orbiter instance, used to connect to and communicate with Union,
  // then enable automatic reconnection (one attempt every 15 seconds)
  orbiter = new net.user1.orbiter.Orbiter();
  orbiter.getConnectionMonitor().setAutoReconnectFrequency(15000);
  orbiter.getLog().setLevel(net.user1.logger.Logger.DEBUG);

  // Register for Orbiter's connection events
  orbiter.addEventListener(net.user1.orbiter.OrbiterEvent.READY, readyListener, this);
  orbiter.addEventListener(net.user1.orbiter.OrbiterEvent.CLOSE, closeListener, this);

  // Connect to Union Server
  orbiter.connect("tryunion.com", 80);
}

//==============================================================================
// ORBITER EVENT LISTENERS
//==============================================================================
function readyListener (e) {
  chatRoom = orbiter.getRoomManager().createRoom("chatRoom");
  chatRoom.addEventListener(net.user1.orbiter.RoomEvent.ADD_OCCUPANT, addOccupantListener);
  chatRoom.addEventListener(net.user1.orbiter.RoomEvent.REMOVE_OCCUPANT, removeOccupantListener);
  chatRoom.join();
}

// Triggered when the connection is closed
function closeListener (e) {
  // Remove all items from the grid
  occupantStore.setData([]);
  occupantGrid.refresh();
}

//==============================================================================
// ROOM EVENT LISTENERS
//==============================================================================
// Triggered when a client joins the room
function addOccupantListener (e) {
  var occupantConnectTime = new Date(e.getClient().getConnectTime());
  var formattedConnectTime = occupantConnectTime.getMonth()+1
                  + "/" + occupantConnectTime.getDate()
                  + "/" + occupantConnectTime.getFullYear().toString().substr(2)
                  + " "
                  + net.user1.utils.NumericFormatter.dateToLocalHrMinSec(occupantConnectTime)
                  + " UTC" + (TIMEZONE_OFFSET >= 0 ? "-" : "+")
                  + Math.abs(TIMEZONE_OFFSET / 60); 

  addItem("User" + e.getClientID(),
          e.getClientID(),
          formattedConnectTime);
}

// Triggered when a client leaves the room
function removeOccupantListener (e) {
  removeItem(e.getClientID());
}

//==============================================================================
// STORE MANAGEMENT
//==============================================================================
function addItem (name, clientID, connectTime) {
  occupantStore.put({ id: clientID, name: name, clientID: clientID, connectTime: connectTime });
}

function removeItem (id) {
  occupantStore.remove(id);
}
</script>
</head>

<body class="claro">
  <!--Contains the grid of room occupants-->
  <div id="grid" style="width: 80%; height: 150px;"></div>
  <div id="count"></div>
</select>

</body>
</html>