Skip to content

Instantly share code, notes, and snippets.

@Cacodaimon

Cacodaimon/ChatClient.js

Created November 23, 2012 14:43
Show Gist options
  • Save Cacodaimon/4135922 to your computer and use it in GitHub Desktop.
Save Cacodaimon/4135922 to your computer and use it in GitHub Desktop.
Download ZIP
Used @ cacodaemon.de
Raw
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>
Raw
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() {};
}
Raw
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;
}
Raw
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();
});
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment