Nodejs 第六十八章(远程桌面)

远程桌面

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

应用场景

  1. 远程桌面
  2. 远程服务器操作
  3. 云游戏

环境准备

python环境安装

www.python.org/downloads/

c++ 环境安装

visualstudio.microsoft.com/zh-hans/tha...

全局依赖

sh 复制代码
npm install node-gyp -g

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

项目依赖

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

代码编写

nodejs端

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

js 复制代码
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

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>

效果演示

相关推荐
桂月二二40 分钟前
探索前端开发中的 Web Vitals —— 提升用户体验的关键技术
前端·ux
hunter2062062 小时前
ubuntu向一个pc主机通过web发送数据,pc端通过工具直接查看收到的数据
linux·前端·ubuntu
qzhqbb2 小时前
web服务器 网站部署的架构
服务器·前端·架构
刻刻帝的海角2 小时前
CSS 颜色
前端·css
浪浪山小白兔3 小时前
HTML5 新表单属性详解
前端·html·html5
lee5764 小时前
npm run dev 时直接打开Chrome浏览器
前端·chrome·npm
2401_897579654 小时前
AI赋能Flutter开发:ScriptEcho助你高效构建跨端应用
前端·人工智能·flutter
limit for me4 小时前
react上增加错误边界 当存在错误时 不会显示白屏
前端·react.js·前端框架
浏览器爱好者4 小时前
如何构建一个简单的React应用?
前端·react.js·前端框架
qq_392794484 小时前
前端缓存策略:强缓存与协商缓存深度剖析
前端·缓存