Nodejs 第六十八章（远程桌面）

远程桌面

远程桌面（Remote Desktop）是一种技术，允许用户通过网络远程连接到另一台计算机，并在本地计算机上控制远程计算机的操作。通过远程桌面，用户可以在不同地点的计算机之间共享屏幕、键盘和鼠标，就像他们坐在远程计算机前一样。

应用场景

远程桌面
远程服务器操作
云游戏

环境准备

python环境安装

https://www.python.org/downloads/

c++ 环境安装

https://visualstudio.microsoft.com/zh-hans/thank-you-downloading-visual-studio/?sku=BuildTools

全局依赖

npm install node-gyp -g

因为robotjs 需要依赖于c++ node-gyp依赖python 需要通过node-gyp编译 robotjs

项目依赖

screenshot-desktop 截屏
ws 实时传输
get-pixels 获取图片大小
robotjs 操作受控设备

代码编写

nodejs端

核心思想就是截图通过ws传输，具体传输的速率可以自己控制我这里设置的一秒钟，前端收到后展示到图片上，前端点击图片的XY轴，传输给服务器服务器通过robotjs模拟操作

import screenshot from 'screenshot-desktop'
import { WebSocketServer } from 'ws'
import http from 'http'
import getPixels from 'get-pixels'
import fs from 'fs'
import path from 'path'
import robot from 'robotjs'
const createScreenshot = async () => {const image = await screenshot({ format: 'png' })return {base64: image.toString('base64'), //截图受控设备返回base64imageBuffer: image //返回buffer流}
}const server = http.createServer()
const wss = new WebSocketServer({ server }) //创建webSocket服务const getScreenSize = async () => {const { imageBuffer, base64 } = await createScreenshot()const filePath = path.join(process.cwd(), '/screenshot.png')fs.writeFileSync(filePath, imageBuffer) //将图片存入本地 一直替换return new Promise((resolve, reject) => {getPixels(filePath, (err, pixels) => {if (err) reject(err)resolve({width: pixels.shape[0], //获取图片宽高height: pixels.shape[1], //获取图片宽高base64 //返回图片base64})})})
}wss.on('connection', async (ws) => {ws.on('message',(message)=>{const data = JSON.parse(message)if(data.type === 'click'){ //监听事件const x = data.xconst y = data.yrobot.moveMouse(x,y) //点击的位置robot.mouseClick() //模拟点击事件}})setInterval(async () => {const data = await getScreenSize()ws.send(JSON.stringify(data))},1000) //一秒钟发送一次截图
})
server.listen(3000)

index.html

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>img {width: 100%;height: 100%;}* {margin: 0;padding: 0;}</style>
</head>
<img id="img" src="" alt=""><body><script>//如果你部署到服务器可以使用服务器的地址 我这里使用的windows 沙箱的ipconst ws = new WebSocket('ws://172.29.65.216:3000')const image = document.getElementById('img')ws.onmessage = (event) => {const data = JSON.parse(event.data)image.src = `data:image/png;base64,${data.base64}`image.style.width = `${data.width}px`image.style.height = `${data.height}px`}//传递事件 当然你也再加键盘什么的 我这儿举个例子const hendler = (e) => {e.preventDefault()ws.send(JSON.stringify({type:e.type,x: e.clientX, y: e.clientY}))}image.onclick = hendlerimage.ondblclick = hendler</script>
</body></html>