Added ping mechanism for keeping websocket alive (#17) (#18)

Makes sure the websocket stays open in case behind a webserver

* Added ping mechanism for keeping websocket alive (#17)
* Better implementation of ping (#17)
* Added support for setting ping interval (#17)

The ping interval is configurable via `src/client/config.js`:

```
{
  xterm: {
    ping: 30000
  }
}
```

Author: andersevenrud

attach.js

@@ -0,0 +1,72 @@
+// This is a custom AttachAddon implementation
+
+function addSocketListener(socket, type, handler) {
+  socket.addEventListener(type, handler);
+  return {
+    dispose: () => {
+      if (!handler) {
+        // Already disposed
+        return;
+      }
+      socket.removeEventListener(type, handler);
+    }
+  };
+}
+
+export class AttachAddon {
+  constructor(socket, options) {
+    this._socket = socket;
+    // always set binary type to arraybuffer, we do not handle blobs
+    this._socket.binaryType = 'arraybuffer';
+    this._bidirectional = (options && options.bidirectional === false) ? false : true;
+    this._disposables = [];
+  }
+
+  activate(terminal) {
+    this._disposables.push(
+      addSocketListener(this._socket, 'message', ev => {
+        const data = ev.data;
+        if (typeof data === 'string') {
+          const message = JSON.parse(data);
+          if (message.content) {
+            terminal.write(message.content);
+          }
+        } else {
+          terminal.write(new Uint8Array(data));
+        }
+      })
+    );
+
+    if (this._bidirectional) {
+      this._disposables.push(terminal.onData(data => this._sendData(data)));
+      this._disposables.push(terminal.onBinary(data => this._sendBinary(data)));
+    }
+
+    this._disposables.push(addSocketListener(this._socket, 'close', () => this.dispose()));
+    this._disposables.push(addSocketListener(this._socket, 'error', () => this.dispose()));
+  }
+
+  dispose() {
+    this._disposables.forEach(d => d.dispose());
+  }
+
+  _sendData(data) {
+    // TODO: do something better than just swallowing
+    // the data if the socket is not in a working condition
+    if (this._socket.readyState !== 1) {
+      return;
+    }
+    this._socket.send(JSON.stringify({data}));
+  }
+
+  _sendBinary(data) {
+    if (this._socket.readyState !== 1) {
+      return;
+    }
+    const buffer = new Uint8Array(data.length);
+    for (let i = 0; i < data.length; ++i) {
+      buffer[i] = data.charCodeAt(i) & 255;
+    }
+    this._socket.send(buffer);
+  }
+}

index.js

@@ -30,8 +30,8 @@
 
 import {Terminal} from 'xterm';
 import {FitAddon} from 'xterm-addon-fit';
-import {AttachAddon} from 'xterm-addon-attach';
 import * as clipboard from 'clipboard-polyfill';
+import {AttachAddon} from './attach.js';
 
 import './index.scss';
 import osjs from 'osjs';
@@ -54,6 +54,7 @@ const createConnection = async (core, proc, win, term) => {
   term.writeln('Requesting connection....');
 
   const {uuid} = await proc.request('/create', {method: 'post', body: params});
+  const pingInterval = core.config('xterm.ping', 30000);
 
   const ws = proc.socket('/socket', {
     socket: {
@@ -64,11 +65,18 @@ const createConnection = async (core, proc, win, term) => {
   const attachAddon = new AttachAddon(ws.connection);
   term.loadAddon(attachAddon);
 
+  let pinger;
   let closed = false;
   let pinged = false;
   let pid = -1;
 
-  ws.on('open', () => ws.send(uuid));
+  ws.on('open', () => {
+    ws.send(uuid);
+
+    pinger = setInterval(() => {
+      ws.send(JSON.stringify({action: 'ping'}));
+    }, pingInterval);
+  });
 
   ws.on('message', (ev) => {
     if (!pinged) {
@@ -80,6 +88,7 @@ const createConnection = async (core, proc, win, term) => {
   ws.on('close', () => {
     term.writeln('... Disconnected. Press any key to close terminal ...');
     closed = true;
+    clearInterval(pinger);
   });
 
   term.onKey(() => {

server.js

@@ -76,12 +76,25 @@ const createTerminal = (core, ws, options = {}, args = []) => {
 
   term.onData((data) => {
     try {
-      ws.send(data);
+      // This is a workaround for ping wrapper
+      ws.send(JSON.stringify({content: data}));
     } catch (e) {
       console.warn(e);
     }
   });
-  ws.on('message', (data) => term.write(data));
+
+  ws.on('message', (data) => {
+    // This is a workaround for ping wrapper
+    if (typeof data === 'string') {
+      const message = JSON.parse(data);
+      if (message.data) {
+        term.write(message.data);
+      }
+    } else {
+      term.write(data);
+    }
+  });
+
   ws.on('close', () => kill());
 
   terminals.push({