actionhero
Version:
actionhero.js is a multi-transport API Server with integrated cluster capabilities and delayed tasks
176 lines (146 loc) • 5.6 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/actionhero.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.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(err){ console.log('error', err.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(err, details){
if(err != null){
console.log(err);
}else{
client.roomAdd("defaultRoom");
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 += " " + formatTime(message.sentAt);
s += "<span style=\"color:#" + intToARGB(hashCode(message.from)) + "\">"
s += " [";
if(message.me === true){ s += "<strong>"; }
s += message.from;
if(message.me === true){ s += "</strong>"; }
s += "] ";
s += "</span>"
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()">
<!-- <section class="content-section text-center">
<div class="features-section">
<div class="container">
<h2>Real-Time Chat with Actionhero</h2>
</div>
</div>
</section> -->
<section class="intro">
<div class="thin-intro-body">
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<br />
<h1>Real-Time Chat with Actionhero</h1>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-4 col-sm-4 col-lg-4">
Hello, <strong><span id="name"></span></strong>
<form id="messageForm" class="form-inline">
<div class="form-group">
<label class="sr-only">Chat Message</label>
<div class="input-group">
<div class="input-group-addon"></div>
<input type="text" class="form-control" id="message" placeholder="Your Message">
<div class="input-group-addon"></div>
</div>
</div>
<br>
<br>
<button type="submit" class="btn btn-primary">Send Message</button>
</form>
</div>
<div class="col-8 col-sm-8 col-lg-8">
<div class="server_info" id="actions">
<br>
<div class="chatBox" id="chatBox">
</div>
</div>
</div>
</div>
</div>
</section>
<!-- <div class="body_container">
<div class="server_info">
<div class="box"><div class="left">Name:</div><span id="name"></span></div>
<div class="box"><div class="left">Message:</div>
<form id="messageForm" name="messageForm" action="#">
<input type="text" name="message" size="90" id="message"> <a href="javascript:sendMessage()">[ send ]</a>
</form>
</div>
</div>
</div>
<div class="body_container">
<h2>Chat:</h2>
<div class="server_info" id="actions">
<div class="chatBox" id="chatBox">...</div>
</div>
</div> -->
</body>
<script>
document.getElementById('messageForm').addEventListener('submit', function(e){ e.preventDefault(); sendMessage(); }, false);
</script>
</html>