<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js?v=1"></script>
<script type="text/javascript" charset="utf-8">
$(function() {
var ws = new WebSocket("ws://127.0.0.1:<%= port %>");
ws.onmessage = function(e) {
$("#result").append($("<div>").html(e.data));
$("body").scrollTop(document.height);
};
ws.onclose = function() {
$("#result").append($("<div class='alert'>").text("closed"));
};
ws.onerror = function() {
$("#result").append($("<div class='alert'>").text("error!"));
};
$.eval = function() {
ws.send($("#input").val());
$("#input").val('').focus();
}
$('#input').keyup(function(e) {
if(e.keyCode == 13) {
$.eval()
}
});
$("#input").focus();
});
</script>
<style type="text/css" media="screen">
body {
padding: 10px;
margin: 0;
}
pre {
font-size: 13px;
font-family: monospace;
margin: 0;
padding: 0;
}
#input {
font-size: 13px;
font-family: monospace;
margin: 0;
padding: 0;
border: none;
outline: none;
}
.alert {
color: red;
}
</style>
</head>
<body>
<pre><span id="result"></span><span id="prompt">> </span><input type="text" id="input" style="width: 400px" /></pre>
</body>
</html>