Implement fully featured terminal demo w/ static fallback

diff --git a/Dockerfile b/Dockerfile
new file mode 100644 (file)
index 0000000..105e997
--- /dev/null
+++ b/Dockerfile
@@ -0,0 +1,4 @@
+FROM node:4-onbuild
+MAINTAINER Paris Kasidiaris <paris@sourcelair.com>
+
+EXPOSE 3000

diff --git a/Procfile.dev b/Procfile.dev
index c7a89ee1041219a1e7a90f6a377089cda284740e..063b78f463143ec8bdbc65a9920982dfea2d4ea1 100644 (file)
--- a/Procfile.dev
+++ b/Procfile.dev
@@ -1 +1 @@
-web: ./bin/server
+web: npm start

diff --git a/bin/server b/bin/server
index b5e9d49a09af8f0ebd45af0647a8a2d84d451960..91f32dbaaa84c3f1de89f453c72a0c1b6484de02 100755 (executable)
--- a/bin/server
+++ b/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

diff --git a/demo/app.js b/demo/app.js
new file mode 100644 (file)
index 0000000..a7b7947
--- /dev/null
+++ b/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);

diff --git a/demo/index.html b/demo/index.html
index d19894973543408f97d751c1223455b47af05a31..92ccc94ca3636cabf75cd2cfcd9929ea9dff55b7 100644 (file)
--- a/demo/index.html
+++ b/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>
@@ -16,4 +17,4 @@
         </h1>
         <div id="terminal-container"></div>
     </body>
-</html>
\ No newline at end of file
+</html>

diff --git a/demo/main.js b/demo/main.js
index 7bca13d4f9aaabbd417ffc00a5996bd1adaa289b..70d64c5900c83767a493530c74a1f2e12a892025 100644 (file)
--- a/demo/main.js
+++ b/demo/main.js
@@ -1,38 +1,60 @@
 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 () {
-  term.write('\r\n' + shellprompt);
-};
+function runRealTerminal() {
+  term.attach(socket);
+  term._initialized = true;
+}
 
-term.writeln('Welcome to xterm.js');
-term.writeln('Just type some keys in the prompt below.');
-term.writeln('');
-term.prompt();
+function runFakeTerminal() {
+  if (term._initialized) {
+    return;
+  }
+
+  term._initialized = true;
+
+  var shellprompt = '$ ';
+
+  term.prompt = function () {
+    term.write('\r\n' + shellprompt);
+  };
 
-term.on('key', function (key, ev) {
-  var printable = (
-    !ev.altKey && !ev.altGraphKey && !ev.ctrlKey && !ev.metaKey
-  );
+  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();
 
-  if (ev.keyCode == 13) {
-    term.prompt();
-  } else if (ev.keyCode == 8) {
-    /*
+  term.on('key', function (key, ev) {
+    var printable = (
+      !ev.altKey && !ev.altGraphKey && !ev.ctrlKey && !ev.metaKey
+    );
+
+    if (ev.keyCode == 13) {
+      term.prompt();
+    } else if (ev.keyCode == 8) {
+      /*
      * Do not delete the prompt
      */
-    if (term.x > 2) {
-      term.write('\b \b');
+      if (term.x > 2) {
+        term.write('\b \b');
+      }
+    } else if (printable) {
+      term.write(key);
     }
-  } else if (printable) {
-    term.write(key);
-  }
-});
+  });
+
+  term.on('paste', function (data, ev) {
+    term.write(data);
+  });
+}
 
-term.on('paste', function (data, ev) {
-  term.write(data);
-});
+socket.onopen = runRealTerminal;
+socket.onclose = runFakeTerminal;
+socket.onerror = runFakeTerminal;

diff --git a/package.json b/package.json
index 0e0d8bd189d3f19bec718c365dc75172bae3a758..59461ed24e01c591b3b4b168dd074854c4506202 100644 (file)
--- a/package.json
+++ b/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"
+  }
 }