Cacodaimon/ChatClient.js

## app.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Caco's Chat</title>
    <link rel="stylesheet" type="text/css" href="jQuery/jquery.mobile-1.1.1.min.css" />
    <link rel="stylesheet" type="text/css" href="my.css" />
    <script src="jQuery/jquery.min.js"></script>
    <script src="jQuery/jquery.mobile-1.1.1.min.js"></script>
    <script src="jQuery/jquery.validate.min.js"></script>
    <script src="my.js"></script>
    <script src="FakeRequire.js"></script>
    <script src="jQueryMobileChatClient.js"></script>
  </head>
  <body>
    <!-- Chat login -->
    <div data-role="page" id="page_login">
      <div data-theme="a" data-role="header">
        <h3>Caco's Chat</h3>
      </div>
      <div data-role="content">
        <form id="login_form" class="validate">
          <div data-role="fieldcontain">
            <fieldset data-role="controlgroup">
              <label for="chatHost">Server</label>
              <input name="server" id="chatHost" placeholder="http://127.0.0.1" value="http://127.0.0.1" type="text"  class="required url"/>
            </fieldset>
          </div>
          <div data-role="fieldcontain">
            <fieldset data-role="controlgroup">
              <label for="chatPort">Port</label>
              <input name="port" id="chatPort" placeholder="8888" value="8888" type="text"  class="required digits"/>
            </fieldset>
          </div>
          <div data-role="fieldcontain">
            <fieldset data-role="controlgroup">
              <label for="nickname">Nickname</label>
              <input name="nickname" id="nickname" placeholder="" value="" type="text"  class="required"/>
            </fieldset>
          </div>
          <input data-theme="b" data-icon="check" data-iconpos="left" value="Login" type="submit" />
         </form>
      </div>
    </div>
    <!-- Chat -->
    <div data-role="page" id="page_chat">
      <div data-theme="a" data-role="header">
        <a data-role="button" data-theme="b"  href="#page_login" data-icon="back" data-iconpos="left" class="ui-btn-left" id="btn_logout">Logout</a>
        <h3>Chat</h3>
        <a data-role="button" data-theme="b" href="#page_users" data-icon="forward" data-iconpos="left" class="ui-btn-right" data-rel="dialog" id="btn_users">Users</a>
      </div>
      <div data-role="content">
        <ul data-role="listview" data-theme="c" data-divider-theme="d" id="chat_area" />
      </div>
      <div data-theme="a" data-role="footer" data-position="fixed">
        <form id="chat_form" class="validate">
        <div data-role="fieldcontain">
          <fieldset data-role="controlgroup">
            <label for="chat_message">Message</label>
            <input name="chat_message" id="chat_message" placeholder="Insert message here" value="" type="text" class="required"/>
          </fieldset>
        </div>
        <input data-theme="b" value="Send" type="submit" />
        </form>
        <a data-role="button" data-theme="b" href="#page_nickname" data-icon="forward" data-iconpos="left" class="ui-btn-right" data-rel="dialog">Change name</a>
      </div>
    </div>
    <!-- Chat users -->
    <div data-role="page" id="page_users">
      <div data-theme="a" data-role="header">
        <h3>Users</h3>
      </div>
      <div data-role="content" id="chat_area" data-theme="b">
        <ul data-role="listview" data-theme="c" data-divider-theme="d" id="chat_users" />
      </div>
    </div>
    <!-- change name -->
    <div data-role="page" id="page_nickname">
      <div data-theme="a" data-role="header">
        <h3>Change name</h3>
      </div>
      <div data-role="content" data-theme="b">
        <form id="change_name_form" class="validate">
          <div data-role="fieldcontain">
            <fieldset data-role="controlgroup">
              <input name="new_nickname" id="new_nickname" placeholder="Nickname" value="" type="text"  class="required"/>
            </fieldset>
          </div>
          <input data-icon="check" data-iconpos="left" value="Save" type="submit" />
         </form>
      </div>
    </div>
    <!-- change name -->
    <div data-role="page" id="page_private_message">
      <div data-theme="a" data-role="header">
        <h3>Private Message</h3>
      </div>
      <div data-role="content" data-theme="b">
        <form id="private_message_form" class="validate">
          <div data-role="fieldcontain">
            <fieldset data-role="controlgroup">
              <input name="private_message" id="private_message" placeholder="Private Message" value="" type="text"  class="required"/>
            </fieldset>
          </div>
          <input data-icon="check" data-iconpos="left" value="Send" type="submit" />
         </form>
      </div>
    </div>
  </body>
