mirror of
https://github.com/tsl0922/ttyd.git
synced 2025-12-22 11:54:19 +01:00
ZMODEM support added 🎉
This commit is contained in:
Shuanglei Tao
380
html/js/app.js
380
html/js/app.js
@@ -1,117 +1,291 @@
|
||||
(function() {
|
||||
var terminalContainer = document.getElementById('terminal-container'),
|
||||
httpsEnabled = window.location.protocol === "https:",
|
||||
url = (httpsEnabled ? 'wss://' : 'ws://') + window.location.host + window.location.pathname + 'ws',
|
||||
authToken = (typeof tty_auth_token !== 'undefined') ? tty_auth_token : null,
|
||||
protocols = ["tty"],
|
||||
autoReconnect = -1,
|
||||
term, pingTimer, wsError;
|
||||
var Zmodem = require('zmodem.js/src/zmodem_browser');
|
||||
var Terminal = require('xterm').Terminal;
|
||||
|
||||
var openWs = function() {
|
||||
var ws = new WebSocket(url, protocols),
|
||||
textDecoder = new TextDecoder(),
|
||||
textEncoder = new TextEncoder();
|
||||
var unloadCallback = function(event) {
|
||||
var message = 'Close terminal? this will also terminate the command.';
|
||||
(event || window.event).returnValue = message;
|
||||
return message;
|
||||
};
|
||||
var sendMessage = function (msg) {
|
||||
if (ws.readyState === WebSocket.OPEN) {
|
||||
ws.send(textEncoder.encode(msg));
|
||||
require('xterm/lib/addons/fit');
|
||||
require('./overlay');
|
||||
|
||||
function showReceiveModal(xfer) {
|
||||
resetModal('Receiving files');
|
||||
var fileInfo = xfer.get_details();
|
||||
document.getElementById('name').textContent = fileInfo.name;
|
||||
document.getElementById('size').textContent = bytesHuman(fileInfo.size, 2);
|
||||
document.getElementById('mtime').textContent = fileInfo.mtime;
|
||||
document.getElementById('files-remaining').textContent = fileInfo.files_remaining;
|
||||
document.getElementById('bytes-remaining').textContent = bytesHuman(fileInfo.bytes_remaining, 2);
|
||||
document.getElementById('mode').textContent = '0' + fileInfo.mode.toString(8);
|
||||
document.getElementById('choose').style.display = 'none';
|
||||
document.getElementById('file').style.display = '';
|
||||
var skip = document.getElementById('skip');
|
||||
skip.disabled = false;
|
||||
skip.onclick = function () {
|
||||
this.disabled = true;
|
||||
xfer.skip();
|
||||
};
|
||||
skip.style.display = '';
|
||||
document.getElementById('modal').classList.add('is-active');
|
||||
}
|
||||
|
||||
function showSendModal(callback) {
|
||||
resetModal('Sending files');
|
||||
document.getElementById('file').style.display = 'none';
|
||||
document.getElementById('skip').style.display = 'none';
|
||||
document.getElementById('choose').style.display = '';
|
||||
var filesInput = document.getElementById('files');
|
||||
filesInput.disabled = false;
|
||||
filesInput.value = '';
|
||||
filesInput.onchange = function () {
|
||||
this.disabled = true;
|
||||
var files = this.files;
|
||||
var fileNames = '';
|
||||
for (var i = 0; i < files.length; i++) {
|
||||
if (i === 0) {
|
||||
fileNames = files[i].name;
|
||||
} else {
|
||||
fileNames += ' | ' + files[i].name;
|
||||
}
|
||||
};
|
||||
var sendPing = function() {
|
||||
sendMessage("1");
|
||||
};
|
||||
}
|
||||
document.getElementById('file-names').textContent = fileNames;
|
||||
callback(files);
|
||||
};
|
||||
document.getElementById('modal').classList.add('is-active');
|
||||
}
|
||||
|
||||
ws.binaryType = 'arraybuffer';
|
||||
function hideModal() {
|
||||
document.getElementById('modal').classList.remove('is-active');
|
||||
}
|
||||
|
||||
ws.onopen = function() {
|
||||
console.log("Websocket connection opened");
|
||||
wsError = false;
|
||||
sendMessage(JSON.stringify({AuthToken: authToken}));
|
||||
pingTimer = setInterval(sendPing, 30 * 1000);
|
||||
function resetModal(title) {
|
||||
document.getElementById('header').textContent = title;
|
||||
document.getElementById('bytes-received').textContent = '-';
|
||||
document.getElementById('percent-received').textContent = '-%';
|
||||
document.getElementById('progress-info').style.display = 'none';
|
||||
var progressBar = document.getElementById('progress-bar');
|
||||
progressBar.textContent = '0%';
|
||||
progressBar.value = 0;
|
||||
}
|
||||
|
||||
if (typeof term !== 'undefined') {
|
||||
term.destroy();
|
||||
}
|
||||
function updateProgress(xfer) {
|
||||
var size = xfer.get_details().size;
|
||||
var offset = xfer.get_offset();
|
||||
document.getElementById('bytes-received').textContent = bytesHuman(offset, 2);
|
||||
document.getElementById('bytes-file').textContent = bytesHuman(size, 2);
|
||||
|
||||
term = new Terminal();
|
||||
var percentReceived = (100 * offset / size).toFixed(2);
|
||||
document.getElementById('percent-received').textContent = percentReceived + '%';
|
||||
document.getElementById('progress-info').style.display = '';
|
||||
|
||||
term.on('resize', function(size) {
|
||||
sendMessage("2" + JSON.stringify({columns: size.cols, rows: size.rows}));
|
||||
setTimeout(function() {
|
||||
term.showOverlay(size.cols + 'x' + size.rows);
|
||||
}, 500);
|
||||
});
|
||||
var progressBar = document.getElementById('progress-bar');
|
||||
progressBar.textContent = percentReceived + '%';
|
||||
progressBar.setAttribute('value', percentReceived);
|
||||
}
|
||||
|
||||
term.on("data", function(data) {
|
||||
sendMessage("0" + data);
|
||||
});
|
||||
function bytesHuman (bytes, precision) {
|
||||
if (isNaN(parseFloat(bytes)) || !isFinite(bytes)) return '-';
|
||||
if (bytes === 0) return 0;
|
||||
if (typeof precision === 'undefined') precision = 1;
|
||||
var units = ['bytes', 'KB', 'MB', 'GB', 'TB', 'PB'],
|
||||
number = Math.floor(Math.log(bytes) / Math.log(1024));
|
||||
return (bytes / Math.pow(1024, Math.floor(number))).toFixed(precision) + ' ' + units[number];
|
||||
}
|
||||
|
||||
term.on('open', function() {
|
||||
// https://stackoverflow.com/a/27923937/1727928
|
||||
window.addEventListener('resize', function() {
|
||||
clearTimeout(window.resizedFinished);
|
||||
window.resizedFinished = setTimeout(function () {
|
||||
term.fit();
|
||||
}, 250);
|
||||
});
|
||||
window.addEventListener('beforeunload', unloadCallback);
|
||||
term.fit();
|
||||
});
|
||||
|
||||
while (terminalContainer.firstChild) {
|
||||
terminalContainer.removeChild(terminalContainer.firstChild);
|
||||
}
|
||||
|
||||
term.open(terminalContainer, true);
|
||||
};
|
||||
|
||||
ws.onmessage = function(event) {
|
||||
var cmd = String.fromCharCode(new DataView(event.data).getUint8()),
|
||||
data = textDecoder.decode(event.data.slice(1));
|
||||
switch(cmd) {
|
||||
case '0':
|
||||
term.write(data);
|
||||
break;
|
||||
case '1': // pong
|
||||
break;
|
||||
case '2':
|
||||
document.title = data;
|
||||
break;
|
||||
case '3':
|
||||
var preferences = JSON.parse(data);
|
||||
Object.keys(preferences).forEach(function(key) {
|
||||
console.log("Setting " + key + ": " + preferences[key]);
|
||||
term.setOption(key, preferences[key]);
|
||||
});
|
||||
break;
|
||||
case '4':
|
||||
autoReconnect = JSON.parse(data);
|
||||
console.log("Enabling reconnect: " + autoReconnect + " seconds");
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
ws.onclose = function(event) {
|
||||
console.log("Websocket connection closed with code: " + event.code);
|
||||
if (term) {
|
||||
term.off('data');
|
||||
term.off('resize');
|
||||
if (!wsError) {
|
||||
term.showOverlay("Connection Closed", null);
|
||||
function handleSend(zsession) {
|
||||
return new Promise(function (res) {
|
||||
showSendModal(function (files) {
|
||||
Zmodem.Browser.send_files(
|
||||
zsession,
|
||||
files,
|
||||
{
|
||||
on_progress: function(obj, xfer) {
|
||||
updateProgress(xfer);
|
||||
},
|
||||
on_file_complete: function(obj) {
|
||||
hideModal();
|
||||
}
|
||||
}
|
||||
).then(
|
||||
zsession.close.bind(zsession),
|
||||
console.error.bind(console)
|
||||
).then(function () {
|
||||
hideModal();
|
||||
res();
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function handleReceive(zsession) {
|
||||
zsession.on('offer', function (xfer) {
|
||||
showReceiveModal(xfer);
|
||||
var fileBuffer = [];
|
||||
xfer.on('input', function (payload) {
|
||||
updateProgress(xfer);
|
||||
fileBuffer.push(new Uint8Array(payload));
|
||||
});
|
||||
xfer.accept().then(function () {
|
||||
Zmodem.Browser.save_to_disk(
|
||||
fileBuffer,
|
||||
xfer.get_details().name
|
||||
);
|
||||
}, console.error.bind(console));
|
||||
});
|
||||
var promise = new Promise(function (res) {
|
||||
zsession.on('session_end', function () {
|
||||
hideModal();
|
||||
res();
|
||||
});
|
||||
});
|
||||
zsession.start();
|
||||
return promise;
|
||||
}
|
||||
|
||||
var terminalContainer = document.getElementById('terminal-container'),
|
||||
httpsEnabled = window.location.protocol === 'https:',
|
||||
url = (httpsEnabled ? 'wss://' : 'ws://') + window.location.host + window.location.pathname + 'ws',
|
||||
textDecoder = new TextDecoder(),
|
||||
textEncoder = new TextEncoder(),
|
||||
authToken = (typeof tty_auth_token !== 'undefined') ? tty_auth_token : null,
|
||||
autoReconnect = -1,
|
||||
term, pingTimer, wsError;
|
||||
|
||||
var openWs = function() {
|
||||
var ws = new WebSocket(url, ['tty']);
|
||||
var sendMessage = function (message) {
|
||||
if (ws.readyState === WebSocket.OPEN) {
|
||||
ws.send(textEncoder.encode(message));
|
||||
}
|
||||
};
|
||||
var sendData = function (data) {
|
||||
sendMessage('0' + data);
|
||||
};
|
||||
var unloadCallback = function (event) {
|
||||
var message = 'Close terminal? this will also terminate the command.';
|
||||
(event || window.event).returnValue = message;
|
||||
return message;
|
||||
};
|
||||
var zsentry = new Zmodem.Sentry({
|
||||
to_terminal: function _to_terminal(octets) {
|
||||
var buffer = new Uint8Array(octets).buffer;
|
||||
term.write(textDecoder.decode(buffer));
|
||||
},
|
||||
|
||||
sender: function _ws_sender_func(octets) {
|
||||
var array = new Uint8Array(octets.length + 1);
|
||||
array[0] = '0'.charCodeAt(0);
|
||||
array.set(new Uint8Array(octets), 1);
|
||||
ws.send(array.buffer);
|
||||
},
|
||||
|
||||
on_retract: function _on_retract() {
|
||||
// console.log('on_retract');
|
||||
},
|
||||
|
||||
on_detect: function _on_detect(detection) {
|
||||
term.off('data');
|
||||
var zsession = detection.confirm();
|
||||
var promise = zsession.type === 'send' ? handleSend(zsession) : handleReceive(zsession);
|
||||
promise.catch(console.error.bind(console)).then(function () {
|
||||
hideModal();
|
||||
term.on('data', sendData);
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
ws.binaryType = 'arraybuffer';
|
||||
|
||||
ws.onopen = function(event) {
|
||||
console.log('Websocket connection opened');
|
||||
wsError = false;
|
||||
sendMessage(JSON.stringify({AuthToken: authToken}));
|
||||
pingTimer = setInterval(function() {
|
||||
sendMessage('1');
|
||||
}, 30 * 1000);
|
||||
|
||||
if (typeof term !== 'undefined') {
|
||||
term.destroy();
|
||||
}
|
||||
|
||||
term = new Terminal({
|
||||
fontSize: 13,
|
||||
fontFamily: '"Menlo for Powerline", Menlo, Consolas, "Liberation Mono", Courier, monospace'
|
||||
});
|
||||
|
||||
term.on('resize', function(size) {
|
||||
if (ws.readyState === WebSocket.OPEN) {
|
||||
sendMessage('2' + JSON.stringify({columns: size.cols, rows: size.rows}));
|
||||
}
|
||||
window.removeEventListener('beforeunload', unloadCallback);
|
||||
clearInterval(pingTimer);
|
||||
// 1000: CLOSE_NORMAL
|
||||
if (event.code !== 1000 && autoReconnect > 0) {
|
||||
setTimeout(openWs, autoReconnect * 1000);
|
||||
}
|
||||
};
|
||||
setTimeout(function() {
|
||||
term.showOverlay(size.cols + 'x' + size.rows);
|
||||
}, 500);
|
||||
});
|
||||
|
||||
term.on('data', sendData);
|
||||
|
||||
while (terminalContainer.firstChild) {
|
||||
terminalContainer.removeChild(terminalContainer.firstChild);
|
||||
}
|
||||
|
||||
term.open(terminalContainer, true);
|
||||
|
||||
// https://stackoverflow.com/a/27923937/1727928
|
||||
window.addEventListener('resize', function() {
|
||||
clearTimeout(window.resizedFinished);
|
||||
window.resizedFinished = setTimeout(function () {
|
||||
term.fit();
|
||||
}, 250);
|
||||
});
|
||||
window.addEventListener('beforeunload', unloadCallback);
|
||||
term.fit();
|
||||
};
|
||||
|
||||
ws.onmessage = function(event) {
|
||||
var cmd = String.fromCharCode(new DataView(event.data).getUint8()),
|
||||
data = event.data.slice(1);
|
||||
switch(cmd) {
|
||||
case '0':
|
||||
zsentry.consume(data);
|
||||
break;
|
||||
case '1': // pong
|
||||
break;
|
||||
case '2':
|
||||
document.title = textDecoder.decode(data);
|
||||
break;
|
||||
case '3':
|
||||
var preferences = JSON.parse(textDecoder.decode(data));
|
||||
Object.keys(preferences).forEach(function(key) {
|
||||
console.log('Setting ' + key + ': ' + preferences[key]);
|
||||
term.setOption(key, preferences[key]);
|
||||
});
|
||||
break;
|
||||
case '4':
|
||||
autoReconnect = JSON.parse(textDecoder.decode(data));
|
||||
console.log('Enabling reconnect: ' + autoReconnect + ' seconds');
|
||||
break;
|
||||
default:
|
||||
console.log('Unknown command: ' + cmd);
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
ws.onclose = function(event) {
|
||||
console.log('Websocket connection closed with code: ' + event.code);
|
||||
if (term) {
|
||||
term.off('data');
|
||||
term.off('resize');
|
||||
if (!wsError) {
|
||||
term.showOverlay('Connection Closed', null);
|
||||
}
|
||||
}
|
||||
window.removeEventListener('beforeunload', unloadCallback);
|
||||
clearInterval(pingTimer);
|
||||
// 1000: CLOSE_NORMAL
|
||||
if (event.code !== 1000 && autoReconnect > 0) {
|
||||
setTimeout(openWs, autoReconnect * 1000);
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
if (document.readyState === 'complete' || document.readyState !== 'loading') {
|
||||
openWs();
|
||||
})();
|
||||
} else {
|
||||
document.addEventListener('DOMContentLoaded', openWs);
|
||||
}
|
||||
@@ -1,58 +1,68 @@
|
||||
// ported from hterm.Terminal.prototype.showOverlay
|
||||
// https://chromium.googlesource.com/apps/libapps/+/master/hterm/js/hterm_terminal.js
|
||||
|
||||
Terminal.prototype.showOverlay = function(msg, timeout) {
|
||||
if (!this.overlayNode_) {
|
||||
if (!this.element)
|
||||
(function (overlay) {
|
||||
module.exports = overlay(require('xterm').Terminal);
|
||||
})(function (Terminal) {
|
||||
var exports = {};
|
||||
|
||||
exports.showOverlay = function(msg, timeout) {
|
||||
if (!this.overlayNode_) {
|
||||
if (!this.element)
|
||||
return;
|
||||
this.overlayNode_ = document.createElement('div');
|
||||
this.overlayNode_.style.cssText = (
|
||||
'border-radius: 15px;' +
|
||||
'font-size: xx-large;' +
|
||||
'opacity: 0.75;' +
|
||||
'padding: 0.2em 0.5em 0.2em 0.5em;' +
|
||||
'position: absolute;' +
|
||||
'-webkit-user-select: none;' +
|
||||
'-webkit-transition: opacity 180ms ease-in;' +
|
||||
'-moz-user-select: none;' +
|
||||
'-moz-transition: opacity 180ms ease-in;');
|
||||
|
||||
this.overlayNode_.addEventListener('mousedown', function(e) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
}, true);
|
||||
}
|
||||
this.overlayNode_.style.color = "#101010";
|
||||
this.overlayNode_.style.backgroundColor = "#f0f0f0";
|
||||
|
||||
this.overlayNode_.textContent = msg;
|
||||
this.overlayNode_.style.opacity = '0.75';
|
||||
|
||||
if (!this.overlayNode_.parentNode)
|
||||
this.element.appendChild(this.overlayNode_);
|
||||
|
||||
var divSize = this.element.getBoundingClientRect();
|
||||
var overlaySize = this.overlayNode_.getBoundingClientRect();
|
||||
|
||||
this.overlayNode_.style.top =
|
||||
(divSize.height - overlaySize.height) / 2 + 'px';
|
||||
this.overlayNode_.style.left = (divSize.width - overlaySize.width) / 2 + 'px';
|
||||
|
||||
var self = this;
|
||||
|
||||
if (this.overlayTimeout_)
|
||||
clearTimeout(this.overlayTimeout_);
|
||||
|
||||
if (timeout === null)
|
||||
return;
|
||||
this.overlayNode_ = document.createElement('div');
|
||||
this.overlayNode_.style.cssText = (
|
||||
'border-radius: 15px;' +
|
||||
'font-size: xx-large;' +
|
||||
'opacity: 0.75;' +
|
||||
'padding: 0.2em 0.5em 0.2em 0.5em;' +
|
||||
'position: absolute;' +
|
||||
'-webkit-user-select: none;' +
|
||||
'-webkit-transition: opacity 180ms ease-in;' +
|
||||
'-moz-user-select: none;' +
|
||||
'-moz-transition: opacity 180ms ease-in;');
|
||||
|
||||
this.overlayNode_.addEventListener('mousedown', function(e) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
}, true);
|
||||
}
|
||||
this.overlayNode_.style.color = "#101010";
|
||||
this.overlayNode_.style.backgroundColor = "#f0f0f0";
|
||||
this.overlayTimeout_ = setTimeout(function() {
|
||||
self.overlayNode_.style.opacity = '0';
|
||||
self.overlayTimeout_ = setTimeout(function() {
|
||||
if (self.overlayNode_.parentNode)
|
||||
self.overlayNode_.parentNode.removeChild(self.overlayNode_);
|
||||
self.overlayTimeout_ = null;
|
||||
self.overlayNode_.style.opacity = '0.75';
|
||||
}, 200);
|
||||
}, timeout || 1500);
|
||||
};
|
||||
|
||||
this.overlayNode_.textContent = msg;
|
||||
this.overlayNode_.style.opacity = '0.75';
|
||||
Terminal.prototype.showOverlay = exports.showOverlay;
|
||||
|
||||
if (!this.overlayNode_.parentNode)
|
||||
this.element.appendChild(this.overlayNode_);
|
||||
|
||||
var divSize = this.element.getBoundingClientRect();
|
||||
var overlaySize = this.overlayNode_.getBoundingClientRect();
|
||||
|
||||
this.overlayNode_.style.top =
|
||||
(divSize.height - overlaySize.height) / 2 + 'px';
|
||||
this.overlayNode_.style.left = (divSize.width - overlaySize.width) / 2 + 'px';
|
||||
|
||||
var self = this;
|
||||
|
||||
if (this.overlayTimeout_)
|
||||
clearTimeout(this.overlayTimeout_);
|
||||
|
||||
if (timeout === null)
|
||||
return;
|
||||
|
||||
this.overlayTimeout_ = setTimeout(function() {
|
||||
self.overlayNode_.style.opacity = '0';
|
||||
self.overlayTimeout_ = setTimeout(function() {
|
||||
if (self.overlayNode_.parentNode)
|
||||
self.overlayNode_.parentNode.removeChild(self.overlayNode_);
|
||||
self.overlayTimeout_ = null;
|
||||
self.overlayNode_.style.opacity = '0.75';
|
||||
}, 200);
|
||||
}, timeout || 1500);
|
||||
};
|
||||
return exports;
|
||||
});
|
||||
Reference in New Issue
Block a user