nfreear/orbiter-micro-chat.html

## orbiter-micro-chat.html
<!doctype html><html lang="en"><meta charset=utf-8 /><title>*OUnion client demo</title>
<!--
 Union Chat for Javascript - improved..
 Copyright N.D.Freear, 28 May 2012
 * Accessibility improvements
 * URL auto-linking
 * Colour
 http://unionplatform.com/samples/orbitermicro/UnionChatPart1/chat.html
-->

<meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=0.8" />
<meta name="robots" content="noindex,nofollow" />


<style>
body {
  margin:2em;
  font:1em sans-serif;
  background:#f8f8f8;
  color:#222;
}
input {
  font-size:1em;
}
#chatPane {
  border: inset 2px;
  height: 150px;
  width: 400px;
  overflow: auto;
  padding: 2px;
  margin-bottom: 5px;
  color:CadetBlue;
}
#chatPane em {
  font-style:normal;
  color:#222
}
#outgoing {
  width:340px;
}
input[type=submit] {
  width:60px;
}
</style>

<!--Load the Orbiter JavaScript library-->
<!--<script src=
"http://unionplatform.com/samples/orbitermicro/UnionChatPart1/OrbiterMicro_1.1.0.514_Release_min.js"></script>-->
<script src="http://cdn.unioncloud.io/Orbiter_2.0.0.667_Beta1.js"></script>-->
<!--<script src="http://cdn.unioncloud.io/OrbiterMicro_2.0.0.667_Beta1_min.js"></script>-->
<!--Load Ender-Jeesh -->
<script src="http://cdn.enderjs.com/jeesh.min.js"></script>

<script>
/* OU Collaborate, based on UnionPlatform.com */
var OUC = OUC || {};

var config = {
  host: "tryunion.com",
  port: 80,
  //roomID: "Nick's demo",
  roomID: "chatRoom",
  inID: "chatPane",
  outID: "outgoing",
  target: "_blank", //(_self|_parent|_top|_blank|NAME)
  targetText: "New window",
  textFilters: 'autoLink'.split(','), //[].
  logLevel: "debug",
  nodeLimit: 500
};
</script>

<!--Chat code-->
<script>
//==============================================================================
// VARIABLES
//==============================================================================
var orbiter;
var msgManager;
var UPC = net.user1.orbiter.UPC;

//==============================================================================
// INITIALIZATION
//==============================================================================
function init () {
  // Create the Orbiter instance, used to connect to and communicate with Union
  orbiter = new net.user1.orbiter.Orbiter();
  orbiter.getLog().setLevel( config.logLevel );
  orbiter.enableConsole();

  // If required JavaScript capabilities are missing, abort
  if (!orbiter.getSystem().isJavaScriptCompatible()) {
    displayChatMessage("Your browser is not supported.");
    return;
  }

  // Register for Orbiter's connection events
  orbiter.addEventListener(net.user1.orbiter.OrbiterEvent.READY, readyListener, this);
  orbiter.addEventListener(net.user1.orbiter.OrbiterEvent.CLOSE, closeListener, this);

  // Connect to Union
  orbiter.connect( config.host, config.port );
  displayChatMessage("Connecting to: "+ config.host +":"+ config.port);
}

//==============================================================================
// ORBITER EVENT LISTENERS
//==============================================================================
// Triggered when the connection is ready
function readyListener (e) {
  // Register for incoming messages from Union
  msgManager = orbiter.getMessageManager();
  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, [ config.roomID ]);

  displayChatMessage("Connected.");
  displayChatMessage("Joining chat room: "+ config.roomID );

  // Create the chat room
  msgManager.sendUPC(UPC.CREATE_ROOM, config.roomID );
  // Join the chat room
  msgManager.sendUPC(UPC.JOIN_ROOM, config.roomID );
}

// Triggered when the connection is closed
function closeListener (e) {
  displayChatMessage("Orbiter connection closed.");
}

//==============================================================================
// CHAT ROOM EVENT LISTENER
//==============================================================================
// Triggered when a JOINED_ROOM message is received
function joinedRoomListener () {
  displayChatMessage("Chat ready!");
}

// Triggered when another client joins the chat room
function clientAddedListener (roomID, clientID) {
  displayChatMessage("User" + clientID + " joined the chat.");
}

// Triggered when another client leaves the chat room
function clientRemovedListener (roomID, clientID) {
  displayChatMessage("User" + clientID + " left the chat.");
}

//==============================================================================
// CHAT SENDING AND RECEIVING
//==============================================================================
// Sends a chat message to everyone in the chat room
function sendMessage () {
  var outgoing = document.getElementById( config.outID );
  if (outgoing.value.length > 0) {
    msgManager.sendUPC(UPC.SEND_MESSAGE_TO_ROOMS, "CHAT_MESSAGE", config.roomID, "true", "", outgoing.value);
    outgoing.value = "";
    // Focus text field again after submission (required for IE8 only)
    setTimeout(function () {outgoing.focus();}, 10);
  }
}

