Edit in JSFiddle

<!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 Share User Data</title>

<!--CSS-->
<style type="text/css">
#outPane {
  border: inset 2px; 
  height: 200px; 
  width: 500px; 
  overflow: auto; 
  padding: 5px; 
  margin-bottom: 5px
}
</style>

<!--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>-->

<!--Application code-->
<script type="text/javascript">
//==============================================================================
// VARIABLES
//==============================================================================
var orbiter;
var appRoom;
var appRoomID = "examples.shareUserDataRoom";
var occupations = ["programmer", "designer", "manager"];
var occupationUpdateIntervalID;

//==============================================================================
// INITIALIZATION
//==============================================================================
function init () {
  // 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);
  
  // If required JavaScript capabilities are missing, abort
  if (!orbiter.getSystem().isJavaScriptCompatible()) {
    displayMessage("Your browser is not supported.");
    return;
  }
  
  // Register for Orbiter's connection events
  orbiter.addEventListener(net.user1.orbiter.OrbiterEvent.READY, readyListener, this);
  orbiter.addEventListener(net.user1.orbiter.OrbiterEvent.CLOSE, closeListener, this);
  
  // Share the current client's ping with other clients
  orbiter.getConnectionMonitor().sharePing(true);
  
  // Start broadcasting random data updates every 5 seconds
  setInterval(updateOccupation, 5000);
  
  displayMessage("Connecting to Union...");

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

//==============================================================================
// BROADCAST DATA UPDATES
//==============================================================================
function updateOccupation () {
  if (orbiter.isReady()) {
    var randomOccupation = occupations[Math.floor(Math.random()*3)];
    // Set an attribute named "occupation" on the current client. By default,
    // attributes are shared automatically with all occpants of a room, so
    // this assignment will trigger an update on all other clients in the room.
    // The third argument specifies that the attribute should be shared with
    // clients that are in (or observing) the application room only. 
    orbiter.self().setAttribute("occupation", randomOccupation, appRoomID);
  }
}


//==============================================================================
// ORBITER EVENT LISTENERS
//==============================================================================
// Triggered when the connection is ready
function readyListener (e) {
  displayMessage("Connected.");
  displayMessage("You are User" + orbiter.self().getClientID());
  displayMessage("Joining room...");
  
  // Create the application room on the server. Configure the room to exist
  // until the next time Union Server shuts down.
  var settings = new net.user1.orbiter.RoomSettings();
  settings.removeOnEmpty = false;
  appRoom = orbiter.getRoomManager().createRoom(appRoomID, settings);
  appRoom.addEventListener(net.user1.orbiter.RoomEvent.JOIN, joinRoomListener);
  appRoom.addEventListener(net.user1.orbiter.RoomEvent.UPDATE_CLIENT_ATTRIBUTE, clientAttributeUpdateListener);
  
  // Join the application room
  appRoom.join();
}

// Triggered when the connection is closed
function closeListener (e) {
  displayMessage("Orbiter connection closed.");
}

//==============================================================================
// ROOM EVENT LISTENERS
//==============================================================================
// Triggered when the room is joined
function joinRoomListener (e) {
  displayMessage("Application room joined.");
  
  // Display the shared user data for every user in the room except 
  // the current client (because by default the current client's ping doesn't 
  // become available until 10 seconds passes after connection ready.)
  var occupants = appRoom.getOccupants();
  if (occupants.length > 1) {
    displayMessage("Listing ping times and occupations for all other clients in the room...");
    for (var i = 0; i < occupants.length; i++) {
      if (!occupants[i].isSelf()) {
        displayMessage("User" + occupants[i].getClientID() + " ping: " + occupants[i].getPing());
        displayMessage("User" + occupants[i].getClientID() + " occupation: " 
                       + occupants[i].getAttribute("occupation", appRoomID));
      }
    }
  }
}

function clientAttributeUpdateListener (e) {
  displayMessage("UPDATE! User" + e.getClient().getClientID() + " changed "
                 + e.getChangedAttr().name + " to: " + e.getChangedAttr().value);
}

//==============================================================================
// UI
//==============================================================================
// Displays a single message on screen
function displayMessage (message) {
  // Make the new message element
  var msg = document.createElement("span");
  msg.appendChild(document.createTextNode(message));
  msg.appendChild(document.createElement("br"));

  // Append the new message to the output pane
  var outPane = document.getElementById("outPane");
  outPane.appendChild(msg);
  
  // Trim the chat to 500 messages
  if (outPane.childNodes.length > 500) {
    outPane.removeChild(outPane.firstChild);
  }
  outPane.scrollTop = outPane.scrollHeight;
}
</script>
</head>

<body onload="init()">
<!--Contains the output pane-->
<div id="outPane"></div>

</body>
</html>