My previous article showed you how to get a list of all the rooms with the total count of each person in those rooms on the Union server. Today I’ll show you how you can get the total number of people connected on the Union server using JQuery and OrbiterMicro.
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_CLIENTCOUNT_SNAPSHOT message to the server. Once that was done I simply needed to listen for the return message from the server which comes in as CLIENTCOUNT_SNAPSHOT.
Here is the full 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>
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.CLIENTCOUNT_SNAPSHOT, clientCountSnapshotMessageListener, this);
function readyListener(e) {
$('#connectionStatus').css('background-color', '#0f0');
$('#connectionStatus').text('Connected');
$('#btnConnect').hide();
$('#btnDisconnect').show();
msgManager.sendUPC(UPC.GET_CLIENTCOUNT_SNAPSHOT, "");
}
function closeListener(e) {
$('#connectionStatus').css('background-color', '#f00');
$('#connectionStatus').text('Disconnected');
}
function clientCountSnapshotMessageListener (requestID, numClients) {
$('#clientCount').text(numClients + ' people are connected');
}
$('#btnConnect').click(function() {
orbiter.connect("tryunion.com", 80);
//orbiter.connect("localhost", 9100);
});
$('#btnDisconnect').click(function() {
orbiter.disconnect();
});
});
</script>
<style>
#clientCount
{
font-weight: bold;
height: 40px;
padding-bottom: 5px;
}
body
{
background: #000;
color: #fff;
}
</style>
</head>
<body>
<div>
<div id="clientCount"></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: Watching, adding and removing rooms on the Union server with JQuery and OrbiterMicro | Giant Flying Saucer