</html>

## ChatClient.js
module.exports.ChatClient = function () {
	if (module.exports.ChatClient.instance) {
		return module.exports.ChatClient.instance;
	}

	module.exports.ChatClient.instance = this;

	this.host = null;
	this.welcomeTime = 0;
	var interval = null;

	var request = function (msg) {
		var timeoutId = setTimeout(function () {
			new module.exports.ChatClient().stopInterval();
			new module.exports.ChatClient().onError();
		}, 1000);

		var jsonpRequest = {
			url: new module.exports.ChatClient().host,
			cache: false,
			dataType: 'jsonp',
			jsonp: 'ChatResponse',
			async: false,
			success: function(jsonp){
				clearTimeout(timeoutId)
				processResponse(jsonp)
			},
		};

		if (msg) {
			jsonpRequest.data = {q: encodeURIComponent(JSON.stringify(msg).toString())};
		}

		$.ajax(jsonpRequest);
	};

	var processResponse = function (response) {
		var chatClient = new module.exports.ChatClient();

		var thath = this;
		for (var i = response.length - 1; i >= 0; i--) {
			if (!response[i]) {
				continue
			}

			switch(response[i].type) {
				case 'command':
						processCommand(response[i]);
						break;
				case 'normal':
						chatClient.onMessage(response[i]);
						break;
				case 'private':
						chatClient.onPrivateMessage(response[i]);
						break;
			}
		};
	};

	var processCommand = function (command) {
		var chatClient = new module.exports.ChatClient();

		switch (command.name) {
			case 'welcome':
				chatClient.welcomeTime = command.time;
				chatClient.onLogin();
				chatClient.startInterval();
				return;
			case 'users':
				chatClient.onUsers(command.params);
				return;
			case 'name_changed':
				chatClient.onNameChange(command.params);
				return;
			case 'do_login':
				var delta = command.time - chatClient.welcomeTime
				if (delta < 5000) { //skip dologin if delta < 5 sec.
					chatClient.onDoLogin();
					chatClient.stopInterval();
				}
				return;
			case 'new_user':
				chatClient.onNewUser(command.params);
				return;
		}
	};

	this.sendMessage = function (msg) {
		request(msg);
	};

	this.getMessages = function () {
		request();
	};

	this.startInterval = function(time) {
		var time = time ? time : 333;

		this.stopInterval();

		interval = setInterval(this.getMessages, time);
	};

	this.stopInterval = function(time) {
		if (interval) {
			clearInterval(interval);
			interval = null;
		}
	};

	this.onLogin = function() {};
	this.onMessage = function(msg) {};
	this.onPrivateMessage = function(msg) {};
	this.onSend = function() {};
	this.onDoLogin = function() {};
	this.onUsers = function(users) {};
	this.onNameChange = function(params) {};
	this.onNewUser = function(params) {};
	this.onError = function() {};
}

## FakeRequire.js
"use strict";
if (!module) {
    var module = {};
}
if (!module.exports) {
    module.exports = {};
}

function require (src, callback) {
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = src;
    if (callback) {
    	script.onload = callback;
	}
    document.getElementsByTagName('head')[0].appendChild(script);
    return module.exports;
}

## jQueryMobileChatClient.js
Date.prototype.prettyTime = function () {
	var hours = this.getHours();
	var minutes = this.getMinutes();
	hours = hours < 10 ? '0' + hours : hours;
	minutes = minutes < 10 ? '0' + minutes : minutes;
	return hours + ':' + minutes;
};

