Implement fully featured terminal demo w/ static fallback

Dockerfile

@@ -0,0 +1,4 @@
+FROM node:4-onbuild
+MAINTAINER Paris Kasidiaris <paris@sourcelair.com>
+
+EXPOSE 3000

Procfile.dev

@@ -1 +1 @@
-web: ./bin/server
+web: npm start

bin/server

@@ -1,4 +1,4 @@
 #! /usr/bin/env sh
 
 # Development server for xterm.js
-browser-sync start --server --port 8000 --files="**" --no-ui --index index.html --directory
+node demo/app.js

demo/app.js

@@ -0,0 +1,49 @@
+var express = require('express');
+var app = express();
+var expressWs = require('express-ws')(app);
+var pty = require('pty.js');
+
+app.use('/src', express.static(__dirname + '/../src'));
+app.use('/addons', express.static(__dirname + '/../addons'));
+
+app.get('/', function(req, res){
+  res.sendFile(__dirname + '/index.html');
+});
+
+app.get('/style.css', function(req, res){
+  res.sendFile(__dirname + '/style.css');
+});
+
+app.get('/main.js', function(req, res){
+  res.sendFile(__dirname + '/main.js');
+});
+
+app.ws('/bash', function(ws, req) {
+  /**
+   * Open bash terminal and attach it
+   */
+  var term = pty.spawn('bash', [], {
+    name: 'xterm-color',
+    cols: 80,
+    rows: 24,
+    cwd: process.env.PWD,
+    env: process.env
+  });
+
+  term.on('data', function(data) {
+    ws.send(data);
+  });
+  ws.on('message', function(msg) {
+    term.write(msg);
+  });
+  ws.on('close', function () {
+    console.log('close');
+    process.kill(term.pid);
+  });
+});
+
+var port = process.env.PORT || 3000,
+    host = '0.0.0.0';
+
+console.log('App listening to ' + host + ':' + port);
+app.listen(port, host);

demo/index.html

@@ -6,6 +6,7 @@
         <link rel="stylesheet" href="../addons/fullscreen/fullscreen.css" />
         <link rel="stylesheet" href="style.css" />
         <script src="../src/xterm.js" ></script>
+        <script src="../addons/attach/attach.js" ></script>
         <script src="../addons/fit/fit.js" ></script>
         <script src="../addons/fullscreen/fullscreen.js" ></script>
         <script src="main.js" defer ></script>

demo/main.js

@@ -1,20 +1,37 @@
 var terminalContainer = document.getElementById('terminal-container'),
     term = new Terminal(),
-    shellprompt = '$ ';
+    protocol = (location.protocol === 'https:') ? 'wss://' : 'ws://',
+    socketURL = protocol + location.hostname + ((location.port) ? (':' + location.port) : '') + '/bash',
+    socket = new WebSocket(socketURL);
 
 term.open(terminalContainer);
 term.fit();
 
-term.prompt = function () {
+function runRealTerminal() {
+  term.attach(socket);
+  term._initialized = true;
+}
+
+function runFakeTerminal() {
+  if (term._initialized) {
+    return;
+  }
+
+  term._initialized = true;
+
+  var shellprompt = '$ ';
+
+  term.prompt = function () {
     term.write('\r\n' + shellprompt);
-};
+  };
 
-term.writeln('Welcome to xterm.js');
-term.writeln('Just type some keys in the prompt below.');
-term.writeln('');
-term.prompt();
+  term.writeln('Welcome to xterm.js');
+  term.writeln('This is a local terminal emulation, without a real terminal in the back-end.');
+  term.writeln('Type some keys and commands to play around.');
+  term.writeln('');
+  term.prompt();
 
-term.on('key', function (key, ev) {
+  term.on('key', function (key, ev) {
     var printable = (
       !ev.altKey && !ev.altGraphKey && !ev.ctrlKey && !ev.metaKey
     );
@@ -31,8 +48,13 @@ term.on('key', function (key, ev) {
     } else if (printable) {
       term.write(key);
     }
-});
+  });
 
-term.on('paste', function (data, ev) {
+  term.on('paste', function (data, ev) {
     term.write(data);
-});
+  });
+}
+
+socket.onopen = runRealTerminal;
+socket.onclose = runFakeTerminal;
+socket.onerror = runFakeTerminal;

package.json

@@ -4,5 +4,13 @@
   "ignore": ["demo", "test", ".gitignore"],
   "main": "src/xterm.js",
   "repository": "https://github.com/sourcelair/xterm.js",
-  "license": "MIT"
+  "license": "MIT",
+  "devDependencies": {
+    "express": "4.13.4",
+    "express-ws": "2.0.0-rc.1",
+    "pty.js": "0.3.0"
+  },
+  "scripts": {
+    "start": "bash bin/server"
+  }
 }