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'), //截图受控设备返回base64
        imageBuffer: 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.x
            const y = data.y
            robot.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 沙箱的ip
        const 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 = hendler
        image.ondblclick = hendler
    </script>
</body>

</html>