Node.js 实现远程桌面监控的方法步骤

作者：服务小站时间：2026-10-23 09:12:39浏览：587

本文介绍基于 Node.js 的远程桌面监控方案，分为服务端与客户端。通过 screenshot-desktop 定时截图并经由 Socket.io 传输 Base64 图片实现画面同步，利用 Electron 监听鼠标键盘事件，结合 Robot.js 在服务端执行操作，完成远程桌面控制与尺寸自适应。

Node.js 远程桌面监控概述

描述

近期使用 Node.js 开发了一款远程桌面监控应用，架构包含服务端与客户端两部分。客户端能够实时获取服务端的桌面画面，并支持通过鼠标和键盘对服务端桌面进行远程操控。

Node.js 远程桌面监控概述

由于测试环境为同一台电脑，监控画面效果如和所示。实际应用中，通常使用两台电脑分别运行客户端和服务端，以体现远程监控的真实价值。

远程监控与控制原理

原理

该应用的核心功能分为监控与控制两部分。监控功能旨在让客户端实时查看服务端桌面，主要通过定时截图实现：服务端按设定频率（如每秒多次）截取屏幕图像，并通过 Socket.io 推送至客户端；客户端通过动态更新 img 元素的 src 属性，逐帧显示最新图片，从而呈现动态桌面效果。

控制功能则允许客户端的操作在服务端生效。在 Electron 应用中，监听所有鼠标和键盘事件（如 keydown、keyup、keypress、mousedown、mouseup、mousemove、click 等），并通过 Socket.io 将事件数据发送至服务端；服务端利用 robot-js 库解析并执行相应事件，从而实现客户端操作对服务端桌面的实际控制。

Socket.io 通信实现

实现

原理阐述完毕后，接下来进行具体代码实现（源码链接见文末）。

实现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)
})

通过上述初始化，服务端与客户端之间便建立了基于 Socket.io 的连接通道。

桌面监控功能实现

实现桌面监控

在监控实现中，首先需在服务端进行屏幕截图，这里使用 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)
}

随后，通过 Socket.io 的 emit 方法将截图数据发送至客户端：


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

客户端接收到图片数据后，将其设置为 img 元素的 src 属性（此处为 Base64 编码的图片 URL）：


 <img 
  class="screenshot" 
  :src="screenshot"
/>


data () {
 return {
  screenshot: ''
 }
}


socket.on('screenshot', (data) => {
 this.screenshot = data
})

至此，基础的桌面监控功能已实现，读者可参考此思路进行尝试，实现过程并不复杂。

然而，该方案存在一个细节问题：需获取服务端桌面的尺寸，并据此调整客户端显示图片的大小，以确保画面比例正确。

解决此细节使用的是 get-pixels 库，该库可读取本地图片文件的宽高等信息。具体做法是先将图片写入本地临时文件，再读取该文件以获取屏幕尺寸数据。


interface ScreenSize {
  width: number;
  height: number;
}

function getScreenSize(img): Promise<ScreenSize> {
  const imgPath = path.resolve(process.cwd(), './tmp.png');
  fs.writeFileSync(imgPath, img);
  return new Promise((resolve): void => {
    getPixels(imgPath, function(err, pixels): void {
      if(err) {
        console.log("Bad image path")
        return
      }
      resolve({
        width: pixels.shape[0],
        height: pixels.shape[1]
      });
    });
  })
}

获取到尺寸信息后，通过 Socket.io 传递给客户端：


getScreenSize(img).then(({ width, height}) => {
  io.sockets.emit('screensize', {
    width,
    height
  })
});

客户端接收到尺寸数据后，据此调整图片显示大小即可。


<img 
  class="screenshot" 
  :src="screenshot"
  :style="screenshotStyle"
/>


data () {
 return {
  screenshot: '',
  screenshotStyle: '',
 }
}


socket.on('screensize', (screensize) => {
 this.screenshotStyle = {'width': screensize.width + 'px', 'height': screensize.height + 'px'}
})

经过上述处理，桌面监控功能已完善，且客户端图片尺寸与服务端屏幕尺寸保持一致。

此外还需注意一个细节：获取到的图片尺寸为物理像素，而客户端 CSS 设置的 px 为设备无关像素，因此需除以设备像素比（dpr）才能得到正确的 px 值。由于目前仅在 Mac 环境下测试，此处直接除以 2 处理。

远程控制功能实现

实现远程控制

