Display terminal output live onto webpage

Question

I'm trying to create a web page where the user will press a button, and it will send some code presented in a div to the terminal which will be executed, I would then want the live output of that code to be displayed in a terminal like window on my page.

I have looked at some ways to do this but haven't really found anything that allows this type of use case.

I saw a way a terminal can be displayed on a webpage as mentioned here using xterm.js but there doesn't seem to be much documentation as to how to link this with an actual terminal to display live output. However, I'd assume it is done via some form of web sockets to capture the output.

I have also seen ways on how to send commands to a terminal using child_process.exec in node.js but I'm struggling to find anything to link the two together.

I don't want the users to be able to interact or run code from the terminal window on the page I would just like it to show the output of the code when they press the button.

Does anyone know of any technologies that could facilitate this kind of use case? Possibly something in Python but my webpage currently uses html and javascript. I understand this won't be possible with just client side code and I will need a server side langauge but preferably something that intergrates with javascript nicely.

Thanks

Answer 1

I have managed to create my own solution to this with a mixture of JavaScript, Bash and PHP. I also created my own terminal window design to display the returned response.

Thanks for the assistance.

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>

Did you mean something like that?