alfredkrohmer/server.rb

## server.rb
require 'sinatra'
require 'sinatra-websocket'
require 'docker-api'
require 'pty'

set :server, 'thin'

def new_state
  {
    lock: Mutex.new,
    cond: ConditionVariable.new,
    fin:  false
  }
end

def notify(state)
  state[:lock].synchronize do
    state[:fin] = true
    state[:cond].signal
  end
end

def wait(state)
  state[:lock].synchronize do
    unless state[:fin]
      state[:cond].wait(state[:lock])
    end
  end
end

class WebSocketConnection < EventMachine::Connection
  def initialize(ws, state, container)
    @ws    = ws
    @state = state
    @container = container
  end

  def receive_data(data)
    @ws.send(data.force_encoding('utf-8'))
  rescue
    # exception kill the EventMachine
  end

  def unbind
    @ws.close_websocket
  rescue
    # exception kill the EventMachine
  ensure
    notify(@state)
    @container.delete force: true
  end
end

class Docker::Container
  def resize(rows, cols)
    connection.post(path_for(:resize), h: rows, w: cols)
  end

  def attach_websocket(ws)
    opts = {
      tty:    true,
      stdin:  true,
      stream: true,
      stdout: true,
      stderr: true
    }

    excon_params = {
      hijack_block: lambda do |socket|
        state = new_state

        # attach to Docker TCP connection and write everything to web socket
        EventMachine.next_tick { EventMachine.attach(socket, WebSocketConnection, ws, state, self) }

        # react on web socket events
        ws.onmessage do |msg|
          begin
            case msg[0]
            when 'd'
              # regular data
              socket.write(msg[1..-1])
            when 'r'
              # terminal resize
              resize *msg[1..-1].split(',', 2).map { |dim| dim.to_i }
            end
          rescue
            # exception kill the EventMachine
          end
        end
        ws.onclose do
          begin
            socket.close_write
          rescue
            # exception kill the EventMachine
          end
        end

        EventMachine.next_tick { yield } if block_given?

        Kernel.send(:wait, state)
      end
    }

    Thread.start do
      connection.post(
        path_for(:attach),
        opts,
        excon_params
      )

      puts 'fin'
    end
  end
end

def run_interactive_command_in_image(ws, image, cmd, binds = {}, opts = {})
  opts = {
    Image:      image,
    Entrypoint: cmd[0],
    Cmd:        cmd[1..-1],
    HostConfig: {
      Binds: binds.map { |from, to| "#{from}:#{to}" }
    },
    Tty:        true,
    OpenStdin:  true
  }.merge opts

  c = Docker::Container.create(opts)

  c.attach_websocket ws do
    c.start
  end
end

get '/' do
  erb :index
end

get '/terminal' do
  if !request.websocket?
    erb :terminal
  else
    request.websocket do |ws|
      ws.onopen do
        run_interactive_command_in_image ws, 'busybox', ['/bin/sh']
      end
    end
  end
end

__END__
@@ index
<!DOCTYPE html>
<html>
<body>
<a href="javascript:window.open('/terminal','Terminal','width=600,height=400')">open terminal</a>
</body>
</html>
@@ terminal
<!DOCTYPE html>
<html>
<head>
<style>
body {margin: 0;}
</style>
<script language="javascript" type="text/javascript" src="hterm_all.js"></script>
<script language="javascript" type="text/javascript" src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script>
hterm.defaultStorage = new lib.Storage.Memory();
$(document).ready(function() {
  // establish WebSocket connection
  var socket = new WebSocket('ws://' + window.location.hostname + ':8080/terminal');

  socket.onopen = function() {
    // set up hterm
    var terminal = new hterm.Terminal();

    socket.onmessage = function(msg) {
      // directly print data received from the socket
      terminal.io.print(msg.data);
    };
    socket.onclose = function(msg) {
      // notify user
      terminal.io.print("\r\nConnection to server lost.");
    };

    terminal.onTerminalReady = function() {
      var io = terminal.io.push();

      // keypress hook
      io.onVTKeystroke = io.sendString = function(str) {
        if (socket.readyState == 1) {
          // prefix with 'd' to indicate data
          socket.send('d' + str);
        }
      };

      // resize hook
      io.onTerminalResize = function(cols, rows) {
        if (socket.readyState == 1) {
          // prefix with 'r' to indicate resize
          socket.send('r' + rows + ',' + cols);
        }
      };

    };

    // actually install hterm
    terminal.decorate(document.querySelector('#terminal'));
    terminal.installKeyboard();
  };
});
</script>
</head>
  <body>
    <div id="terminal" style="width:100%; height:100%; position: absolute"></div>
  </body>
