socket.on('screensize', (screensize) => {
this.screenshotStyle = {'width': screensize.width + 'px', 'height': screensize.height + 'px'}
})
至此已经实现了桌面监控，并且图片尺寸和服务端屏幕的尺寸是一致的。
这里还有一个细节，就是获取到的图片大小是物理像素，而客户端设置的px是设备无关像素，也就是要除以dpr才是px的值。这里需要获取dpr，因为目前只是在mac下用，所以直接除以2了。
实现远程控制
代码写到这里，客户端的electron应用中已经可以实时显示服务端的桌面了。（当然像输入ip的弹框，以及electron-vue和typescript等和主要逻辑无关的细节就不展开了。）
接下来我们要实现远程控制，也就是监听事件，传递事件，执行事件这几部分。
首先我们定义一下传递的事件的格式：
interface MouseEvent {
type: string;
buttonType: string;
x: number;
y: number;
}interface KeyboardEvent {
type: string;
keyCode: number;
keyName: string;
}
鼠标事件MouseEvent，type为鼠标事件的类型，具体的值包括mousedown、mouseup、mousemove、click、dblclick，buttonType指的是鼠标的左键还是右键，值为 left 或 right，x和y是具体的坐标。
键盘事件KeyboardEvent，type为键盘事件的类型，具体的值包括keydown、keyup、keypress，keyCode为键盘码，keyName为键的名字。
接下来我们要在客户端监听事件：
<img
class="screenshot"
:src="screenshot"
:style="screenshotStyle"
@mousedown="handleMouseEvent"
@mousemove="handleMouseEvent"
@mouseup="handleMouseEvent"
@click="handleMouseEvent"
@dblclick="handleMouseEvent"
/>
window.onkeypress = window.onkeyup = window.onkeydown = this.handleKeyboardEvent通过socekt把事件传递到服务端
handleKeyboardEvent (e) {
this.socket && this.socket.emit('userevent', {
type: 'keyboard',
event: {
type: e.type,
keyName: e.key,
keyCode: e.keyCode
}
})
},
handleMouseEvent (e) {
this.socket && this.socket.emit('userevent', {
type: 'mouse',
event: {
type: e.type,
buttonType: e.buttons === 2 ? 'right' : 'left',
x: e.clientX,
y: e.clientY
}
})
},然后在服务端把事件取出来执行，执行事件使用的是robot-js：
const { Mouse, Point, Keyboard } = require('robot-js');interface MouseEvent {
type: string;
buttonType: string;
