|
<!doctype html>
<html>
<head>
<title>babl</title>
<meta charset="utf-8" />
</head>
<body>
<div id="messages">
</div>
<input id="input" type="text" placeholder="Say something..." />
<script>
var messagesEl = document.getElementById("messages");
var inputEl = document.getElementById("input");
setTimeout(loadHistory, 0);
var ws = new WebSocket("ws://localhost:8080");
inputEl.onkeyup = function(ev) {
if (ev.keyCode == 13) {
sendMessage(inputEl.value);
inputEl.value = "";
}
}
function displayMessage(msg) {
var msgEl = document.createElement("pre");
var msgDate = new Date(msg.timestamp);
msgEl.textContent = msgDate.toLocaleTimeString() + " - " + msg.author + ": " + msg.content;
messagesEl.appendChild(msgEl);
}
function handleMessage(msg) {
switch (msg.type) {
case "message":
displayMessage(msg);
break;
default:
console.warn("unkown message type: " + msg.type, msg);
}
}
ws.onmessage = function(ev) {
var msg = JSON.parse(ev.data);
handleMessage(msg);
}
function sendMessage(msg) {
var msg = {
type: "message",
content: msg
};
console.log("sending: ", msg);
ws.send(JSON.stringify(msg));
}
function loadHistory() {
var xhr = new XMLHttpRequest();
xhr.open('GET', location.href + "/../msgs.json");
xhr.onreadystatechange = function() {
if (xhr.readyState == XMLHttpRequest.DONE) {
var msgs = JSON.parse(xhr.responseText);
msgs.forEach(function(msg) {
handleMessage(msg);
});
}
}
xhr.send();
}
</script>
</body>
</html>
|