String.prototype.sprintf = function () {
	var string = this;
	for (var i = 0; i < arguments.length; i++) {
		string = string.replace('%', arguments[i]);
	}
	return string;
};

function initChat() {
	var chatClient = new module.exports.ChatClient();
	var privateMessageReciever = null;
	var msgTemplate = '<li data-theme="%"><p class="ui-li-aside ui-li-desc"><strong>%</strong></p><p><strong class="user_%">%:</strong> %</p></li>';
	var userTemplate = '<li id="user_list_%"><strong>%</strong></li>';
	var newUserTemplate = '<li><p>User: <strong>%</strong> logged in.</p></li>';
	var userChangedNameTemplate = '<li><p><strong>User: % changed his/her name to: %</strong></p></li>';

	chatClient.onLogin = function () {
		$.mobile.changePage('#page_chat');
	}

	$('#btn_logout').click(function() {
		chatClient.sendMessage(new module.exports.Command('logout'));
	})

	$('#btn_users').click(function() {
		chatClient.sendMessage(new module.exports.Command('users'));
	});

	chatClient.onError = function () {
		alert('Connection error!');
		$.mobile.changePage('#page_login');
	}

	chatClient.onPrivateMessage = chatClient.onMessage = function (msg) {
		$('#chat_area').append(	msgTemplate.sprintf(
									msg.type == 'normal' ? 'c' : 'b',
									new Date(msg.time).prettyTime(),
									msg.user.id,
									msg.user.name,
									msg.text));
		$('#chat_area').listview('refresh');
		$(document).scrollTop($(document).height());
	}

	chatClient.onSend = function () {
		if (!$('#chat_form').valid()) {
			return false;
		}

		chatClient.sendMessage(new module.exports.Message($('#chat_message').val()))
		$('#chat_message').val('');
		return false;
	}

	chatClient.onUsers = function (users) {
		$('#chat_users').empty();
		for (var i = users.length - 1; i >= 0; i--) {
			$('#chat_users').append(userTemplate.sprintf(
				users[i].id,
				users[i].name));
			$('#user_list_' + users[i].id).click(function() {
				privateMessageReciever = $(this).text();
				$.mobile.changePage('#page_private_message');
			})
		}
		$("#chat_users").listview('refresh');
	}

	chatClient.onDoLogin = function () {
		$.mobile.changePage('#page_login');
	}

	chatClient.onNewUser = function (params) {
		$('#chat_area').append(newUserTemplate.sprintf(params.user.name));
		$('#chat_area').listview('refresh');
	}

	chatClient.onNameChange = function (params) {
		$('.user_' + params.user.id).text(params.to)

		$('#chat_area').append(userChangedNameTemplate.sprintf(params.from, params.to));
		$('#chat_area').listview('refresh');
	}

	$('#login_form').submit(function() {
		if (!$('#login_form').valid()) {
			return false;
		}

		chatClient.host = '%:%'.sprintf($('#chatHost').val(), $('#chatPort').val());
		chatClient.sendMessage(new module.exports.Command('login', {name: $('#nickname').val()}));

		return false;
	});

	$('#chat_form').submit(chatClient.onSend);

	$('#change_name_form').submit(function () {
		if (!$('#change_name_form').valid()) {
			return false;
		}

		chatClient.sendMessage(new module.exports.Command('change_name', {
			newName: $('#new_nickname').val()
		}))

		$.mobile.changePage('#page_chat');

		return false;
	});

	$('#private_message_form').submit(function () {
		if (!$('#private_message_form').valid()) {
			return false;
		}

		chatClient.sendMessage(new module.exports.PrivateMessage($('#private_message').val() ,null, privateMessageReciever))
		$('#private_message').val('');
		$.mobile.changePage('#page_chat');
		return false;
	});
}