// Triggered when a chat message is received
function chatMessageListener (fromClientID, message) {
  displayChatMessage("User"+ fromClientID +": "+ filterChatMessage( message ));
}

// Displays a single chat message
function displayChatMessage (message) {
  var chatPane = document.getElementById( config.inID );

  $( "#"+ config.inID ).append("<div>"+ message +"</div>");

  // Todo. Trim the chat to 500 messages
  if (chatPane.childNodes.length > config.nodeLimit) {
    chatPane.removeChild(chatPane.firstChild);
  }
  chatPane.scrollTop = chatPane.scrollHeight;
}


//==============================================================================
// Filter messages to auto-link - to be extended!
//==============================================================================
function filterChatMessage (message) {
  var matches = message.match( /(.*)(http(s)?:\/\/([\w.-\/]+))( .*)?/ ),
      newMsg = '';
  if ( matches ) {
    //console.log(matches);

    newMsg = matches[1];
    newMsg += "<a href='"+ matches[2]
      +"' target='"+ config.target
      +"' title='"+ config.targetText +"'>"+ matches[4] +"</a>";
    if (typeof matches[5] !== 'undefined') {
      newMsg += matches[5];
    }
    message = newMsg;
  }
  return "<em>"+ message +"</em>";
}
</script>

<script>
$.domReady( init );
</script>


<p><div id="lbl_in">Incoming messages..</div>
<!--Contains the incoming chat messages-->
<div id="chatPane" aria-labelledby="lbl_in"></div>

<p><label for="outgoing" id="lbl_out">Write a message..</label>
<!--The outgoing chat form-->
<br />
  <input type="text" id="outgoing" onkeydown="if(event.keyCode == 13) sendMessage()"/>
  <input type="submit" value="Send" onclick="sendMessage()"/>
</p>


<pre>

N.D.Freear, 6 April 2012.

Support:  MSIE 8+, Firefox3+, Chrome 1+, Safari 4+, Opera 9.5+, iOS, Android 2.1+.
(HTML5 websocket:  Firefox 9+, Chrome 17+, Safari 5.x+)

* http://www.unionplatform.com/?page_id=1587 (OrbiterMicro.js)
* http://www.unionplatform.com/?page_id=3318 (Orbiter.js)
* http://delicious.com/nfreear/union

* http://websocket.org/echo.html
* http://caniuse.com/#feat=websockets

