<< 어떻게하면 성공하나요? | Home | 과학자의 히포크라테스 선서 >>

HTML5와 WebSocket기반의 Shell 커맨드 실행

HTML5 WebSocket Shell

HTML5와 WebSocket을 가지고 브라우저에 어떤 설치도 없이 SecureCRT처럼 리눅스상에서 처리되던 쉘 기능을 웹상에서 보여주는 것이 가능하다. 그래서 모바일 등 이동중에도 인터넷이 되는 어디에서나 서버 접속이 가능하게 구현할 수 있다.

좀 더 확장하자면 윈도우에서도 VNC기반에 Javascript로 잘 활용하면 웹 데스크탑 기능을 구현할 수 있어 개발 용도 및 업무 용도로 응용할 수 있는 기능으로 발전할 수 있을 거 같다. 그래서 해당 기능을 살펴보고 관련내용을 공유합니다.

1. Perl 업그레이드 및 관련 패키지 설치
$ wget http://search.cpan.org/
  CPAN/authors/id/R/RJ/RJBS/perl-5.12.3.tar.gz
$ tar xvfz perl-5.12.3.tar.gz
$ cd perl-5.12.3

$ sh Configure -de
$ make
$ make test
$ make install

$ wget http://search.cpan.org/CPAN/authors/
  id/T/TO/TODDR/IO-Tty-1.10.tar.gz
$ tar xvfz IO-Tty-1.10.tar.gz 
$ cd IO-Tty-1.10
$ perl Makefile.PL 
$ make
$ makt test
$ make install

$ wget http://search.cpan.org/CPAN/authors/id/
  A/AJ/AJWOOD/Term-VT102-0.91.tar.gz
$ tar xvfz Term-VT102-0.91.tar.gz
$ cd Term-VT102-0.91
$ perl Makefile.PL 
$ make
$ makt test
$ make install

$ wget http://search.cpan.org/CPAN/authors/id/
  M/MA/MAKAMAKA/JSON-2.51.tar.gz
$ tar xvfz  JSON-2.51.tar.gz
$ cd JSON-2.51
$ perl Makefile.PL 
$ make
$ makt test
$ make install

2. Perl기반 Websocket용 서버 설치
 - 다운로드 : https://github.com/vti/showmetheshell/tarball/master의 vti-showmetheshell-20802b1.tar.gz
$ tar xvfz  vti-showmetheshell-20802b1.tar.gz
$ cd vti-showmetheshell-20802b1
$ perl showmetheshell & // 3000포트로 데몬 뜸

3. 클라이언트 구현
3.1 WebSocket Events
- onopen: 소켓 오픈 시
var ws = new WebSocket("ws://mimul.com:3000");
ws.onopen = function() {
  log("[WebSocket->onopen]\n");
  shell.init();// 셀 초기화
}

- onmessage: 메세지 수신 시
ws.onmessage = function(e) {
  var data = $.evalJSON(e.data);

  if (data.type == 'history') {
    for (var i = 0; i < data.history.length; i++) {
      shell.updateRow(i + 1, data.history[i]);
    }
  }
  else if (data.type == 'row') {
    shell.updateRow(data.row, data.text);
  }
};

- onclose: 소켓 자원을 닫을 시
ws.onclose = function() {
  shell.close();
  $('#disconnect').html('');
  $('#container').html('Disconnected');
};

3.2 데이 송신
shell.onsend = function(message) {
  ws.send(message);
};

4. 실행 결과
- 데모 사이트 : http://mimul.com/html5/webshell/index.html
- 현재는 보안 관계상 오픈 안됨
- 크롭에서 테스트 함


[참조 사이트]



Add a comment Send a TrackBack