<!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 Lobby</title>
<!--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 roomlist;
var clientlist;
var currentRoom;
//==============================================================================
// 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);
// Register for Orbiter's connection events
orbiter.addEventListener(net.user1.orbiter.OrbiterEvent.READY, readyListener, this);
orbiter.addEventListener(net.user1.orbiter.OrbiterEvent.CLOSE, closeListener, this);
// The room listbox
roomlist = document.getElementById("roomlist");
roomlist.style.width = "300px";
roomlist.onchange = handleRoomSelect;
// The room-occupants listbox
clientlist = document.getElementById("clientlist");
clientlist.style.width = "300px";
// Connect to Union Server
orbiter.connect("tryunion.com", 80);
}
//==============================================================================
// ORBITER EVENT LISTENERS
//==============================================================================
function readyListener (e) {
// Register to be notified when this client becomes aware of new rooms
orbiter.getRoomManager().addEventListener(net.user1.orbiter.RoomManagerEvent.ROOM_ADDED, roomAddedListener);
orbiter.getRoomManager().addEventListener(net.user1.orbiter.RoomManagerEvent.ROOM_REMOVED, roomRemovedListener);
// Register to be notified when rooms with the qualifier "examples" are added
// to or removed from the server.
orbiter.getRoomManager().watchForRooms("examples");
// Set a global attribute for the current client's on-screen name.
// Pick a random name from a list of test names.
var names = ["Colin", "Derek", "Richard", "Ken", "Toby", "Debbie"]
var randomName = names[Math.floor(Math.random()*names.length)];
orbiter.self().setAttribute("screenName", randomName);
document.getElementById("screenName").innerHTML = "Your random screen name is: " + randomName;
// Create and join an example room
var loungeRoom = orbiter.getRoomManager().createRoom("examples.lounge");
loungeRoom.join();
}
// Triggered when the connection is closed
function closeListener (e) {
roomlist.options.length = 0;
clientlist.options.length = 0;
currentRoom = null;
}
//==============================================================================
// ROOMMANAGER EVENT LISTENERS
//==============================================================================
// Triggered when a room with the qualifier "examples" is added to the server
function roomAddedListener (e) {
addListOption(roomlist, e.getRoomID(), e.getRoomID());
}
// Triggered when a room with the qualifier "examples" removed from the server
function roomRemovedListener (e) {
removeListOption(roomlist, e.getRoomID());
}
//==============================================================================
// ROOM EVENT LISTENERS
//==============================================================================
// Triggered when a client joins the currently selected room
function addOccupantListener (e) {
addClientToOccupantList(e.getClient());
}
// Triggered when a client leaves the currently selected room
function removeOccupantListener (e) {
removeListOption(clientlist, e.getClientID());
}
//==============================================================================
// OCCUPANT-LIST DISPLAY
//==============================================================================
// For clients with a global "screenName" attribute defined, display the
// "screenName" attribute value. For other clients, display a "guest name"
// in the format "User1234".
function addClientToOccupantList (client) {
var screenName = client.getAttribute("screenName");
screenName = screenName || "User" + client.getClientID();
if (client == orbiter.self()) {
screenName += " (You)";
}
addListOption(clientlist, screenName, client.getClientID());
}
//==============================================================================
// LIST MANAGEMENT
//==============================================================================
// Add an item to the specified on-screen listbox
function addListOption (list, name, value) {
var option;
option = document.createElement("option");
option.text = name;
option.value = value;
list.add(option);
}
// Remove an item from the specified on-screen listbox
function removeListOption (list, value) {
for (var i = 0; i < list.length; i++) {
if (list.options[i].value == value) {
list.remove(i);
return;
}
}
}
//==============================================================================
// USER INPUT
//==============================================================================
// Triggered when the user clicks a room in the room list
function handleRoomSelect () {
// Retrieve the Room object reference corresponding to the selected room
var selectedRoomID = roomlist.options[roomlist.selectedIndex].value;
var room = orbiter.getRoomManager().getRoom(selectedRoomID);
// The selected room changed, so clean up after the old selected room, if any
if (currentRoom != null) {
// Stop observing the old selected room
currentRoom.stopObserving();
// Stop receiving events from the old selected room
currentRoom.removeEventListener(net.user1.orbiter.RoomEvent.ADD_OCCUPANT, addOccupantListener);
currentRoom.removeEventListener(net.user1.orbiter.RoomEvent.REMOVE_OCCUPANT, removeOccupantListener);
// Clear the on-screen list
clientlist.options.length = 0;
}
// Remember which room was selected
currentRoom = room;
// Register to be notified when clients join or leave the selected room
room.addEventListener(net.user1.orbiter.RoomEvent.ADD_OCCUPANT, addOccupantListener);
room.addEventListener(net.user1.orbiter.RoomEvent.REMOVE_OCCUPANT, removeOccupantListener);
// Ask Union Server to observe (i.e., "spectate") the selected room
room.observe();
// Populate the on-screen list with the currently known room occupants.
// Applies only when the room is already known, as is the case with
// "examples.lounge", which this application always joins.
var occupants = room.getOccupants();
for (var i = 0; i < occupants.length; i++) {
addClientToOccupantList(occupants[i]);
}
}
</script>
</head>
<body onload="init()">
<!--Contains the rooms-->
<div>
Rooms:<br>
<select id="roomlist" size="10"></select>
</div>
<!--Contains the clients-->
<div>
Room Occupants:<br>
<select id="clientlist" size="10"></select>
</div>
<!--Screen name output-->
<div id="screenName"></div>
</body>
</html>