将终端输出实时显示到网页上

Question

我正在尝试创建一个网页，用户将在其中按下一个按钮，它会将 div 中显示的一些代码发送到将要执行的终端，然后我想要实时该代码的输出将显示在终端中，例如我页面上的 window。

我已经研究了一些方法来做到这一点，但还没有真正找到任何允许这种类型的用例。

我看到了一种使用 xterm.js 提到的可以在网页上显示终端的方法，但是关于如何 link 这似乎没有太多文档用一个实际的终端来显示实时输出。但是，我假设它是通过某种形式的网络套接字来捕获输出的。

我还在 node.js 中看到了如何使用 child_process.exec 将命令发送到终端的方法，但我正在努力寻找 link 将两者结合在一起的方法。

我不希望用户能够在页面上从终端 window 进行交互或运行代码我只想在他们按下时显示代码的输出按钮。

有谁知道可以促进这种用例的技术吗？可能是 Python 中的内容，但我的网页目前使用 html 和 javascript。我知道仅使用客户端代码是不可能的，我需要一个服务器端语言，但最好是与 javascript 很好地集成的东西。

谢谢

Answer 1

const btnTo = document.querySelector('#btnTo');
const btnFrom = document.querySelector('#btnFrom');
const term = document.querySelector('#term');

btnTo.addEventListener('click', grab, false);
btnFrom.addEventListener('click', update, false);
function grab (){
  const test = document.querySelector('.test');
  term.textContent =  test.outerHTML;
}
function update (){
  const test = document.querySelector('.test');
  test.outerHTML = term.textContent;
}

button {
 display: inline;
}
.test{
 font-size: .9rem;
}
.terminal {
  display: block;
  position: absolute;
  bottom: 0;
  color: white;
  background-color: black;
  height: 40vh;
  width: 95%;
}

<div class=test>
  <p>Hello World! You can edit it in terminal and even use sockets for backend editing</p>
</div>
<button id="btnTo">to terminal</button>
<button id="btnFrom">from terminal</button>
<pre id="term" class="terminal" contenteditable></pre>

你的意思是这样的吗？

Answer 2

我已经设法通过混合 JavaScript、Bash 和 PHP 来创建自己的解决方案。我还创建了自己的终端 window 设计来显示返回的响应。

感谢您的帮助。

将终端输出实时显示到网页上

Display terminal output live onto webpage

html

javascript

python

node.js

xtermjs