My previous article showed you how to get a list of all the rooms on the Union server. Today I’ll show you how you can get a list of all the rooms on the Union server including how many people are in each room using JQuery and OrbiterMicro.
Head over to the Union Framework website and download the server if you want to run this on 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 and GET_ROOM_SNAPSHOT messages to the server. Once that was done I simply needed to listen for the return messages from the server which comes in as ROOMLIST_SNAPSHOT and ROOM_SNAPSHOT.
The code is pretty similar to my previous article so I won’t go into much detail here except to show you the code listing:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Union Platform - Rooms with people count</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;
var roomList = [];
$(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);
msgManager.addMessageListener(UPC.ROOM_SNAPSHOT, roomSnapshotMessageListener, 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) {
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();
for(room in roomIDs)
{
msgManager.sendUPC(UPC.GET_ROOM_SNAPSHOT, "", roomIDs[room], "", "4");
}
}
function roomSnapshotMessageListener(requestID, roomID, occupantCount) {
roomList.push(roomID + "(" + occupantCount + ")");
$('#roomList span, br').remove();
$("#templateRoomItem").tmpl(roomList).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" />
<input type="button" id="btnDisconnect" value="Disconnect" />
</div>
</body>
</html>
Results:
You can try the live demo here.
Pingback: Get the total count of connected users on the Union server with JQuery and OrbiterMicro | Giant Flying Saucer