Edit in JSFiddle

Result
HTML
<!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 for JavaScript</title>

<!--CSS-->
<style type="text/css">
#chatPane {
  border: inset 2px; 
  height: 100px; 
  width: 400px; 
  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>-->

<!--Chat code-->
<script type="text/javascript">
//==============================================================================
// VARIABLES
//==============================================================================
var orbiter;
var chatRoom;

//==============================================================================
// 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()) {
    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);
  
  displayChatMessage("Connecting to Union...");

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

//==============================================================================
// ORBITER EVENT LISTENERS
//==============================================================================
// Triggered when the connection is ready
function readyListener (e) {
  displayChatMessage("Connected.");
  displayChatMessage("Joining chat room...");
  
  // Create the chat room on the server
  chatRoom = orbiter.getRoomManager().createRoom("chatRoom");
  chatRoom.addEventListener(net.user1.orbiter.RoomEvent.JOIN, joinRoomListener);
  chatRoom.addEventListener(net.user1.orbiter.RoomEvent.ADD_OCCUPANT, addOccupantListener);
  chatRoom.addEventListener(net.user1.orbiter.RoomEvent.REMOVE_OCCUPANT, removeOccupantListener);  
  
  // Listen for chat messages
  chatRoom.addMessageListener("CHAT_MESSAGE", chatMessageListener);
  
  // Join the chat room
  chatRoom.join();
}

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

//==============================================================================
// CHAT ROOM EVENT LISTENERS
//==============================================================================
// Triggered when the room is joined
function joinRoomListener (e) {
  displayChatMessage("Chat ready!");
  displayChatMessage("Number of people now chatting: " + chatRoom.getNumOccupants());
}

// Triggered when another client joins the chat room
function addOccupantListener (e) {
  if (chatRoom.getSyncState() != net.user1.orbiter.SynchronizationState.SYNCHRONIZING) { 
    displayChatMessage("User" + e.getClientID() + " joined the chat."
                       + " People chatting: " + chatRoom.getNumOccupants());
  }
}
  
// Triggered when another client leaves the chat room
function removeOccupantListener (e) {
  displayChatMessage("User" + e.getClientID() + " left the chat."
                     + " People chatting: " + chatRoom.getNumOccupants());
}
  
//==============================================================================
// 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) {
    chatRoom.sendMessage("CHAT_MESSAGE", "true", null, 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 (fromClient, message) {
  displayChatMessage("User" + fromClient.getClientID() + ": " + 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:340px" onkeydown="if (event.keyCode == 13) sendMessage()"/>
  <input type="submit" value="Send" style="width:60px" onclick="sendMessage()"/>
</div>

</body>
</html>