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>

效果演示

相关推荐
gqkmiss4 分钟前
Chrome 浏览器 131 版本开发者工具(DevTools)更新内容
前端·chrome·浏览器·chrome devtools
Summer不秃9 分钟前
Flutter之使用mqtt进行连接和信息传输的使用案例
前端·flutter
旭日猎鹰14 分钟前
Flutter踩坑记录(二)-- GestureDetector+Expanded点击无效果
前端·javascript·flutter
Viktor_Ye20 分钟前
高效集成易快报与金蝶应付单的方案
java·前端·数据库
hummhumm22 分钟前
第 25 章 - Golang 项目结构
java·开发语言·前端·后端·python·elasticsearch·golang
_半夏曲37 分钟前
node.js、nginx、iis、tomcat针对部署方面的简述
nginx·node.js·tomcat
乐闻x1 小时前
Vue.js 性能优化指南:掌握 keep-alive 的使用技巧
前端·vue.js·性能优化
一条晒干的咸魚1 小时前
【Web前端】创建我的第一个 Web 表单
服务器·前端·javascript·json·对象·表单
Amd7941 小时前
Nuxt.js 应用中的 webpack:compiled 事件钩子
前端·webpack·开发·编译·nuxt.js·事件·钩子
生椰拿铁You1 小时前
09 —— Webpack搭建开发环境
前端·webpack·node.js