Skip to content

Instantly share code, notes, and snippets.

@wojtekka

wojtekka/index.html

Last active October 21, 2020 09:30
Show Gist options
  • Save wojtekka/8188ee29b0a2616e3f8ecd675b5a66bd to your computer and use it in GitHub Desktop.
Save wojtekka/8188ee29b0a2616e3f8ecd675b5a66bd to your computer and use it in GitHub Desktop.
Download ZIP
Simple WebSocket console, self-contained, desktop/mobile, Firefox/Chrome, public domain
Raw
index.html
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta charset="utf-8" />
<script type="text/javascript">
var url = "ws://" + location.host + location.pathname + "websocket";
var connected = false;
var ws;
var ready = false;
var last = "";
function log(msg, color) {
var now = new Date();
var ts = "";
if (now.getHours() < 10) ts += "0";
ts += now.getHours() + ":";
if (now.getMinutes() < 10) ts += "0";
ts += now.getMinutes() + ":";
if (now.getSeconds() < 10) ts += "0";
ts += now.getSeconds();
var prefix = (color) ? ("<span style='color: " + color + ";'>") : "";
var suffix = (color) ? ("</span>") : "";
msg = msg.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/'/g, "&apos;");
document.getElementById("log").innerHTML += "[" + ts + "] " + prefix + msg + suffix + "\n";
window.scrollTo(0, document.body.scrollHeight);
}
function connect() {
ws = new WebSocket(url);
log("*** Connecting to " + url, "green");
ws.onopen = function (evt) { log("*** Connection established", "green"); connected = true; };
ws.onclose = function (evt) { if (connected) { log("*** Connection closed", "red"); connected = false; } else { log("*** Connection failed", "red"); } setTimeout('connect()', 1000); };
ws.onmessage = function (evt) { log(evt.data); };
}
function keydown(obj, evt) {
if (evt.keyCode == 13 && obj.value != "") {
if (ws && ws.readyState == 1) {
ws.send(obj.value);
log("*** " + obj.value, "blue");
} else {
log("*** Not connected", "red");
}
last = obj.value;
obj.value = "";
} else if (evt.keyCode == 38) {
if (last) {
obj.value = last;
last = "";
}
} else if (evt.keyCode == 40) {
if (obj.value != "") {
last = obj.value;
obj.value = "";
}
}
}
window.onload = function(evt) {
document.getElementById("cmd").focus();
connect();
};
</script>
</head>
<body style="padding: 0;">
<pre id="log" style="padding-bottom: 18pt;"></pre>
<input id="cmd" autocapitalization="off" autocorrect="off" style="border: none; border-top: 1px solid gray; margin: 0; width: 100%; padding: 4pt 4pt 4pt 4pt; position: fixed; bottom: 0; left: 0;" width="100%" onkeydown="keydown(this, event);" />
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment