描述

最近使用node实现了一个远程桌面监控的应用，分为服务端和客户端，客户端可以实时监控服务端的桌面，并且可以通过鼠标和键盘来控制服务端的桌面。

这里因为我是用的同一台电脑，所以监控画面是这样的，当然使用两台电脑一个跑客户端，一个跑服务端才有意义。

原理

其实这个应用的功能主要分为两部分，一是实现监控，即在客户端可以看到服务端的桌面，这部分功能是通过定时截图来实现的，比如服务端一秒截几次图，然后通过socketio发送到客户端，客户端通过改变img的src来实现一帧帧的显示最新的图片，这样就能看到动态的桌面了。监控就是这样实现的。

另一个功能是控制，即客户端对监控画面的操作，包括鼠标和键盘的操作都可以在服务端的桌面真正的生效，这部分功能的实现是在electron的应用中监听了所有的鼠标和键盘事件，比如keydown、keyup、keypress，mousedown、mouseup、mousemove、click等，然后通过socketio把事件传递到服务端，服务端通过 robot-js来执行不同的事件，这样就能使得客户端的事件在服务端触发了。

实现

原理讲完，我们来具体实现一下（源码链接在这）。

实现socket通信

首先，服务端和客户端分别引入socket.io和socket.io-client, 分别初始化

服务端：

const app = new Koa();
const server = http.createServer(app.callback());
createSocketIO(server);

app.use((ctx): void => {
  ctx.body = 'please connect use socket';
});

server.listen(port, (): void => {
  console.log('server started at http://localhost:' + port);
});

//createSocketIO
const io = socketIO(server, {
    pingInterval: 10000,
    pingTimeout: 5000,
    cookie: false
  });

io.on('connect', (socket): void => {
  socket.emit('msg', 'connected');
}

客户端：

var socket = this.socket = io('http://' + this.ip + ':3000')
socket.on('msg', (msg) => {
 console.log(msg)
})
socket.on('error', (err) => {
 alert('出错了' + err)
})

这样，服务端和客户端就通过socketio建立了链接。

实现桌面监控

之后我们首先要在服务端来截图，使用screenshot-desktop这个包

const screenshot = require('screenshot-desktop')

const SCREENSHOT_INTERVAL = 500;

export const createScreenshot = (): Promise<[string, Buffer]> => {
  return screenshot({format: 'png'}).then((img): [string, Buffer] => {
    return [ img.toString('base64'), img];
  }).catch((err): {} => {
    console.log('截图失败', err);
    return err;
  })
}

export const startScreenshotTimer = (callback): {} => {
  return setInterval((): void => {
    createScreenshot().then(([imgStr, img]): void => {
      callback(['data:image/png;base64,' + imgStr, img]);
    })
  }, SCREENSHOT_INTERVAL)
}

然后通过socketio的emit来传到客户端：

startScreenshotTimer(([imgStr, img]): void => {
  io.sockets.emit('screenshot', imgStr);
});