actionhero
Version:
The reusable, scalable, and quick node.js API server for stateless and stateful applications
195 lines (174 loc) • 5.58 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/ActionheroWebsocketClient.js"
></script>
</head>
<body onload="boot()">
<br />
<div class="container">
<div class="row">
<div class="col-md-12">
<h1>Real-Time Chat with Actionhero</h1>
<hr />
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="card border-primary">
<div class="card-header">
<h3>
Hello,<br /><strong><span id="name"></span></strong>
</h3>
<p style="font-size: 10px">
<em>fingerprint: <span id="fingerprint" /></em>
</p>
</div>
<div class="card-body">
<form id="messageForm" class="form-inline">
<div class="form-group">
<input
type="text"
class="form-control"
id="message"
placeholder="Your Message"
/>
</div>
<button id="submitButton" type="submit" class="btn btn-primary">
Send Message
</button>
</form>
</div>
</div>
</div>
<div class="col-md-8">
<div class="list-group" id="chatBox" />
</div>
</div>
</div>
</body>
<script>
document.getElementById("messageForm").addEventListener(
"submit",
function (e) {
e.preventDefault();
sendMessage();
},
false
);
</script>
<script type="text/javascript">
var client;
var boot = function () {
client = new ActionheroWebsocketClient();
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) {
console.error(error);
} else {
client.action(
"createChatRoom",
{ name: "defaultRoom" },
function (data) {
if (data.error) console.error(data.error);
client.roomAdd("defaultRoom");
document.getElementById("name").innerHTML =
'<span style="color:#' +
intToARGB(hashCode(client.id)) +
'">' +
client.id +
"</span>";
document.getElementById("fingerprint").innerHTML =
client.fingerprint;
}
);
}
});
};
var appendMessage = function (message) {
var s = "";
if (message.welcome != null) {
s += "<br />";
s += '<div align="center">*** ' + message.welcome + " ***</div>";
s +=
'<div align="center"><img src="/public/logo/actionhero.png" width="100" /></div>';
} else {
s +=
'<a href="#" class="list-group-item list-group-item-action flex-column align-items-start">';
s += ' <div class="d-flex w-100 justify-content-between">';
s +=
' <h5 class="mb-1" style="color:#' +
intToARGB(hashCode(message.from)) +
'">' +
message.from +
"</h5>";
s += " <small>" + formatTime(message.sentAt) + "</small>";
s += " </div>";
s += ' <p class="mb-1">' + message.message + "</p>";
s += "</a >";
}
var div = document.getElementById("chatBox");
div.innerHTML = s + div.innerHTML;
};
var sendMessage = function () {
var div = document.getElementById("message");
var message = div.value;
div.value = "";
if (client.rooms.length === 0) return alert("not a member of chat room");
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>
</html>