</html>
	<!doctype html><html lang="en"><meta charset=utf-8 /><title>*OUnion client demo</title>
	<!--
	Union Chat for Javascript - improved..
	Copyright N.D.Freear, 28 May 2012
	* Accessibility improvements
	* URL auto-linking
	* Colour
	http://unionplatform.com/samples/orbitermicro/UnionChatPart1/chat.html
	-->

	<meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=0.8" />
	<meta name="robots" content="noindex,nofollow" />


	<style>
	body {
	margin:2em;
	font:1em sans-serif;
	background:#f8f8f8;
	color:#222;
	}
	input {
	font-size:1em;
	}
	#chatPane {
	border: inset 2px;
	height: 150px;
	width: 400px;
	overflow: auto;
	padding: 2px;
	margin-bottom: 5px;
	color:CadetBlue;
	}
	#chatPane em {
	font-style:normal;
	color:#222
	}
	#outgoing {
	width:340px;
	}
	input[type=submit] {
	width:60px;
	}
	</style>

	<!--Load the Orbiter JavaScript library-->
	<!--<script src=
	"http://unionplatform.com/samples/orbitermicro/UnionChatPart1/OrbiterMicro_1.1.0.514_Release_min.js"></script>-->
	<script src="http://cdn.unioncloud.io/Orbiter_2.0.0.667_Beta1.js"></script>-->
	<!--<script src="http://cdn.unioncloud.io/OrbiterMicro_2.0.0.667_Beta1_min.js"></script>-->
	<!--Load Ender-Jeesh -->
	<script src="http://cdn.enderjs.com/jeesh.min.js"></script>

	<script>
	/* OU Collaborate, based on UnionPlatform.com */
	var OUC = OUC \|\| {};

	var config = {
	host: "tryunion.com",
	port: 80,
	//roomID: "Nick's demo",
	roomID: "chatRoom",
	inID: "chatPane",
	outID: "outgoing",
	target: "_blank", //(_self\|_parent\|_top\|_blank\|NAME)
	targetText: "New window",
	textFilters: 'autoLink'.split(','), //[].
	logLevel: "debug",
	nodeLimit: 500
	};
	</script>

	<!--Chat code-->
	<script>
	//==============================================================================
	// VARIABLES
	//==============================================================================
	var orbiter;
	var msgManager;
	var UPC = net.user1.orbiter.UPC;

	//==============================================================================
	// INITIALIZATION
	//==============================================================================
	function init () {
	// Create the Orbiter instance, used to connect to and communicate with Union
	orbiter = new net.user1.orbiter.Orbiter();
	orbiter.getLog().setLevel( config.logLevel );
	orbiter.enableConsole();

	// If required JavaScript capabilities are missing, abort
	if (!orbiter.getSystem().isJavaScriptCompatible()) {
	displayChatMessage("Your browser is not supported.");
	return;
	}

	// Register for Orbiter's connection events
	orbiter.addEventListener(net.user1.orbiter.OrbiterEvent.READY, readyListener, this);
	orbiter.addEventListener(net.user1.orbiter.OrbiterEvent.CLOSE, closeListener, this);

	// Connect to Union
	orbiter.connect( config.host, config.port );
	displayChatMessage("Connecting to: "+ config.host +":"+ config.port);
	}

	//==============================================================================
	// ORBITER EVENT LISTENERS
	//==============================================================================
	// Triggered when the connection is ready
	function readyListener (e) {
	// Register for incoming messages from Union
	msgManager = orbiter.getMessageManager();
	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, [ config.roomID ]);

	displayChatMessage("Connected.");
	displayChatMessage("Joining chat room: "+ config.roomID );

	// Create the chat room
	msgManager.sendUPC(UPC.CREATE_ROOM, config.roomID );
	// Join the chat room
	msgManager.sendUPC(UPC.JOIN_ROOM, config.roomID );
	}

	// Triggered when the connection is closed
	function closeListener (e) {
	displayChatMessage("Orbiter connection closed.");
	}

	//==============================================================================
	// CHAT ROOM EVENT LISTENER
	//==============================================================================
	// Triggered when a JOINED_ROOM message is received
	function joinedRoomListener () {
	displayChatMessage("Chat ready!");
	}

	// Triggered when another client joins the chat room
	function clientAddedListener (roomID, clientID) {
	displayChatMessage("User" + clientID + " joined the chat.");
	}

	// Triggered when another client leaves the chat room
	function clientRemovedListener (roomID, clientID) {
	displayChatMessage("User" + clientID + " left the chat.");
	}

	//==============================================================================
	// CHAT SENDING AND RECEIVING
	//==============================================================================
	// Sends a chat message to everyone in the chat room
	function sendMessage () {
	var outgoing = document.getElementById( config.outID );
	if (outgoing.value.length > 0) {
	msgManager.sendUPC(UPC.SEND_MESSAGE_TO_ROOMS, "CHAT_MESSAGE", config.roomID, "true", "", outgoing.value);
	outgoing.value = "";
	// Focus text field again after submission (required for IE8 only)
	setTimeout(function () {outgoing.focus();}, 10);
	}
	}

	// Triggered when a chat message is received
	function chatMessageListener (fromClientID, message) {
	displayChatMessage("User"+ fromClientID +": "+ filterChatMessage( message ));
	}

	// Displays a single chat message
	function displayChatMessage (message) {
	var chatPane = document.getElementById( config.inID );

	$( "#"+ config.inID ).append("<div>"+ message +"</div>");

	// Todo. Trim the chat to 500 messages
	if (chatPane.childNodes.length > config.nodeLimit) {
	chatPane.removeChild(chatPane.firstChild);
	}
	chatPane.scrollTop = chatPane.scrollHeight;
	}


	//==============================================================================
	// Filter messages to auto-link - to be extended!
	//==============================================================================
	function filterChatMessage (message) {
	var matches = message.match( /(.)(http(s)?:\/\/([\w.-\/]+))( .)?/ ),
	newMsg = '';
	if ( matches ) {
	//console.log(matches);

	newMsg = matches[1];
	newMsg += "<a href='"+ matches[2]
	+"' target='"+ config.target
	+"' title='"+ config.targetText +"'>"+ matches[4] +"</a>";
	if (typeof matches[5] !== 'undefined') {
	newMsg += matches[5];
	}
	message = newMsg;
	}
	return "<em>"+ message +"</em>";
	}
	</script>

	<script>
	$.domReady( init );
	</script>


	<p><div id="lbl_in">Incoming messages..</div>
	<!--Contains the incoming chat messages-->
	<div id="chatPane" aria-labelledby="lbl_in"></div>

	<p><label for="outgoing" id="lbl_out">Write a message..</label>
	<!--The outgoing chat form-->
	<br />
	<input type="text" id="outgoing" onkeydown="if(event.keyCode == 13) sendMessage()"/>
	<input type="submit" value="Send" onclick="sendMessage()"/>
	</p>


	<pre>

	N.D.Freear, 6 April 2012.

	Support: MSIE 8+, Firefox3+, Chrome 1+, Safari 4+, Opera 9.5+, iOS, Android 2.1+.
	(HTML5 websocket: Firefox 9+, Chrome 17+, Safari 5.x+)

	* http://www.unionplatform.com/?page_id=1587 (OrbiterMicro.js)
	* http://www.unionplatform.com/?page_id=3318 (Orbiter.js)
	* http://delicious.com/nfreear/union

	* http://websocket.org/echo.html
	* http://caniuse.com/#feat=websockets

	</html>