Get a room list from the Union server using JQuery and OrbiterMicro

Post to Twitter

I’ve done a few articles now in regards to the Union Framework. Today I want to show you how to get a complete listing of rooms from the Union server. Using the Flash/Flex Reactor Client this is pretty easy to do, with Orbiter it can be just as easy.


[ad name=”Google Adsense”]

Head over to the Union Framework website and download the server if you want to run this localhost or on your own dedicated or virtual server. Follow the instructions to install the Union server on either Windows, Linux, or OS X. You don’t need to have the Union server installed though if you just want to use the TryUnion.com server which is what I’m using for my demo. You’ll want to grab the latest OrbiterMicro JavaScript library.

I’m also using JQuery as well as the new (in beta) JQuery Templates. Keep in mind that JQuery Templates are still in beta and the code will most likely change and updates might be required at some point.

I used the UPC (Union Procedure Call) specification found here in order to send the GET_ROOMLIST_SNAPSHOT message to the server. Once that is done I simply needed to listen for the return message from the server which comes in as ROOMLIST_SNAPSHOT.

The main points are first setting up a listener for the room list the server will return:

msgManager.addMessageListener(UPC.ROOMLIST_SNAPSHOT, roomListSnapshotMessageListener, this);

Send the UPC.GET_ROOMLIST_SNAPSHOT which requests the server-wide room list from the server:

msgManager.sendUPC(UPC.GET_ROOMLIST_SNAPSHOT, "", "", true);

When the server sends the room list back it is routed to the roomListSnapshotMessageListener function where I can display the contents using JQuery Templates.

The entire code follows:

<!DOCTYPE html>
<html lang="en">
    <head>
    <title>Union Platform - Rooms List</title>
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />
    <script type="text/javascript" src="OrbiterMicro_1.0.0.370_Release_min.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.js"></script>
	<script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>
    <script>
        var orbiter;
        var UPC;
        var msgManager;
 
        $(function() {
            orbiter = new net.user1.orbiter.Orbiter();
            msgManager = orbiter.getMessageManager();
            UPC = net.user1.orbiter.UPC;
 
            $('#btnConnect').hide();
            $('#btnDisconnect').hide();         
 
            if(orbiter.getSystem().isJavaScriptCompatible()) {
                $('#btnConnect').show();
            }
 
            $(orbiter).bind(net.user1.orbiter.OrbiterEvent.READY, readyListener);
            $(orbiter).bind(net.user1.orbiter.OrbiterEvent.CLOSE, closeListener);
 
			msgManager.addMessageListener(UPC.ROOMLIST_SNAPSHOT, roomListSnapshotMessageListener, this);
 
            function readyListener(e) {
                $('#connectionStatus').css('background-color', '#0f0');
                $('#connectionStatus').text('Connected');
                $('#btnConnect').hide();
                $('#btnDisconnect').show();
				
				msgManager.sendUPC(UPC.GET_ROOMLIST_SNAPSHOT, "", "", true);
            }
 
            function closeListener(e) {
              $('#connectionStatus').css('background-color', '#f00');
              $('#connectionStatus').text('Disconnected');
            }

			function roomListSnapshotMessageListener(requestID, requestedRoomIDQualifier, recursive) {
			  var roomlist = Array.prototype.slice.call(arguments).slice(3);
			  var roomIDs = [];
			  var roomsWithThisQualifier;

			  for (var i = 0; i < roomlist.length; i+=2) {
			    roomsWithThisQualifier = roomlist[i+1].split("|");
			    for (var j = 0; j < roomsWithThisQualifier.length; j++) {
			      roomIDs.push(roomlist[i] 
			                   + (roomlist[i] == "" ? "" :".") 
			                   + roomsWithThisQualifier[j]);
			    }
			  }
			  roomIDs.sort();			  
			  $("#templateRoomItem").tmpl(roomIDs).appendTo("#roomList");
			}
 
            $('#btnConnect').click(function() {
              orbiter.connect("tryunion.com", 80);
              //orbiter.connect("localhost", 9100);
            });
 
            $('#btnDisconnect').click(function() {
              orbiter.disconnect();
            });
        });
		
    </script>
	<script id="templateRoomItem" type="text/x-jquery-tmpl">
		<span class="roomItem">${}</span><br />
	</script>

	<style>
		#roomList
		{
			width: 200px;
			height: 300px;
			border: 2px solid #0f0;
			margin-bottom: 10px;
			overflow: auto;
		}
		body
      	{
        	background: #000;
        	color: #fff;
      	}
      	.roomItem
      	{
      		color: #fff;
      		padding: 3px 3px 0px 3px;
      		font-weight: strong;
      	}
	</style>
    </head> 
 
    <body>
        <div>
			<div id="roomList"></div>
		</div>
        <div>
            <span id="connectionStatus" style="background-color: #f00; padding: 3px 3px 3px 3px;">Disconnected</span>
            <input type="button" id="btnConnect" value="Connect" />&nbsp;
            <input type="button" id="btnDisconnect" value="Disconnect" />
        </div>
        <br /><p>iPad users please use two fingers to scroll the room list<p>
    </body>
</html>

Results:

You can try a live demo here.

Tested on: Chrome (Windows), Safari (OS X and iPad)

Post to Twitter

This entry was posted in HTML5, JavaScript, Socket Server, Union Framework. Bookmark the permalink.

One Response to Get a room list from the Union server using JQuery and OrbiterMicro

  1. Pingback: Get the count of people in each room on the Union server using JQuery and OrbiterMicro | Giant Flying Saucer

Comments are closed.