web端实现远程桌面控制

阐述

应着标题所说，web端实现远程桌面控制，方案有好几种，达到的效果就是类似于向日葵一样可以远程桌面，但是操作方可以不用安装客户端，只需要一个web浏览器即可实现，桌面端需写一个程序用来socket连接和执行Windows指令。

实现方案

使用webSocket实现web端和桌面端的实时TCP通讯和连接，连接后桌面端获取自己的桌面流以照片流的形式截图发送blob格式给web端，web端再接收后将此格式解析再赋值在img标签上，不停的接收覆盖，类似于快照的形式来呈现画面，再通过api获取web端的鼠标事件和键盘事件通过webSocket发送给客户端让他执行Windows事件，以此来达到远程控制桌面控制效果。

Demo实现

因为为了方便同事观看，所以得起一个框架服务，我习惯用vue3了，但大部分都是js代码，可参考改写。

html只需一行搞定。

<div>
   <img ref="imageRef" class="remote" src="" alt="">
 </div>

接下来就是socket连接，用socket库和直接new webSocket都可以连接，我习惯用库了，因为多一个失败了可以自动连接的功能，少写一点代码🤣，库也是轻量级才几k大小。顺便把socket心跳也加上，这个和对端协商好就行了，一般都是ping/pong加个type值，发送时记得处理一下使用json格式发送，如果连接后60秒后没有互相发送消息客户端就会认为你是失联断开连接了，所以他就会强行踢掉你连接状态，所以心跳机制还是必不可少的。

import ReconnectingWebSocket from 'reconnecting-websocket'
const remoteControl = '192.168.1.175'
const scoketURL = `ws://${remoteControl}:10086/Echo`
const imageRef = ref()

onMounted(() => {
  createdWebsocket()
})

const createdWebsocket = () => {
  socket = new ReconnectingWebSocket(scoketURL)
  socket.onopen = function () {
    console.log('连接已建立')
    resetHeart()
  }
  socket.onmessage = function (event) {
    // console.log(event.data)
    const objectDta = JSON.parse(event.data)
    console.log(objectDta)
    if (objectDta.type === 100) {
      resetHeart()
    }
  }
  socket.onclose = function () {
    console.log('断开连接')
  }
}

let heartTime = null // 心跳定时器实例
let socketHeart = 0  // 心跳次数
let HeartTimeOut = 20000 // 心跳超时时间
let socketError = 0 // 错误次数
// socket 重置心跳
const resetHeart = () => {
  socketHeart = 0
  socketError = 0
  clearInterval(heartTime)
  sendSocketHeart()
}
const sendSocketHeart = () => {
  heartTime = setInterval(() => {
    if (socketHeart <= 3) {
      console.log('心跳发送：', socketHeart)
      socket.send(
        JSON.stringify({
          type: 100,
          key: 'ping'
        })
      )
      socketHeart = socketHeart + 1
    } else {
      reconnect()
    }
  }, HeartTimeOut)
}
// socket重连
const reconnect = () => {
  socket.close()
  if (socketError <= 3) {
    clearInterval(heartTime)
    socketError = socketError + 1
    console.log('socket重连', socketError)
  } else {
    console.log('重试次数已用完的逻辑', socketError)
    clearInterval(heartTime)
  }
}

成功稳定连接后那么恭喜你完成第一步了，接下来就是获取对端发来的照片流了，使用socket.onmessageapi用来接收对端消息，需要转一下j