代码编写至此，客户端的 Electron 应用已能实时显示服务端桌面画面（至于输入 IP 的弹窗、electron-vue 及 TypeScript 配置等与核心逻辑无关的细节，此处不再展开）。

接下来重点实现远程控制，主要包含监听事件、传递事件和执行事件三个环节。

首先定义传输事件的格式：


interface MouseEvent {
  type: string;
  buttonType: string;
  x: number;
  y: number;
}

interface KeyboardEvent {
  type: string;
  keyCode: number;
  keyName: string;
}

鼠标事件（MouseEvent）：type 字段表示鼠标事件类型，具体值包括 mousedown、mouseup、mousemove、click、dblclick；buttonType 字段表示按键类型，值为 left 或 right；x 和 y 字段表示具体的坐标位置。

键盘事件（KeyboardEvent）：type 字段表示键盘事件类型，具体值包括 keydown、keyup、keypress；keyCode 字段表示键盘码；keyName 字段表示按键名称。

接下来在客户端监听相关事件：


<img 
  class="screenshot" 
  :src="screenshot"
  :style="screenshotStyle"
  @mousedown="handleMouseEvent"
  @mousemove="handleMouseEvent" 
  @mouseup="handleMouseEvent"
  @click="handleMouseEvent"
  @dblclick="handleMouseEvent"  
/>


window.onkeypress = window.onkeyup = window.onkeydown = this.handleKeyboardEvent

通过 Socket.io 将监听到的事件数据传递至服务端：


 handleKeyboardEvent (e) {
  this.socket && this.socket.emit('userevent', {
   type: 'keyboard',
   event: {
    type: e.type,
    keyName: e.key,
    keyCode: e.keyCode
   }
  })
 },
 handleMouseEvent (e) {
  this.socket && this.socket.emit('userevent', {
   type: 'mouse',
   event: {
    type: e.type,
    buttonType: e.buttons === 2 ? 'right' : 'left',
    x: e.clientX,
    y: e.clientY
   }
  })
 },

服务端接收事件数据后，使用 robot-js 库执行对应操作：


const { Mouse, Point, Keyboard } = require('robot-js');

interface MouseEvent {
  type: string;
  buttonType: string;
  x: number;
  y: number;
}

interface KeyboardEvent {
  type: string;
  keyCode: number;
  keyName: string;
}

export default class EventExecuter {
  public mouse;
  public keyboard;
  public constructor(){
    this.mouse = new Mouse();
    this.keyboard = new Keyboard();
  }

  public executeKeyboardEvent(event: KeyboardEvent): void {
    switch(event.type) {
      case 'keydown':
        this.keyboard.press(event.keyCode);
        break;
      case 'keyup':
        this.keyboard.release(event.keyCode);
        break;
      case 'keypress':
        this.keyboard.click(event.keyCode);
        break;
      default: break;
    }
  }

  public executeMouseEvent(event): void {
    Mouse.setPos(new Point(event.x, event.y));
    const button = event.buttonType === 'left' ? 0 : 2
    switch(event.type) {
      case 'mousedown':
        this.mouse.press(button);
        break;
      case 'mousemove':
        break;
      case 'mouseup': 
        this.mouse.release(button);
        break;
      case 'click': 
        this.mouse.click(button);
        break;
      case 'dblclick': 
        this.mouse.click(button);
        this.mouse.click(button);
        break;
      default: break;
    }
  }

  public exectue(eventInfo): void {
    console.log(eventInfo);
    switch (eventInfo.type) {
      case 'keyboard':
        this.executeKeyboardEvent(eventInfo.event);
        break;
      case 'mouse':
        this.executeMouseEvent(eventInfo.event);
        break;
      default: break;
    }
  }
}

至此，桌面监控与远程控制的客户端和服务端逻辑，以及两端通信机制均已实现。整体思路清晰，但细节较多。有兴趣的读者可下载源码运行测试，或按此思路自行实现，具有一定的实践价值。

源码链接

remote-monitor-server

remote-monitor-client

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。

作者最新文章

Java和JavaScript应用场景对比：企业级后端 vs Web前端与Node.js

2026-11-04 16:42:01

JavaScript模块化开发入门：CommonJS与ES Module的区别

2026-11-03 23:31:34

怎么创建并运行第一个js文件

2026-11-03 21:49:02

JavaScript运行环境怎么搭建？Node.js官方下载与安装教程

2026-11-03 20:03:04

NestJS 集成 TypeORM 或 Prisma 实现数据库持久化操作

2026-11-03 18:56:13