socket. io 를 사용 하여 간단 한 웹 - shell (node) 만 들 기

수요
프로그램 을 쓸 때 프로그램 이나 업무 의 운행 상황 을 감시 하기 위해 많은 로 그 를 친다.현재 이러한 수요 가 있 습 니 다. 업무 수행 상황 인 일부 log 출력 또는 모든 출력 을 프론트 데스크 의 시각 화 인터페이스 에 보 여 줘 야 합 니 다.사용 자 는 페이지 에서 서로 다른 작업 을 하면 해당 하 는 실행 상황 을 직접 볼 수 있다.
구상 을 실현 하 다
기본 적 인 사고방식
현재 프로 세 스 를 감청 하고 출력 이벤트 가 있 을 때마다 프론트 데스크 톱 으로 피드백 합 니 다.
실현 도구
현재 항목 은 koa 로 쓰 여 있 습 니 다. koa + socket. io 입 니 다.
socket. io 의 공식 문서, express 등 도 유사 한 용법 입 니 다.
기본 코드
클 라 이언 트 엔 드
html 부분

...

      
  

...

...

cmd.js

/* global io,$,window */
/* eslint prefer-arrow-callback: 0 */
const elConsole = document.getElementById('console')
//  Server  
const socket = io.connect(location.host)
//       
const escapeHtml = function(html) {
  return html.replace(/&/g, '&')
    .replace(/>/g, '>')
    .replace(/

서버 엔 드
이전에 node 의 process 관련 자 료 를 찾 았 을 때 이런 말 을 발견 하면 process. on ('data',...) 을 감청 하면 됩 니 다.
그래서 인터넷 의 일부 코드 를 참고 하여 관건 적 인 부분 을 붙인다.

// app.js
const app = require('koa')()

//   ./public      
app.use(serve('./public'));
...
//     
app.use(router(app));
.....

//              app.use    
var server = require('http').createServer(app.callback()),
    io = require('socket.io')(server);

....
app.get('/', function *(next) {
  yield this.render('index', { my: 'data' });
});
....

// npm install --save socket.io
const server = require('http').createServer(app.callback())
const io = require('socket.io')(server)
//      Socket.io     
io.on('connection', function(socket){
  const output = function(msg) {
    socket.emit('output', msg.toString())
  }
  process.stdout.on('data', output)
});

//      
server.listen(1337);
console.info('Now running on localhost:1337');

해명 해 봐.
app.callback()
http. createServer () 에서 받 아들 일 수 있 는 프로그램의 인 스 턴 스 를 되 돌려 줍 니 다. 이 반환 함 수 를 Connect/Express 응용 프로그램 에 마 운 트 할 수도 있 습 니 다.
하하, 이제 큰 성 과 를 거 두 었 습 니 다. 어서 server 를 일 으 켜 기적 을 지 켜 보 세 요!
문제점 을 발견 하 다
인터페이스 에 '연결 성공' 이라는 네 개의 큰 글 자 를 제외 하고 아무것도 없습니다!터미널 을 보 세 요.
why??
터미널 전체 화면 출력 에 도 불구 하고 프로 세 스 는 데이터 이 벤트 를 감청 하지 않 았 습 니 다!왜 일 까요?

Console.prototype.log = function() {
  this._stdout.write(util.format.apply(this, arguments) + '
');
};

이 를 통 해 알 수 있 듯 이 console. log 바 텀 에서 process. stdout. write 를 호출 했 습 니 다. 이 호출 은 process 감청 의 data 사건 을 촉발 하지 않 습 니 다!
그럼 간단 합 니 다. 로그 할 때마다 process. stdout. emit ('data', msg) 를 추가 하면 됩 니 다!
좋 습 니 다. 콘 솔 로 그 를 쓰 겠 습 니 다. (가장 쉬 운 것)

// console.js

function log(msg){
  console.log(msg)
  process.stdout.emit('data', msg)
}
module.exports.log = log

function error(msg){
  console.error(msg)
  // error          
  // process.stdout.emit('data', msg)
}
module.exports.error = error

function info(msg){
  console.info(msg)
  process.stdout.emit('data', msg)
}
module.exports.info = info

그리고 app. js 에.

global.myconsole = require('./console')
...
//   
myconsole.log('test')

ps: 용법 이 많아 서 마음대로 하 세 요!결 과 를 보 겠 습 니 다.
web-shell
수요 가 해결 되 었 지만 웹 - shell 로 서 어떻게 출력 만 있 고 입력 이 없 을 수 있 습 니까?기 존의 기초 위 에 확장 을 더 하면 돼!
서버 엔 드
모든 연 결 된 클 라 이언 트 에 대해 우 리 는 대화 할 수 있 도록 셸 을 따로 열 수 있 습 니 다.

// app.js
...
const spawn = require('child_process').spawn

io.on('connection', (socket) => {
  const shell = spawn('bash')
  const output = function(msg) {
    socket.emit('output', msg.toString())
  }
  shell.stdout.on('data', output)
  shell.stderr.on('data', output)
  shell.on('close', () => {
    output('Exit')
    socket.disconnect(true)
  })
  //       
  socket.on('input', (data) => {
    shell.stdin.write(data)
  })
  socket.on('disconnect', () => {
    shell.kill('SIGKILL')
  })
  myconsole.debug('       ')
})

클 라 이언 트 엔 드
html

cmd.js

...
window.unload = function() {
  //           
  socket.emit('disconnect')
}

elCmd.addEventListener('keypress', function(e) {
  if (e.keyCode === 13) {
    const data = `${elCmd.value}`
    output(`$ ${data}`)
    socket.emit('input', `${data}
`)
    elCmd.value = ''
  }
})

효 과 는 아래 그림 과 같다.
기타
상기 예 에서 셸. stdout. pipe (process. stdout) 를 사용 하면 셸 의 출력 을 부모 프로 세 스에 전달 할 수 있 습 니 다!반대로 안 돼, 같은 유형의 대상 이 아 닌 것 같 아!
이것저것 긁 어 모 았 어 요. 아직 완벽 한 공간 이 많아 요!
예 를 들 어 인터페이스 입력 명령 이 ctrl + c 등 단축 키 에 대한 지원, 하위 프로 세 스 부모 프로 세 스 간 의 통신, 인터페이스 결 과 는 색상 이 밝 고 console. js 확장 등 을 보 여 줍 니 다!
그리고 프로 세 스. stdout. write 를 직접 감청 할 수 있 는 방법 도 있 지 않 을 까...................................................