$(document).ready(function() {
	require('ChatClient.js', function() {
		require('Message.js', function() {
			initChat();
		});
	});
});
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1" />
	<title>Caco's Chat</title>
	<link rel="stylesheet" type="text/css" href="jQuery/jquery.mobile-1.1.1.min.css" />
	<link rel="stylesheet" type="text/css" href="my.css" />
	<script src="jQuery/jquery.min.js"></script>
	<script src="jQuery/jquery.mobile-1.1.1.min.js"></script>
	<script src="jQuery/jquery.validate.min.js"></script>
	<script src="my.js"></script>
	<script src="FakeRequire.js"></script>
	<script src="jQueryMobileChatClient.js"></script>
	</head>
	<body>
	<!-- Chat login -->
	<div data-role="page" id="page_login">
	<div data-theme="a" data-role="header">
	<h3>Caco's Chat</h3>
	</div>
	<div data-role="content">
	<form id="login_form" class="validate">
	<div data-role="fieldcontain">
	<fieldset data-role="controlgroup">
	<label for="chatHost">Server</label>
	<input name="server" id="chatHost" placeholder="http://127.0.0.1" value="http://127.0.0.1" type="text" class="required url"/>
	</fieldset>
	</div>
	<div data-role="fieldcontain">
	<fieldset data-role="controlgroup">
	<label for="chatPort">Port</label>
	<input name="port" id="chatPort" placeholder="8888" value="8888" type="text" class="required digits"/>
	</fieldset>
	</div>
	<div data-role="fieldcontain">
	<fieldset data-role="controlgroup">
	<label for="nickname">Nickname</label>
	<input name="nickname" id="nickname" placeholder="" value="" type="text" class="required"/>
	</fieldset>
	</div>
	<input data-theme="b" data-icon="check" data-iconpos="left" value="Login" type="submit" />
	</form>
	</div>
	</div>
	<!-- Chat -->
	<div data-role="page" id="page_chat">
	<div data-theme="a" data-role="header">
	<a data-role="button" data-theme="b" href="#page_login" data-icon="back" data-iconpos="left" class="ui-btn-left" id="btn_logout">Logout</a>
	<h3>Chat</h3>
	<a data-role="button" data-theme="b" href="#page_users" data-icon="forward" data-iconpos="left" class="ui-btn-right" data-rel="dialog" id="btn_users">Users</a>
	</div>
	<div data-role="content">
	<ul data-role="listview" data-theme="c" data-divider-theme="d" id="chat_area" />
	</div>
	<div data-theme="a" data-role="footer" data-position="fixed">
	<form id="chat_form" class="validate">
	<div data-role="fieldcontain">
	<fieldset data-role="controlgroup">
	<label for="chat_message">Message</label>
	<input name="chat_message" id="chat_message" placeholder="Insert message here" value="" type="text" class="required"/>
	</fieldset>
	</div>
	<input data-theme="b" value="Send" type="submit" />
	</form>
	<a data-role="button" data-theme="b" href="#page_nickname" data-icon="forward" data-iconpos="left" class="ui-btn-right" data-rel="dialog">Change name</a>
	</div>
	</div>
	<!-- Chat users -->
	<div data-role="page" id="page_users">
	<div data-theme="a" data-role="header">
	<h3>Users</h3>
	</div>
	<div data-role="content" id="chat_area" data-theme="b">
	<ul data-role="listview" data-theme="c" data-divider-theme="d" id="chat_users" />
	</div>
	</div>
	<!-- change name -->
	<div data-role="page" id="page_nickname">
	<div data-theme="a" data-role="header">
	<h3>Change name</h3>
	</div>
	<div data-role="content" data-theme="b">
	<form id="change_name_form" class="validate">
	<div data-role="fieldcontain">
	<fieldset data-role="controlgroup">
	<input name="new_nickname" id="new_nickname" placeholder="Nickname" value="" type="text" class="required"/>
	</fieldset>
	</div>
	<input data-icon="check" data-iconpos="left" value="Save" type="submit" />
	</form>
	</div>
	</div>
	<!-- change name -->
	<div data-role="page" id="page_private_message">
	<div data-theme="a" data-role="header">
	<h3>Private Message</h3>
	</div>
	<div data-role="content" data-theme="b">
	<form id="private_message_form" class="validate">
	<div data-role="fieldcontain">
	<fieldset data-role="controlgroup">
	<input name="private_message" id="private_message" placeholder="Private Message" value="" type="text" class="required"/>
	</fieldset>
	</div>
	<input data-icon="check" data-iconpos="left" value="Send" type="submit" />
	</form>
	</div>
	</div>
	</body>
	</html>
	module.exports.ChatClient = function () {
	if (module.exports.ChatClient.instance) {
	return module.exports.ChatClient.instance;
	}

	module.exports.ChatClient.instance = this;

	this.host = null;
	this.welcomeTime = 0;
	var interval = null;

	var request = function (msg) {
	var timeoutId = setTimeout(function () {
	new module.exports.ChatClient().stopInterval();
	new module.exports.ChatClient().onError();
	}, 1000);

	var jsonpRequest = {
	url: new module.exports.ChatClient().host,
	cache: false,
	dataType: 'jsonp',
	jsonp: 'ChatResponse',
	async: false,
	success: function(jsonp){
	clearTimeout(timeoutId)
	processResponse(jsonp)
	},
	};

	if (msg) {
	jsonpRequest.data = {q: encodeURIComponent(JSON.stringify(msg).toString())};
	}

	$.ajax(jsonpRequest);
	};

	var processResponse = function (response) {
	var chatClient = new module.exports.ChatClient();

	var thath = this;
	for (var i = response.length - 1; i >= 0; i--) {
	if (!response[i]) {
	continue
	}

	switch(response[i].type) {
	case 'command':
	processCommand(response[i]);
	break;
	case 'normal':
	chatClient.onMessage(response[i]);
	break;
	case 'private':
	chatClient.onPrivateMessage(response[i]);
	break;
	}
	};
	};

	var processCommand = function (command) {
	var chatClient = new module.exports.ChatClient();

	switch (command.name) {
	case 'welcome':
	chatClient.welcomeTime = command.time;
	chatClient.onLogin();
	chatClient.startInterval();
	return;
	case 'users':
	chatClient.onUsers(command.params);
	return;
	case 'name_changed':
	chatClient.onNameChange(command.params);
	return;
	case 'do_login':
	var delta = command.time - chatClient.welcomeTime
	if (delta < 5000) { //skip dologin if delta < 5 sec.
	chatClient.onDoLogin();
	chatClient.stopInterval();
	}
	return;
	case 'new_user':
	chatClient.onNewUser(command.params);
	return;
	}
	};

	this.sendMessage = function (msg) {
	request(msg);
	};

	this.getMessages = function () {
	request();
	};

	this.startInterval = function(time) {
	var time = time ? time : 333;

	this.stopInterval();

	interval = setInterval(this.getMessages, time);
	};

	this.stopInterval = function(time) {
	if (interval) {
	clearInterval(interval);
	interval = null;
	}
	};

	this.onLogin = function() {};
	this.onMessage = function(msg) {};
	this.onPrivateMessage = function(msg) {};
	this.onSend = function() {};
	this.onDoLogin = function() {};
	this.onUsers = function(users) {};
	this.onNameChange = function(params) {};
	this.onNewUser = function(params) {};
	this.onError = function() {};
	}
	"use strict";
	if (!module) {
	var module = {};
	}
	if (!module.exports) {
	module.exports = {};
	}

	function require (src, callback) {
	var script = document.createElement('script');
	script.type = 'text/javascript';
	script.src = src;
	if (callback) {
	script.onload = callback;
	}
	document.getElementsByTagName('head')[0].appendChild(script);
	return module.exports;
	}
	Date.prototype.prettyTime = function () {
	var hours = this.getHours();
	var minutes = this.getMinutes();
	hours = hours < 10 ? '0' + hours : hours;
	minutes = minutes < 10 ? '0' + minutes : minutes;
	return hours + ':' + minutes;
	};

	String.prototype.sprintf = function () {
	var string = this;
	for (var i = 0; i < arguments.length; i++) {
	string = string.replace('%', arguments[i]);
	}
	return string;
	};

	function initChat() {
	var chatClient = new module.exports.ChatClient();
	var privateMessageReciever = null;
	var msgTemplate = '<li data-theme="%"><p class="ui-li-aside ui-li-desc"><strong>%</strong></p><p><strong class="user_%">%:</strong> %</p></li>';
	var userTemplate = '<li id="user_list_%"><strong>%</strong></li>';
	var newUserTemplate = '<li><p>User: <strong>%</strong> logged in.</p></li>';
	var userChangedNameTemplate = '<li><p><strong>User: % changed his/her name to: %</strong></p></li>';

	chatClient.onLogin = function () {
	$.mobile.changePage('#page_chat');
	}

	$('#btn_logout').click(function() {
	chatClient.sendMessage(new module.exports.Command('logout'));
	})

	$('#btn_users').click(function() {
	chatClient.sendMessage(new module.exports.Command('users'));
	});

	chatClient.onError = function () {
	alert('Connection error!');
	$.mobile.changePage('#page_login');
	}

	chatClient.onPrivateMessage = chatClient.onMessage = function (msg) {
	$('#chat_area').append( msgTemplate.sprintf(
	msg.type == 'normal' ? 'c' : 'b',
	new Date(msg.time).prettyTime(),
	msg.user.id,
	msg.user.name,
	msg.text));
	$('#chat_area').listview('refresh');
	$(document).scrollTop($(document).height());
	}

	chatClient.onSend = function () {
	if (!$('#chat_form').valid()) {
	return false;
	}

	chatClient.sendMessage(new module.exports.Message($('#chat_message').val()))
	$('#chat_message').val('');
	return false;
	}

	chatClient.onUsers = function (users) {
	$('#chat_users').empty();
	for (var i = users.length - 1; i >= 0; i--) {
	$('#chat_users').append(userTemplate.sprintf(
	users[i].id,
	users[i].name));
	$('#user_list_' + users[i].id).click(function() {
	privateMessageReciever = $(this).text();
	$.mobile.changePage('#page_private_message');
	})
	}
	$("#chat_users").listview('refresh');
	}

	chatClient.onDoLogin = function () {
	$.mobile.changePage('#page_login');
	}

	chatClient.onNewUser = function (params) {
	$('#chat_area').append(newUserTemplate.sprintf(params.user.name));
	$('#chat_area').listview('refresh');
	}

	chatClient.onNameChange = function (params) {
	$('.user_' + params.user.id).text(params.to)

	$('#chat_area').append(userChangedNameTemplate.sprintf(params.from, params.to));
	$('#chat_area').listview('refresh');
	}

	$('#login_form').submit(function() {
	if (!$('#login_form').valid()) {
	return false;
	}

	chatClient.host = '%:%'.sprintf($('#chatHost').val(), $('#chatPort').val());
	chatClient.sendMessage(new module.exports.Command('login', {name: $('#nickname').val()}));

	return false;
	});

	$('#chat_form').submit(chatClient.onSend);

	$('#change_name_form').submit(function () {
	if (!$('#change_name_form').valid()) {
	return false;
	}

	chatClient.sendMessage(new module.exports.Command('change_name', {
	newName: $('#new_nickname').val()
	}))

	$.mobile.changePage('#page_chat');

	return false;
	});

	$('#private_message_form').submit(function () {
	if (!$('#private_message_form').valid()) {
	return false;
	}

	chatClient.sendMessage(new module.exports.PrivateMessage($('#private_message').val() ,null, privateMessageReciever))
	$('#private_message').val('');
	$.mobile.changePage('#page_chat');
	return false;
	});
	}

	$(document).ready(function() {
	require('ChatClient.js', function() {
	require('Message.js', function() {
	initChat();
	});
	});
	});