|
<!doctype html>
<html>
<head>
<title>babl</title>
<meta charset="utf-8" />
<style type="text/css">
#messages img {
max-width: 500px;
max-height: 350px;
}
#input {
float: left;
width: 100%;
}
</style>
</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://" + location.host);
inputEl.onkeyup = function(ev) {
if (ev.keyCode == 13) {
sendMessage(inputEl.value);
inputEl.value = "";
}
}
var word_matchers = [{
re: /https?:\/\/.*youtube.com\/watch\?v=([a-zA-Z0-9-]+).*/,
fn: function(match) {
var el = document.createElement("iframe");
el.src = "http://www.youtube.com/embed/" + match[1];
el.width = 420;
el.height = 315;
el.setAttribute("frameborder", 0);
return el;
}
}, {
re: /https?:\/\/vimeo.com\/([0-9]+).*/,
fn: function(match) {
var el = document.createElement("iframe");
el.src = "//player.vimeo.com/video/" + match[1];
el.sandbox = "allow-same-origin allow-scripts allow-popups";
el.width = 420;
el.height = 315;
el.setAttribute("frameborder", 0);
return el;
}
}, {
re: /https?:\/\/.*(png|gif|jpg|jpeg)$/i,
fn: function(match) {
var el = document.createElement("img");
el.src = match[0];
return el;
}
}, {
re: /https?:\/\/.*/,
fn: function(match) {
var el = document.createElement("a");
el.href = match[0];
el.textContent = match[0];
return el;
}
}, {
re: /^(\*\*?|__?)([^\s]+)\1$/,
fn: function(match) {
var highlight = {"*": "em", "**": "strong", "_": "em", "__": "strong"};
console.log(match.toString());
var el = document.createElement(highlight[match[1]]);
el.textContent = match[2];
return el;
}
}, { re: /.*/, fn: function(match) { return new Text(match[0]); }}];
function expandWord(word, msgEl) {
for (var i = 0; i < word_matchers.length; i++) {
var matcher = word_matchers[i];
var match = word.match(matcher.re);
if (match) {
return matcher.fn(match, msgEl);
}
}
}
function displayMessage(msg) {
var msgEl = document.createElement("pre");
var msgDate = new Date(msg.timestamp);
msgEl.textContent = msgDate.toLocaleTimeString() + " - " + msg.author + ": ";
var words = msg.content.split(/\s/);
for (var i = 0; i < words.length; i++) {
msgEl.appendChild(new Text(" "));
msgEl.appendChild(expandWord(words[i], msgEl));
}
messagesEl.appendChild(msgEl);
if (window.scrollY >= window.scrollMaxY - 2 * inputEl.clientHeight) {
msgEl.scrollIntoView();
}
}
function handleMessage(msg) {
switch (msg.type) {
case "message":
displayMessage(msg);
break;
default:
console.warn("unkown message type: " + msg.type, msg);
}
}
ws.addEventListener('message', 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', "msgs");
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>
|
