Edit in JSFiddle

HTML
Result
<!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>Union Chat with Log, For JavaScript (OrbiterMicro)</title>

<!--CSS-->
<style type="text/css">
#chatPane {
  border: inset 2px; 
  height: 100px; 
  width: 600px; 
  overflow: auto; 
  padding: 5px; 
  margin-bottom: 5px
}
  
#logPane {
  border: inset 2px; 
  height: 200px; 
  width: 600px; 
  overflow:auto; 
  padding: 5px; 
  font-family:monospace;
  white-space: nowrap;
}
</style>

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

<!--Chat code-->
<script type="text/javascript">
//==============================================================================
// VARIABLES
//==============================================================================
var orbiter;
var msgManager;
var UPC = net.user1.orbiter.UPC;
var roomID = "chatRoom";

//==============================================================================
// INITIALIZATION
//==============================================================================
function init () {
  // Create the Orbiter instance, used to connect to and communicate with Union
  orbiter = new net.user1.orbiter.Orbiter();

  // Set up the debugging log
  displayLogHistory();
  orbiter.getLog().setLevel(net.user1.logger.Logger.DEBUG);
  orbiter.enableConsole();
  orbiter.getLog().addEventListener(net.user1.logger.LogEvent.UPDATE, logUpdateListener, this);
  
  // If required JavaScript capabilities are missing, abort
  if (!orbiter.getSystem().isJavaScriptCompatible()) {
    displayChatMessage("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);
  
  // Connect to Union
  orbiter.connect("tryunion.com", 80);
  displayChatMessage("Connecting to Union...");
}

//==============================================================================
// ORBITER EVENT LISTENERS
//==============================================================================
// Triggered when the connection is ready
function readyListener (e) {
  // Register for incoming messages from Union
  msgManager = orbiter.getMessageManager();
  msgManager.addMessageListener(UPC.JOINED_ROOM, joinedRoomListener, this);
  msgManager.addMessageListener(UPC.CLIENT_ADDED_TO_ROOM, clientAddedListener, this);
  msgManager.addMessageListener(UPC.CLIENT_REMOVED_FROM_ROOM, clientRemovedListener, this);
  msgManager.addMessageListener("CHAT_MESSAGE", chatMessageListener, this, [roomID]);

  displayChatMessage("Connected.");
  displayChatMessage("Joining chat room...");
  
  // Create the chat room
  msgManager.sendUPC(UPC.CREATE_ROOM, roomID);
  // Join the chat room
  msgManager.sendUPC(UPC.JOIN_ROOM, roomID);
}

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

//==============================================================================
// LOG
//==============================================================================

// Triggered when the log is updated
function logUpdateListener (e) {
  displayLogMessage(e.getTimeStamp() + " " + e.getLevel() + ": " + e.getMessage());
}

// Outputs the current log history
function displayLogHistory (e) {
  var history = orbiter.getLog().getHistory();
  for (var i = 0; i < history.length; i++) {
    displayLogMessage(history[i]);
  }
}

// Displays a single log message
function displayLogMessage (message) {
  // Make the new log message element
  var msg = document.createElement("span");
  msg.appendChild(document.createTextNode(message));
  msg.appendChild(document.createElement("br"));
  
  // Append the new message to the chat
  var logPane = document.getElementById("logPane");
  logPane.appendChild(msg);
  
  // Trim the log to 500 messages
  if (logPane.childNodes.length > 500) {
    logPane.removeChild(logPane.firstChild);
  }
  logPane.scrollTop = logPane.scrollHeight;
}

//==============================================================================
// CHAT ROOM EVENT LISTENER
//==============================================================================
// Triggered when a JOINED_ROOM message is received
function joinedRoomListener () {
  displayChatMessage("Chat ready!");
}

// Triggered when another client joins the chat room
function clientAddedListener (roomID, clientID) {
  displayChatMessage("User" + clientID + " joined the chat.");
}
  
// Triggered when another client leaves the chat room
function clientRemovedListener (roomID, clientID) {
  displayChatMessage("User" + clientID + " left the chat.");
}
  
//==============================================================================
// CHAT SENDING AND RECEIVING
//==============================================================================
// Sends a chat message to everyone in the chat room
function sendMessage () {
  var outgoing = document.getElementById("outgoing");
  if (outgoing.value.length > 0) {
    msgManager.sendUPC(UPC.SEND_MESSAGE_TO_ROOMS, "CHAT_MESSAGE", roomID, "true", "", outgoing.value);
    outgoing.value = "";
    // Focus text field again after submission (required for IE8 only)
    setTimeout(function () {outgoing.focus();}, 10);
  }
}

// Triggered when a chat message is received
function chatMessageListener (fromClientID, message) {
  displayChatMessage("User" + fromClientID + ": " + message);
}

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

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

<body onload="init()">
<!--Contains the incoming chat messages-->
<div id="chatPane"></div>

<!--The outgoing chat form-->
<div>
  <input type="text" id="outgoing" style="width:540px" onkeydown="if (event.keyCode == 13) sendMessage()"/>
  <input type="submit" value="Send" style="width:60px" onclick="sendMessage()"/>
</div>

<br>
<!--Contains the debugging log messages-->
<div id="logPane" ></div>

</body>
</html>