actionhero
Version:
actionhero.js is a multi-transport API Server with integrated cluster capabilities and delayed tasks
141 lines (115 loc) • 4.71 kB
HTML
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="content-language" content="en" />
<meta name="description" content="actionhero.js" />
<link href='/public/css/cosmo.css' rel='stylesheet' type='text/css'>
<link rel="icon" href="/public/favicon.ico">
<title>actionhero.js</title>
<script type="text/javascript" src="/public/javascript/actionheroClient.min.js"></script>
<script type="text/javascript">
var client;
var boot = function(){
client = new ActionheroClient;
client.on('connected', function(){ console.log('connected!') })
client.on('disconnected', function(){ console.log('disconnected :(') })
client.on('error', function(error){ console.log('error', error.stack) })
client.on('reconnect', function(){ console.log('reconnect') })
client.on('reconnecting', function(){ console.log('reconnecting') })
// client.on('message', function(message){ console.log(message) })
client.on('alert', function(message){ alert( JSON.stringify(message) ) })
client.on('api', function(message){ alert( JSON.stringify(message) ) })
client.on('welcome', function(message){ appendMessage(message); })
client.on('say', function(message){ appendMessage(message); })
client.connect(function(error, details){
if(error != null){
console.log(error);
}else{
client.action('createChatRoom', {name: 'defaultRoom'}, function(data){
console.log(data)
client.roomAdd("defaultRoom", function(error){ if(error){ console.log(error);} });
document.getElementById("name").innerHTML = "<span style=\"color:#" + intToARGB(hashCode(client.id)) + "\">" + client.id + "</span>";
});
}
});
}
var appendMessage = function(message){
var s = "";
s += "<pre>"
if (message.welcome != null){
s += "<div align=\"center\">*** " + message.welcome + " ***</div>";
s += "<div align=\"center\"><img src=\"/public/logo/actionhero.png\" width=\"100\" /></div>";
}else{
s += "<span style=\" font-size:10px; color:#" + intToARGB(hashCode(message.from)) + "\">"
if(message.me === true){ s += "<strong>"; }
s += message.from;
if(message.me === true){ s += "</strong>"; }
s += "</span>";
s += "<span style=\"font-size:10px;\"> @ " + formatTime(message.sentAt);
s += "</span>"
s += "<br />"
s += message.message;
}
s += "</pre>"
var div = document.getElementById("chatBox");
div.innerHTML = s + div.innerHTML;
}
var sendMessage = function(){
var div = document.getElementById("message");
var message = div.value;
div.value = "";
client.say(client.rooms[0], message);
}
var formatTime = function(timestamp){
return new Date(timestamp).toLocaleTimeString()
}
function hashCode(str) { // java String#hashCode
var hash = 0;
for (var i = 0; i < str.length; i++) {
hash = str.charCodeAt(i) + ((hash << 5) - hash);
}
return hash;
}
function intToARGB(i){
var color =
((i>>24)&0xFF).toString(16) +
((i>>16)&0xFF).toString(16) +
((i>> 8)&0xFF).toString(16) +
(i&0xFF).toString(16);
return color.substring(0, 6);
}
</script>
</head>
<body onload="boot()">
<div class="container">
<div class="row">
<div class="col-md-12">
<h1>Real-Time Chat with Actionhero</h1>
<a href="/" class="btn btn-warning btn-xs">Back Home</a>
<hr />
</div>
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Hello,<br /><strong><span id="name"></span></strong></h3>
</div>
<div class="panel-body">
<form id="messageForm" class="form-inline">
<div class="form-group">
<input type="text" class="form-control" id="message" placeholder="Your Message">
</div>
<button type="submit" class="btn btn-primary">Send Message</button>
</form>
</div>
</div>
</div>
<div class="col-md-8">
<div class="chatBox" id="chatBox"></div>
</div>
</div>
</div>
</body>
<script>
document.getElementById('messageForm').addEventListener('submit', function(e){ e.preventDefault(); sendMessage(); }, false);
</script>
</html>