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

Question

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

我已经尝试了一些方法，但还没有找到任何允许这种用例的方法。

我看到可以使用xterm.js在网页上显示终端，如此处所述，但似乎没有太多关于如何链接实际终端以显示实时输出的文档。不过，我认为可以通过某种形式的Web套接字来捕获输出。

我也看到了一些使用node.js中的child_process.exec发送命令到终端的方法，但我很难找到将两者连接起来的任何东西。

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

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

谢谢

- Luke

---

https://github.com/tsl0922/ttyd 的中文翻译如下： - undefined

我更希望的是类似这样的东西，例如，如果点击的按钮将"ls"命令发送到bash终端，网页上的终端窗口将显示"ls"命令的实时输出，但网页上的终端窗口不具有交互功能，只用于显示输出，而不能允许用户从中运行任何命令。 - undefined

Answer 1

构建终端是一个复杂的需求集合。并不是说你不应该尝试，因为在这个过程中你会学到很多东西。但如果你需要一个开箱即用的解决方案，考虑看看xterm.js。

- thclark

Answer 2

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>

你是不是指的是这样的？

- Daniil Loban

---

有点儿。基本上我想要的是，当用户点击按钮时，例如发送"ls"命令，该命令将被发送到一个Ubuntu服务器上的后端终端，然后我希望该命令在远程服务器上的终端中产生的输出能够实时显示在网页上的非交互式终端窗口中供用户查看。如果这样说得通的话？ - undefined

我明白了。你需要编写一个后端程序，在后端通过进程运行一个命令，并将输出返回给客户端。 - undefined

是的，没错，我就是找不到能将这两者结合起来的解决方案 :/ - undefined

Answer 3

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

感谢您的帮助。

- Luke

---

请告诉我你想出了什么计划？ - undefined

这并没有回答问题，只是说明你有一个答案，并且没有足够的细节可以重新呈现它。 - undefined

下次最好说出你做了什么 - undefined

我最终通过使用CSS/HTML设计了一个标准的终端窗口，用来显示我想要的输出。用户可以点击按钮运行请求的命令，客户端的Javascript会将请求的命令发送到服务器，由PHP处理并在服务器上执行该命令作为bash命令。然后PHP代码会捕获命令的输出并将其保存在一个文件中，然后我会使用PHP将其作为服务器的响应发送回客户端，客户端会捕获响应并在终端窗口中输出。 - undefined

可能不是最高效的方式，但在我有限的时间内，它完全按照我的期望运作，并且很快就得到了回应。 - undefined