Jarvis Controller

Jarvis 控制端, 查看演示项目代码

安装

npm install jarvis-controller

使用

import JarvisController from 'jarvis-controller'

const controller = new JarvisController({
  url: 'ws:127.0.0.1:3000',
  secrets: '5r9b4vto246doa9hwk55rr',
  id: 'ipad-1'
})

// 等待连接服务器
await controller.connect()

// 发送操作指令
controller.send('move', '10px')

参数说明：

| 参数名 | 说明 | 类型 | 必填 | |-----------|------------------------------------|---------|---------| | url | Jarvis 服务器地址 | string | true | | secrets | 服务器设置的密码 | string | true | | id | 控制端的唯一ID | string | false |

发送事件

你可以使用 send 方法发送事件：

controller.send(command, args)

| 参数名 | 说明 | 类型 | 必填 | |-----------|--------------------------------------------|---------|---------| | command | 指令名称 | string | true | | args | 参数对象 | number | string | object | true |

监听事件

你可以使用 on 方法监听系统事件：

controller.on('open', e => {
  console.log('已经连接到控制服务器!')
})

目前支持的事件如下：

| 事件名 | 说明 | |-----------|------------------------------------| | open | 连接到控制服务器 | | error | 连接出错 | | close | 连接断开 | | reconnect-fail | 重连失败 |

插件

目前仅支持一种插件

TouchPad

此插件为页面提供了一个移动端触控区域, 在控制端的触控区域内, 进行滑动/缩放等, 将会发送对应指令给受控端

import JarvisController, { TouchPad } from 'jarvis-controller'

const touchPadPlugin = new TouchPad({
  selector: '#touchPad', // 触控区域的选择器
  throttle: 100
})

const controller = new JarvisController({
  url: `ws:127.0.0.1:3000`,
  secrets: '5r9b4vto246doa9hwk55rr',
  id: 'ipad-1',
  plugins: [touchPadPlugin]
})

controller.connect()

| 参数名 | 说明 | 类型 | 必填 | |-----------|--------------------------------------------|---------|---------| | selector | 触控区域的选择器名称('#id') | string | true | | throttle | throttle wait 时长(default: 0) | number | false |

向受控端发送的事件及参数详情:

singletap | doubletap

| 参数名 | 说明 | 类型 | |-----------|--------------------------------------------|---------| | type | 'singletap'单击 | 'doubletap'双击 | string | | x | 单击坐标在 x 轴方向占容器的百分比, 范围 0-1 | number | | y | 单击坐标在 y 轴方向占容器的百分比, 范围 0-1 | number |

pan

| 参数名 | 说明 | 类型 | |-----------|--------------------------------------------|---------| | type | 'pan' 平移 | string | | additionalEvent | 详细分类'panleft' | 'panright' | 'panup' | 'panup'| string | | deltaX | 在 x 轴方向移动的偏移量 | number | | deltaY | 在 y 轴方向移动的偏移量 | number | | eventType | 参考下方 | number |

rotate

| 参数名 | 说明 | 类型 | |-----------|--------------------------------------------|---------| | type | 'rotate' 包含旋转和缩放 | string | | scale | 缩放倍数 | number | | rotation | 旋转的角度(deg) | number | | angle | 移动的角度 | number | | center | 中心点坐标的百分比值 { x, y } | object | | eventType | 参考下方 | number |

eventType

| 名称 | 值 | |--------------|-----| | INPUT_START | 1 | | INPUT_MOVE | 2 | | INPUT_END | 4 | | INPUT_CANCEL | 8 |

自定义插件

我们允许自定义控制端插件, 参考写法如下:

// 自定义插件 HelloWord
class HelloWord {
  constructor({ selector }) {
    this.container = document.querySelector(selector)
  }
  // init方法会接收controller, 用来发送指令
  init(controller): void {
    this.controller = controller
    this.container.addEventListener('click', () => {
      this.controller.send('hello-word')
    })
  }
}
const controller = new JarvisController({
  url: `ws:${location.hostname}:3000`,
  secrets: '5r9b4vto246doa9hwk55rr',
  id: 'ipad-1',
  plugins: [helloWorld]
})

controller.connect()

心跳检测

服务端每隔 10s 会向控制端发送 ping 事件, 控制端返回 pong, 若检测到断开连接, 则每隔 10s 尝试重连一次, 连续三次重连失败, 控制端会发送 reconnect-fail 事件给页面, 后续逻辑需要监听事件自行处理

controller.on('reconnect-fail', () => {
  console.log('controller跟server断开连接, 并尝试重连失败')
})

其他

服务端和受控端的使用方式, 可查阅下方文档

Jarvis 服务端地址

Jarvis 受控端地址

Jarvis 演示项目代码地址