Simulating Linux Terminal in Browser

Simulating linux terminal in browser

The full linux is http://docker.io, the rest is https://github.com/Runnable/dockworker

We're not simulating the terminal but as Kyle says, replicating the terminal over websockets (with an ajax fallback).

In the browser we're using https://github.com/chjj/term.js which was derived from Fabrice Bellard's emulator. It handles the output, and also the keystroke capture.

Is there any website having command line environment of Linux, for practicing commands?

There is a quite a good one here:

Javascript PC Emulator - http://bellard.org/jslinux/

---

Related:

• How does Linux emulator in Javascript by Fabrice Bellard work?
• Simulating linux terminal in browser

Bash shell simulation in browser

I made a solution based on the example made by Kos, you can see the fully working demo here.

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/q.js/1.0.0/q.js"></script>
<div id="wnd"></div>
<div id="log"></div>

<textarea rows="11" cols="50">
% cat example.c
#include <stdio.h>
int main()
{
  printf("Goodbye Cruel World!\n");
  return 0;
}
% make example.c -o example
% ./example
Goodbye Cruel World!
</textarea>

CSS

body {
  background: black;
}
#wnd {
  background: #232;
  border-radius: .2em;
  white-space: pre-wrap;
  padding: .5em;
  font-family: "Consolas", "Ubuntu Mono", "Monaco", monospace;
  color: white;
}
.prompt {
  color: #99aaee;
}
.cmd {
  color: #9e9e9C;
}

JQuery

var prompt;

function setPrompt(usr, domain)
{
  prompt = usr + '@' + domain + ' %';
}

function addOutput(s) {
  $('<div>').text(s).appendTo(wnd);
  return Q.delay(100);
//  return addPrompt();
}

function addInput(s) {
  var l = $('.prompt:last');
var e = $('<span>').addClass('cmd').appendTo(l);

  return addLettersRecursive(e, s);
}

function addPrompt() {
  var l = $('<div>').text(prompt).addClass('prompt').appendTo(wnd);
  return Q.delay(900);
}

function addLettersRecursive(container, s) {
  container.append(s.charAt(0)); // dangerous :(
  var row_complete = Q.defer();
  Q.delay(100).then(function() {
    if (s.length <= 1) {
      row_complete.resolve();
    }
    addLettersRecursive(container, s.substr(1)).then(function() {
      row_complete.resolve();
    })
  });
  return row_complete.promise;
}

$( document ).ready(function() {
  $('textarea').hide();

  setPrompt('inge', 'sparkledb.net');

  var lines = $('textarea').val().split('\n');

  var promise = new Q();

  promise = promise.then(function() 
  {  
    lines.forEach( function(item) {
      if (item[0] == '%')
      {
        promise = promise.then(function() 
        { return addPrompt(); })
        promise = promise.then(function() 
        { return addInput(item.substr(1)); })
      }
      else
      {
        promise = promise.then(function() 
        { return addOutput(item); })
      }
    })
  })
  promise.done();

});

Simulate chrome/firefox browser (for javascript testing)

After some search i will be using phantomjs, http://phantomjs.org/

What's the best way to simulate a DOS or Terminal screen in a web page?

You can check out these JavaScript terminals found online via Google:

• http://www.masswerk.at/jsuix/
• http://terminal.jcubic.pl/

Also, some of my French friends are working on this:

• http://webshell.io/home

Simulate a JavaScript Button click with a Linux/Windows CLI line tool (http request)

You can accomplish the desired behavior using Chrome Driver and cURL. But prepare, it will take a lot of steps :)

You need to perform the following actions:

• Download the driver from the aforementioned link and unarchive it to any folder
• Start the driver (./chromedriver & on Unix or chromedriver.exe on Windows). You'll see the message, find the port. In my case the message was%

Starting ChromeDriver 80.0.3987.106 (f68069574609230cf9b635cd784cfb1bf81bb53a-refs/branch-heads/3987@{#882}) on port 9515

• Connect to the driver session via cURL curl -d '{ "desiredCapabilities": { "caps": { "nativeEvents": false, "browserName": "chrome", "version": "", "platform": "ANY" } } }' http://localhost:9515/session. In the output of this command, find the sessionId, in my case it was e2fafa7a017a6be7136a02af694f5493
• Open the page with the button curl -d '{"url":"<your url>"}' http://localhost:9515/session/e2fafa7a017a6be7136a02af694f5493/url
• Find the button (I use name as a locator, but I believe class will work as well) curl -d '{"using":"name","value":"<your-value>"}' http://localhost:9515/session/27f4262ab044392b05138540055a8fd6/element. In the output of this command you have to find the ELEMENT value. In my case it was 0.044231492091793445-1
• Finally, click it! curl -X POST http://localhost:9515/session/e2fafa7a017a6be7136a02af694f5493/element/0.044231492091793445-1/click
• You did it, now close the session curl -X DELETE http://localhost:9515/session/e2fafa7a017a6be7136a02af694f5493

As you see, you have to perform a lot of actions, but I believe it matches your requirements. For more information please refer to this and this links. Good luck!

How to execute Linux command using client/server architecture

I would strong recommend you to use JavaScript at both ends as you're dealing with servers now so you need hyper fast execution of the app.

I suggest you following things for your project :

1. Node.JS -- for Backend
2. AngularJs -- for frontend
3. SSH2 npm module
4. MongoDB
5. Mongoose ODM

node.js will help in your project as it fast and asynchronous in nature. it's fast and compatible.

Angular.js will help you at frontend as it doesn't render or executes whole HTML it do only a part or view of it, so it becomes hyper fast in nature.

For if you want to use database too. Then my recommendation would be using MONGODB with mongoose as its ODM.

SSH2 wrapper is an advance tool for the purpose you're looking at.

Note: LAMP has been killed almost by MEAN stack. So using PHP would increase your writing of code as well as task of maintaining it too.

How does Linux emulator in Javascript by Fabrice Bellard work?

At first, I also thought this is just a terminal emulator connecting you to a VM but it isn't. If you watch the network connections, you can see that, after bootup, no data is transmitted anymore.

So it's real.

A CPU is not something magic; in fact all it does is read bytes from memory and modify the RAM in accordance to what the commands mean.

In this case, the CPU emulator is based on the qemu code. What he does is he creates an array of functions where the index is the next byte at the PC (program counter).

Now all you need is a simple linux distribution that doesn't need any exotic CPU commands like floating point arithmetic or MMX code and voila.

What's interesting is the speed of the beast. The whole thing is a bit sluggish but then, it's JavaScript in a browser.

Conclusion: Impressive. Can't wait to see a C64 emulator :-)

---

Related Topics