mirror of
https://github.com/retspen/webvirtcloud
synced 2026-11-09 19:56:48 +00:00
1fac3de23c
- socketiod's handlers run on their own threads. A connection is now admitted under a lock, so two at once can no longer both open a VM's console or pass the session cap. A session's terminal is used and closed only under its own lock while it is open: a closed descriptor's number, taken again by a new session, never receives another session's input or gives it the other's output. - A refused connection says why: serial console off, the link expired, the VM's console open in another window, too many consoles. The page shows it instead of "refused". - The page no longer retries on its own with a token that has expired after two minutes; Reconnect loads a new page. Input the browser cannot encode no longer raises in the daemon.
104 lines
3.7 KiB
HTML
104 lines
3.7 KiB
HTML
{% extends "console-base.html" %}
|
|
{% load i18n %}
|
|
{% load static %}
|
|
|
|
{% block head %}
|
|
<title>WebVirtCloud - XTerm</title>
|
|
<link rel="stylesheet" href="{% static 'css/xterm.css' %}"/>
|
|
<script src="{% static 'js/xterm/xterm.js' %}"></script>
|
|
<script src="{% static 'js/xterm/addon-fit.js' %}"></script>
|
|
|
|
<script src="{% static 'js/socket.io.js' %}"></script>
|
|
<style>
|
|
#terminal { flex: 1; min-height: 0; }
|
|
</style>
|
|
|
|
{% endblock %}
|
|
{% block content %}
|
|
<div style="background: white; padding-bottom: 5px;">
|
|
<span style="font-size: small;">Status: <span style="font-size: small;" id="status">connecting...</span></span>
|
|
<button id="button" type="button" onclick="myFunction();">Connect</button>
|
|
</div>
|
|
|
|
<div id="terminal"></div>
|
|
<script>
|
|
// socketiod is behind this page's own /socket.io/ location; the page's
|
|
// signed token is the credential. It lasts two minutes: a new
|
|
// connection takes a new page (Reconnect), not an automatic retry.
|
|
var socket = io({transports: ["websocket", "polling"], auth: {token: "{{ token|escapejs }}"}, reconnection: false});
|
|
|
|
const status = document.getElementById("status");
|
|
const button = document.getElementById("button");
|
|
|
|
var term = new Terminal({
|
|
cursorBlink: true,
|
|
});
|
|
var fitAddon = new FitAddon.FitAddon();
|
|
term.loadAddon(fitAddon);
|
|
|
|
term.open(document.getElementById('terminal'));
|
|
|
|
// typed and pasted input
|
|
term.onData((data) => {
|
|
socket.emit("pty_input", {"input": data})
|
|
});
|
|
|
|
socket.on("pty_output", function(output){
|
|
term.write(output["output"])
|
|
})
|
|
|
|
function showStatus(text, color) {
|
|
status.textContent = text;
|
|
status.style.backgroundColor = color;
|
|
button.textContent = socket.connected ? "{% trans 'Disconnect'|escapejs %}" : "{% trans 'Reconnect'|escapejs %}";
|
|
}
|
|
socket.on("connect", () => showStatus("{% trans 'connected'|escapejs %}", "lightgreen"));
|
|
socket.on("disconnect", () => showStatus("{% trans 'disconnected'|escapejs %}", "#ff8383"));
|
|
// the server says why: serial console off, an expired link, the console open elsewhere
|
|
socket.on("connect_error", (err) => showStatus(err.message, "#ff8383"));
|
|
|
|
function myFunction(){
|
|
if (socket.connected) {
|
|
socket.disconnect();
|
|
} else {
|
|
location.reload();
|
|
}
|
|
}
|
|
|
|
function resize(){
|
|
fitAddon.fit()
|
|
socket.emit("resize", {"cols": term.cols, "rows": term.rows})
|
|
}
|
|
|
|
function bindTerminalKey(id, str) {
|
|
const el = document.getElementById(id);
|
|
if (el) {
|
|
el.addEventListener('click', (e) => {
|
|
e.preventDefault();
|
|
socket.emit("pty_input", {"input": str});
|
|
});
|
|
}
|
|
}
|
|
bindTerminalKey('ctrlc', '\x03');
|
|
bindTerminalKey('ctrld', '\x04');
|
|
bindTerminalKey('ctrlz', '\x1a');
|
|
bindTerminalKey('ctrlbackslash', '\x1c');
|
|
bindTerminalKey('sendtab', '\t');
|
|
bindTerminalKey('sendesc', '\x1b');
|
|
|
|
const fsBtn = document.getElementById('fullscreen_button');
|
|
if (fsBtn) {
|
|
fsBtn.addEventListener('click', (e) => {
|
|
e.preventDefault();
|
|
if (document.fullscreenElement) {
|
|
document.exitFullscreen().catch(() => {});
|
|
} else {
|
|
document.documentElement.requestFullscreen().catch(() => {});
|
|
}
|
|
});
|
|
}
|
|
|
|
window.onresize = resize;
|
|
window.onload = resize;
|
|
</script>
|
|
{% endblock %}
|