mirror of
https://github.com/retspen/webvirtcloud
synced 2024-12-27 08:35:22 +00:00
111 lines
3.6 KiB
HTML
111 lines
3.6 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@3.6.0/xterm.js' %}"></script>
|
|
<script src="{% static 'js/xterm@3.6.0/addons/fit/fit.js' %}"></script>
|
|
<script src="{% static 'js/xterm@3.6.0/addons/fullscreen/fullscreen.js' %}"></script>
|
|
|
|
<script src="{% static 'js/socket.io.js' %}"></script>
|
|
|
|
{% 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 style="width: 100%; height:100%;" id="terminal"></div>
|
|
<script crossorigin="anonymous">
|
|
Terminal.applyAddon(fit);
|
|
|
|
let host = readQueryVariable('host', '{{ socketio_host }}');
|
|
let port = readQueryVariable('port', '{{ socketio_port }}');
|
|
let path = readQueryVariable('path', '{{ socketio_path }}');
|
|
|
|
|
|
// Build the websocket URL used to connect
|
|
let url;
|
|
if (window.location.protocol === "https:") {
|
|
url = 'wss';
|
|
} else {
|
|
url = 'ws';
|
|
}
|
|
url += '://' + host;
|
|
if (port) {
|
|
url += ':' + port;
|
|
}
|
|
|
|
var socket = io.connect(url, {transports: ["websocket", "polling"]});
|
|
|
|
const status = document.getElementById("status");
|
|
const button = document.getElementById("button");
|
|
|
|
var term = new Terminal({
|
|
cursorBlink: true,
|
|
});
|
|
|
|
term.open(document.getElementById('terminal'));
|
|
|
|
term.on('key', (key, ev) => {
|
|
console.log("pressed key", key)
|
|
socket.emit("pty_input", {"input": key})
|
|
});
|
|
|
|
socket.on("pty_output", function(output){
|
|
console.log(output["output"])
|
|
term.write(output["output"])
|
|
})
|
|
|
|
socket.on("connect", () => {
|
|
status.innerHTML = '<span style="background-color: lightgreen;">connected</span>'
|
|
button.innerHTML = 'Disconnect'
|
|
})
|
|
|
|
socket.on("disconnect", () => {
|
|
status.innerHTML = '<span style="background-color: #ff8383;">disconnected</span>'
|
|
button.innerHTML = 'Connect'
|
|
})
|
|
|
|
function myFunction(){
|
|
if (button.innerHTML =='Connect'){
|
|
location.reload();
|
|
}
|
|
|
|
else if (button.innerHTML == "Disconnect"){
|
|
socket.emit("disconnect_request")
|
|
}
|
|
}
|
|
|
|
function resize(){
|
|
term.fit()
|
|
socket.emit("resize", {"cols": term.cols, "rows": term.rows})
|
|
}
|
|
|
|
// This function extracts the value of one variable from the
|
|
// query string. If the variable isn't defined in the URL
|
|
// it returns the default value instead.
|
|
function readQueryVariable(name, defaultValue) {
|
|
// A URL with a query parameter can look like this:
|
|
// https://www.example.com?myqueryparam=myvalue
|
|
//
|
|
// Note that we use location.href instead of location.search
|
|
// because Firefox < 53 has a bug w.r.t location.search
|
|
const re = new RegExp('.*[?&]' + name + '=([^&#]*)'),
|
|
match = document.location.href.match(re);
|
|
|
|
if (match) {
|
|
// We have to decode the URL since want the cleartext value
|
|
return decodeURIComponent(match[1]);
|
|
}
|
|
|
|
return defaultValue;
|
|
}
|
|
|
|
window.onresize = resize
|
|
window.onload = resize
|
|
</script>
|
|
{% endblock %}
|