Using JQuery with the Union Platform and build a chat server and client

Post to Twitter

The recently released Union Platform has been anticipated by many developers including myself. One of the cool new features is the ability to use the Union Server with a pure JavaScript based client using their OrbiterMicro library (you can also use the Union Platform with Flash and other custom tools/languages) With it you can get mobile devices (iPhone, Android, etc.) as well as desktop/laptops talking to the Union Server to create numerous kinds of applications like online multi-player games, chat, and much more. Today I’m going to take the OrbiterMirco tutorial source code an modify it to use JQuery. Full credit goes back to Colin Moock and Derek Clayton for the original rendition of the source code.


Update – May 18, 2011: Code updated to work on more browsers. I’ve tested this with the latest Chrome (Windows and OS X), Firefox 3.5.8 (Windows), Android 2.2 (DroidX), iPad2, as well as the latest Safari on OS X. I have not tested this with Internet Explorer and in fact it’s been confirmed by others that it doesn’t currently work with IE8 (it also won’t work with IE7 or 6). If you figure out the IE issue let me know in the comments below as I don’t have a computer right now running IE8. The version of JQuery I used was 1.6.1.

Update – May 29, 2011: I just tried the demo on Internet Explorer 9 and it worked.

Note: If you don’t want to install the Union Server you can run the client code in this article against the tryunion.com server (port 80) and you can skip down to the Final Step section below.

The first step is to install all the required software to run the Union Server. For me on both OS X and Windows required only that I have the latest Java installed, you can find the details here.

With Java installed I then downloaded the Union Server and extracted the contents. Then I followed the instructions here.

Final step – The last thing needed before we write code is to grab the latest version of OrbiterMicro which you can get here.

I’m now going to take the original tutorial code and changing it to work with JQuery and also adding a few minor things of my own (like a connect and disconnect button, etc.).

After you have read through the tutorial (recommended) you can then take the code I wrote below and test it out. Keep in mind that my code is set to localhost, you can of course test off of the tryunion.com server (port 80).

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
    <title>Union Platform - Chat</title> 	
	<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;
		var roomID = 'AnExampleRoom';
		
		$(function() {
			orbiter = new net.user1.orbiter.Orbiter();
			msgManager = orbiter.getMessageManager();
			UPC = net.user1.orbiter.UPC;
			
			$('#btnConnect').hide();
			$('#btnDisconnect').hide();			
			
			if(!orbiter.getSystem().isJavaScriptCompatible()) {
				displayChatMessage("Your browser is not supported.");
			}
			else {
				$('#btnConnect').show();
			}
			
			$(orbiter).bind(net.user1.orbiter.OrbiterEvent.READY, readyListener);
			$(orbiter).bind(net.user1.orbiter.OrbiterEvent.CLOSE, closeListener);
			
			msgManager.addMessageListener(UPC.JOINED_ROOM, joinedRoomListener, this);
			msgManager.addMessageListener(UPC.CLIENT_ADDED_TO_ROOM, clientAddedListener, this);
			msgManager.addMessageListener(UPC.CLIENT_REMOVED_FROM_ROOM, clientRemovedListener, this);
			msgManager.addMessageListener("CHAT_MESSAGE", chatMessageListener, this, [roomID]);
			 
			function readyListener(e) {
				$('#connectionStatus').css('background-color', '#0f0');
				$('#connectionStatus').text('Connected');
				displayChatMessage("Connected");
				$('#btnConnect').hide();
				$('#btnDisconnect').show();
				
				// Create a chat room
				msgManager.sendUPC(UPC.CREATE_ROOM, roomID);
				// Join the chat room
				msgManager.sendUPC(UPC.JOIN_ROOM, roomID);
			}
			 
			function closeListener(e) {
			  $('#connectionStatus').css('background-color', '#f00');
			  $('#connectionStatus').text('Disconnected');
			}
			
			function joinedRoomListener() {
			  displayChatMessage("Chat ready!");  
			}

			function clientAddedListener(roomID, clientID) {
			  displayChatMessage("User" + clientID + " joined the chat.");
			}
			
			function clientRemovedListener(roomID, clientID) {
			  displayChatMessage("User" + clientID + " left the chat.");
			}
			
			function chatMessageListener(fromClientID, message) {
			  displayChatMessage("User" + fromClientID + ": " + message);
			}
			
			function sendMessage() {
				if ($('#txtOutgoing').val().length > 0) {
					msgManager.sendUPC(UPC.SEND_MESSAGE_TO_ROOMS, "CHAT_MESSAGE", roomID, "true", "", $('#txtOutgoing').val());
					$('#txtOutgoing').val("");
					// Focus text field again after submission (required for IE8 only)
					setTimeout(function () {$('#txtOutgoing').focus();}, 10);
				}
			}

			function displayChatMessage(message) {				
				$('<span></span><br />').text(message).appendTo('#chatPane');
			  
				// Trim the chat
				if ($('#chatPane').find('span').size() > 500) {
					$('#chatPane').children(':first-child').remove();
				}
				$('#chatPane').attr('scrollTop', $('#chatPane').attr('scrollHeight'));
			}		
			
			$('#txtOutgoing').keydown(function(event) {
				if(event.keyCode == 13)
					sendMessage();
			});				
			
			$('#btnSend').click(function() {
				sendMessage();
			});			
			
			$('#btnConnect').click(function() {
			  orbiter.connect("tryunion.com", 80);
			  //orbiter.connect("localhost", 9100);
			});
			
			$('#btnDisconnect').click(function() {
			  orbiter.disconnect();
			});				
		});
	</script>
    <style>
		#chatPane {
		  border: inset 2px;
		  height: 100px;
		  width: 400px;
		  overflow: auto;
		  padding: 5px;
		  margin-bottom: 5px
		}	
    </style> 
    </head> 
 
    <body>
		<div id="chatPane"></div>
		<div>
			<input type="text" id="txtOutgoing" style="width:340px"/>
			<input type="submit" id="btnSend" value="Send" style="width:60px"/>
		</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>
    </body> 
</html>

Results:

You can test the code out here (connecting to tryunion.com):

Good Luck!

Post to Twitter

This entry was posted in HTML5, JavaScript, Mobile, Online Games, Union Framework. Bookmark the permalink.

3 Responses to Using JQuery with the Union Platform and build a chat server and client

  1. Pingback: Creating a real-time games or web apps with HTML5 Canvas, JQuery and the Union Platform | Giant Flying Saucer

  2. Nhs says:

    It’s very useful code
    Thanks

  3. Back in 2002, when I was dabbling seriously in Actionscript, i lapped up everything that Colin Moock had on the web, greedily. He then went on make Unity which I never got the opportunity to use. Glad to know that Unity evolved into Union and here I am, reading his script once again. Nostalgic!

Comments are closed.