Question

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

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

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

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

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

有人知道可以促进这种用例的任何技术吗？可能是 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 的混合创建了自己的解决方案。我还创建了自己的终端窗口设计来显示返回的响应。

感谢您的帮助。

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

2 个答案: