|
<!DOCTYPE html> |
|
<!-- code from: https://youtu.be/mYx1CZJAffc --> |
|
<!-- Original Author: @KoharaKazuya --> |
|
<head> |
|
<title>Piping Terminal Share</title> |
|
<link rel="stylesheet" href="https://unpkg.com/xterm@4.1.0/css/xterm.css"> |
|
<meta name="viewport" content="width=device-width,initial-scale=1"> |
|
<style> |
|
body { |
|
background: black; |
|
color: white; |
|
} |
|
a { |
|
color: white; |
|
} |
|
</style> |
|
<script src="https://unpkg.com/xterm@4.1.0/lib/xterm.js"></script> |
|
</head> |
|
<body> |
|
<pre id="sender_script"></pre> |
|
<a href="https://github.com/nwtgck/piping-server">Piping Server</a>: <input type="text" id="piping_url" size="50"> |
|
<button id="start_btn">View terminal</button> |
|
<div id="terminal"></div> |
|
<script> |
|
var term = new Terminal(); |
|
term.open(document.getElementById("terminal")); |
|
|
|
function openRemoteStream(url) { |
|
var xhr = new XMLHttpRequest(); |
|
xhr.open("GET", url) |
|
|
|
var seenBytes = 0; |
|
|
|
xhr.onreadystatechange = function () { |
|
if (xhr.readyState === 3 || xhr.readyState === 4) { |
|
var newData = xhr.response.substr(seenBytes); |
|
seenBytes = xhr.responseText.length; |
|
console.log("new data"); |
|
term.write(newData); |
|
} |
|
if (xhr.readyState === 4) { |
|
alert("Session closed"); |
|
} |
|
console.log(xhr.readyState); |
|
}; |
|
|
|
xhr.onabort = function () { |
|
console.log("on abort") |
|
}; |
|
|
|
xhr.onerror = function () { |
|
console.log("on error"); |
|
}; |
|
|
|
xhr.send(); |
|
} |
|
|
|
// Define initial URL |
|
var initUrl = "https://ppng.io/" + randomStr(3); |
|
var pipingUrlInput = document.getElementById("piping_url"); |
|
pipingUrlInput.value = initUrl; |
|
|
|
function updateSenderScript(e){ |
|
document.getElementById("sender_script").innerText = |
|
"Sender(Linux): script -f >(curl -sSNT - " + pipingUrlInput.value + " > /dev/null )\n" + |
|
"Sender(Mac) : script -F >(curl -sSNT - " + pipingUrlInput.value + " > /dev/null )"; |
|
} |
|
pipingUrlInput.onkeyup = updateSenderScript; |
|
updateSenderScript(); |
|
|
|
var startBtn = document.getElementById("start_btn"); |
|
startBtn.onclick = function () { |
|
var url = pipingUrlInput.value; |
|
openRemoteStream(url); |
|
startBtn.setAttribute("disabled", ""); |
|
}; |
|
|
|
function randomStr(len){ |
|
var chars = ["a", "b", "c", "d", "e", "f", "h", "i", "j", "k", "m", "n", "p", "r", "s", "t", "u", "v", "w", "x", "y", "z", "2", "3", "4", "5", "6", "7", "8"]; |
|
var randomArr = window.crypto.getRandomValues(new Uint32Array(len)); |
|
return Array.from(randomArr).map(n => chars[n % chars.length]).join(''); |
|
} |
|
</script> |
|
</body> |
Try
Piping Terminal Share