</html>
	require 'sinatra'
	require 'sinatra-websocket'
	require 'docker-api'
	require 'pty'

	set :server, 'thin'

	def new_state
	{
	lock: Mutex.new,
	cond: ConditionVariable.new,
	fin: false
	}
	end

	def notify(state)
	state[:lock].synchronize do
	state[:fin] = true
	state[:cond].signal
	end
	end

	def wait(state)
	state[:lock].synchronize do
	unless state[:fin]
	state[:cond].wait(state[:lock])
	end
	end
	end

	class WebSocketConnection < EventMachine::Connection
	def initialize(ws, state, container)
	@ws = ws
	@state = state
	@container = container
	end

	def receive_data(data)
	@ws.send(data.force_encoding('utf-8'))
	rescue
	# exception kill the EventMachine
	end

	def unbind
	@ws.close_websocket
	rescue
	# exception kill the EventMachine
	ensure
	notify(@state)
	@container.delete force: true
	end
	end

	class Docker::Container
	def resize(rows, cols)
	connection.post(path_for(:resize), h: rows, w: cols)
	end

	def attach_websocket(ws)
	opts = {
	tty: true,
	stdin: true,
	stream: true,
	stdout: true,
	stderr: true
	}

	excon_params = {
	hijack_block: lambda do \|socket\|
	state = new_state

	# attach to Docker TCP connection and write everything to web socket
	EventMachine.next_tick { EventMachine.attach(socket, WebSocketConnection, ws, state, self) }

	# react on web socket events
	ws.onmessage do \|msg\|
	begin
	case msg[0]
	when 'd'
	# regular data
	socket.write(msg[1..-1])
	when 'r'
	# terminal resize
	resize *msg[1..-1].split(',', 2).map { \|dim\| dim.to_i }
	end
	rescue
	# exception kill the EventMachine
	end
	end
	ws.onclose do
	begin
	socket.close_write
	rescue
	# exception kill the EventMachine
	end
	end

	EventMachine.next_tick { yield } if block_given?

	Kernel.send(:wait, state)
	end
	}

	Thread.start do
	connection.post(
	path_for(:attach),
	opts,
	excon_params
	)

	puts 'fin'
	end
	end
	end

	def run_interactive_command_in_image(ws, image, cmd, binds = {}, opts = {})
	opts = {
	Image: image,
	Entrypoint: cmd[0],
	Cmd: cmd[1..-1],
	HostConfig: {
	Binds: binds.map { \|from, to\| "#{from}:#{to}" }
	},
	Tty: true,
	OpenStdin: true
	}.merge opts

	c = Docker::Container.create(opts)

	c.attach_websocket ws do
	c.start
	end
	end

	get '/' do
	erb :index
	end

	get '/terminal' do
	if !request.websocket?
	erb :terminal
	else
	request.websocket do \|ws\|
	ws.onopen do
	run_interactive_command_in_image ws, 'busybox', ['/bin/sh']
	end
	end
	end
	end

	__END__
	@@ index
	<!DOCTYPE html>
	<html>
	<body>
	<a href="javascript:window.open('/terminal','Terminal','width=600,height=400')">open terminal</a>
	</body>
	</html>
	@@ terminal
	<!DOCTYPE html>
	<html>
	<head>
	<style>
	body {margin: 0;}
	</style>
	<script language="javascript" type="text/javascript" src="hterm_all.js"></script>
	<script language="javascript" type="text/javascript" src="https://code.jquery.com/jquery-3.1.0.js"></script>
	<script>
	hterm.defaultStorage = new lib.Storage.Memory();
	$(document).ready(function() {
	// establish WebSocket connection
	var socket = new WebSocket('ws://' + window.location.hostname + ':8080/terminal');

	socket.onopen = function() {
	// set up hterm
	var terminal = new hterm.Terminal();

	socket.onmessage = function(msg) {
	// directly print data received from the socket
	terminal.io.print(msg.data);
	};
	socket.onclose = function(msg) {
	// notify user
	terminal.io.print("\r\nConnection to server lost.");
	};

	terminal.onTerminalReady = function() {
	var io = terminal.io.push();

	// keypress hook
	io.onVTKeystroke = io.sendString = function(str) {
	if (socket.readyState == 1) {
	// prefix with 'd' to indicate data
	socket.send('d' + str);
	}
	};

	// resize hook
	io.onTerminalResize = function(cols, rows) {
	if (socket.readyState == 1) {
	// prefix with 'r' to indicate resize
	socket.send('r' + rows + ',' + cols);
	}
	};

	};

	// actually install hterm
	terminal.decorate(document.querySelector('#terminal'));
	terminal.installKeyboard();
	};
	});
	</script>
	</head>
	<body>
	<div id="terminal" style="width:100%; height:100%; position: absolute"></div>
	</body>
	</html>