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

【问题标题】：Display terminal output live onto webpage将终端输出实时显示到网页上
【发布时间】：2021-02-03 14:04:07
【问题描述】：

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

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

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

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

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

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

谢谢

【问题讨论】：

github.com/tsl0922/ttyd ?
我更多的是寻找类似的东西，例如，如果单击的按钮将“ls”命令发送到 bash 终端，则网页上的终端窗口将显示实时输出“ls”命令，但网页上的终端窗口不是交互式的，仅用于显示输出，不允许用户从中运行任何命令

标签： javascript python html node.js xtermjs

【解决方案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>

你的意思是这样的吗？

【讨论】：

有点。基本上我正在寻找的是当用户单击按钮时，例如它发送“ls”命令，该命令将被发送到 ubuntu 服务器上的后端终端，然后我想要那个“ls”的输出" 发送到远程服务器上的终端的命令，然后实时输出到网页上的非交互式终端窗口供用户查看？如果这有意义？
我现在明白了。你需要写一个后端，通过进程在后端运行一个命令，并将输出返回给客户端。
是的没错，我只是似乎找不到任何可以将两者结合起来的解决方案：/

【解决方案2】：

我已经成功地使用 JavaScript、Bash 和 PHP 混合创建了自己的解决方案。我还创建了自己的终端窗口设计来显示返回的响应。

感谢您的帮助。

【讨论】：