You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
73 lines
1.9 KiB
HTML
73 lines
1.9 KiB
HTML
<!DOCTYPE html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<style type="text/css">
|
|
body {
|
|
background: #888;
|
|
}
|
|
body.connected {
|
|
background: white;
|
|
}
|
|
#shell {
|
|
white-space: pre-wrap;
|
|
height: 40em;
|
|
width: 80em;
|
|
overflow-y: auto;
|
|
font-family: monospace;
|
|
background: black;
|
|
color: green;
|
|
font-size: 14px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>socket to me</h1>
|
|
<p>This page uses <a href="https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API/Writing_WebSocket_client_applications">WebSockets!</a>.</p>
|
|
<p><span id="connections">0</span> active connections</p>
|
|
|
|
<div id="shell"></div>
|
|
|
|
<script>
|
|
var ws_addr = 'ws://'+window.location.host+window.location.pathname,
|
|
sock = null,
|
|
shell = document.getElementById("shell"),
|
|
connections = document.getElementById("connections");
|
|
|
|
function connect () {
|
|
sock = new WebSocket(ws_addr);
|
|
sock.onopen = function (event) {
|
|
console.log("socket opened");
|
|
document.body.classList.add("connected");
|
|
// sock.send(JSON.stringify({
|
|
// src: "connect",
|
|
// }));
|
|
};
|
|
sock.onmessage = function (event) {
|
|
// console.log("message", event);
|
|
if (typeof(event.data) == "string") {
|
|
var msg = JSON.parse(event.data);
|
|
// console.log("message JSON", msg);
|
|
if (msg.src == "stdin" && msg.line) {
|
|
var line = document.createElement("div");
|
|
line.classList.add("line");
|
|
line.innerHTML = msg.line;
|
|
shell.appendChild(line);
|
|
} else if (msg.src == "connect") {
|
|
connections.innerHTML = msg.connections;
|
|
}
|
|
}
|
|
};
|
|
sock.onclose = function (event) {
|
|
// console.log("socket closed");
|
|
connections.innerHTML = "?";
|
|
document.body.classList.remove("connected");
|
|
sock = null;
|
|
window.setTimeout(connect, 2500);
|
|
}
|
|
}
|
|
|
|
connect();
|
|
|
|
</script>
|
|
</body>
|
|
</html> |