<!DOCTYPE html>
<html>
<head>
<title>ws-irb</title>
<%- js_paths.each do |js| -%>
<script type="text/javascript" src="<%= js %>"></script>
<%- end -%>
<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='notice'>").text("closed"));
};
ws.onerror = function() {
$("#result").append($("<div class='alert'>").text("error!"));
};
$.eval = function() {
var text = $("#input").val()
if (text.length > 0) {
ws.send(text);
$("#input").val('').focus();
}
}
$('#input').keypress(function(e) {
if(e.keyCode == 13 && !e.altKey) {
$.eval();
return false;
}
});
$("#input").autoResize().trigger('change.dynSiz');
$("#input").focus();
});
</script>
<style type="text/css" media="screen">
body {
font-family: monospace;
padding: 10px;
margin: 0;
}
pre {
font-size: 13px;
font-family: monospace;
margin: 0;
padding: 0;
}
#result {
color: #0069AF;
}
#input {
font-size: 13px;
font-family: monospace;
margin: 0;
padding: 0;
width: 600px;
border: none;
outline: none;
vertical-align: top;
overflow: hidden;
}
#prompt {
color: #666;
font-weight: bold;
}
#footer {
position: fixed;
bottom: 4px;
right: 4px;
}
.description {
margin: 0;
padding: 0;
color: #AAA;
}
.alert {
color: red;
}
.notice {
color: #999;
}
</style>
</head>
<body>
<pre><span id="result"></span><span id="prompt">> </span><textarea id="input"></textarea></pre>
<div id="footer">
<p class="description">Press Alt+Enter to input new line.</p>
<p class="description">Close the window to exit.</p>
</div>
</body>
</html>