How to display a terminal-like environment, that shows the output of Python scripts, within a web browser?
<p>I've recently finished my courses in HTML and CSS, and am now sailing into Javascript. I have a decent background in Python at the moment, and would like to utilize my experience for web programming.  </p>

<p>My question being, how could I go about creating a terminal environment that could display my python code within my HTML page? For example, if I had a script named <code>hello.py</code>, and it printed a <code>hello world</code> message to the user, how could I take that script, and display its outcome within my page, so when you loaded it up, it would read 'hello world'?</p>

<p>I hope this is clear. I'm not referencing using Python to display HTML, like a framework like Django, but rather how to take a script, run it, and display its output to a web page?   </p>

<p>Leaving aside the security problems, you can do this in several ways.</p>

<p>You can pursue a "stateless, sort of" approach, which is simpler, by displaying a fake user prompt in CSS and supplying a textarea or input area that manages to emulate a command line. When the user hits ENTER you would get the input, send it for execution to the local shell and capture the output, then display it back formatting it as a terminal would. This could be done better in AJAX, I think.</p>

<p>Since you work in Python this is <a href="http://stackoverflow.com/questions/28957258/twisted-run-local-shell-commands-with-pipeline">a related question and answer</a> for twisted.</p>

<p>The above method only allows you very simple (but still dangerous :-) ) interactions. If you launched a <code>ncurses</code> program or any kind of interactive program which attempts to read input, you'd get immediately stuck. This is enough to run your <code>hello.py</code>, however.</p>

<p>You can improve on the method using tested libraries such as <a href="http://terminal.jcubic.pl/" rel="nofollow">this jQuery plugin</a>.</p>

<p>A more complex way would be to allocate a terminal locally (one per each user session), capture all keyboard events and "echo" them to the terminal, and read the console. You would need to know how to offer a valid terminal environment with appropriate capabilities, and then you'd need to decode the program output (complete with ANSI terminal commands) and "rebuild" the (virtual) monitor appearance, then send this "monitor" view to the client browser to be displayed somehow (AJAX, websockets...). The results would be way better, but the effort would be proportionally greater.</p>

<p>This latter approach (in Python) leads to projects such as <a href="https://github.com/liftoff/GateOne" rel="nofollow">this</a>, or <a href="https://github.com/paradoxxxzero/butterfly" rel="nofollow">this</a>, which communicates with the client through websockets.</p>

<h1>UPDATE</h1>

<p>All this is <strong>not needed</strong> to do what you require; you seem to need something between a module executor (not sure of this) plus a chat function (this looks mandatory).</p>

<p>What you need is to <em>abstract</em> the input and output of your program so that it can "talk" to the web browser. In this case you might run your program as a daemon (there are modules that allow daemonizing a stdio-based program). Then, the user interface (you can use the jQuery plugin) collects player A's input and sends it to the program, collects the output and sends it back to A's screen. You need to think about temporizations and asynchronicity, or turn management: player A might type in five commands while player B slowly types only one. Also, going on, you'll have to manage sessions and disconnects/reconnects of users.</p>

<p>Unfortunately, the "Web" world is quite different in its approaches and problems from the "keyboard" world.</p>

python html web