本文介绍基于 Node.js 的远程桌面监控方案，分为服务端与客户端。通过 screenshot-desktop 定时截图并经由 Socket.io 传输 Base64 图片实现画面同步，利用 Electron 监听鼠标键盘事件，结合 Robot.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
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。