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>

效果演示

相关推荐
理想不理想v10 分钟前
vue经典前端面试题
前端·javascript·vue.js
不收藏找不到我11 分钟前
浏览器交互事件汇总
前端·交互
YBN娜25 分钟前
Vue实现登录功能
前端·javascript·vue.js
阳光开朗大男孩 = ̄ω ̄=25 分钟前
CSS——选择器、PxCook软件、盒子模型
前端·javascript·css
minDuck30 分钟前
ruoyi-vue集成tianai-captcha验证码
java·前端·vue.js
小政爱学习!1 小时前
封装axios、环境变量、api解耦、解决跨域、全局组件注入
开发语言·前端·javascript
魏大帅。1 小时前
Axios 的 responseType 属性详解及 Blob 与 ArrayBuffer 解析
前端·javascript·ajax
花花鱼1 小时前
vue3 基于element-plus进行的一个可拖动改变导航与内容区域大小的简单方法
前端·javascript·elementui
k09331 小时前
sourceTree回滚版本到某次提交
开发语言·前端·javascript
EricWang13581 小时前
[OS] 项目三-2-proc.c: exit(int status)
服务器·c语言·前端