使用 SDM 拦截器和 DP 自定义协议解析

dp-kit 是一个 SDM 的拓展包，已内置支持，可以对 DP 按照协议规则进行序列化和反序列化。当设备 DP 上报时，触发 dpDataChange 事件，SDM 模型监听到该事件，并从左到右遍历调用 interceptors 拦截器，拦截器执行完成后将结果通过 context 发送到调用 useProps 的组件中。

如内置的 dp-kit 拦截器，根据 protcols 解析器，遍历 dpState 中的每一项 dpCode，如果定义了解析器，则会由解析器进行反序列化处理。dp-kit 执行的流程图如下：

现在有一个需求，beacon 设备不会上报 DP，只接受 DP 下发，所以面板需要将下发的 DP 记录一份到云端，在下次进入面板时从云端恢复状态。下面利用 DP 拦截器来实现该功能：

请使用 SDM 面板模版进行本教程学习

先来看一下 SDM 支持的拦截器类型，如下代码所示：

const lamp = new SmartDeviceModel({
  interceptors: {
    response: {
      onBluetoothAdapterStateChange: [],
      onDeviceInfoUpdated: [],
      onDeviceOnlineStatusUpdate: [],
      onDpDataChange: [],
      onNetworkStatusChange: [],
    },
    request: {
      publishDps: [],
    },
  },
})

onBluetoothAdapterStateChange: 当设备蓝牙状态变更时
onDeviceInfoUpdated: 当设备信息变化时
onDeviceOnlineStatusUpdate: 当设备上下线时
onDpDataChange: 当设备 DP 上报时
onNetworkStatusChange: 当网络状态变化时
publishDps: 当面板 DP 下发时

这里我们需要的是 publishDps 拦截器，开始编写代码：

import { PublishDpsInterceptor } from '@ray-js/panel-sdk';
import { mapDpCode2Dps } from '@ray-js/panel-sdk/lib/sdm/interceptors/dp-kit/core/mapDpCode2Dps';
import { saveDevProperty } from '@ray-js/ray';

const key = 'sdm-dev-dp-props';

export const devPropInterceptor: PublishDpsInterceptor = ctx => next => (dpState, options) => {
  // ctx.instance 是 SDM 实例，getDevInfo 可获取到 devInfo
  // mapDpCode2Dps 用来将 dpCode 转为 dpId
  const value = JSON.stringify(mapDpCode2Dps(dpState, ctx.instance.getDevInfo()));
  
  console.log(`[devPropInterceptor] 存入cloud`, key, value);

  // 调用接口，保存到云端，关联到devId
  saveDevProperty({
    devId: ctx.instance.getDevInfo().devId,
    bizType: 0,
    propertyList: JSON.stringify([
      {
        code: key,
        value,
      },
    ]),
  }).then(() => {
    // 调用 next 函数，会向后执行后续的拦截器中间件
    next(dpState, options); // 后续中间件，如下发
  });
};

这里注意到中间件是一个高阶函数，执行 next 方法后才会向后执行，如果不调用 next 方法，会在当前拦截器执行完成后停止，即不会下发 DP 到设备。

编写好拦截器代码后，将拦截器配置到 lamp SDM，代码如下：

const lamp = new SmartDeviceModel({
  interceptors: {
    request: {
      publishDps: [devPropInterceptor],
    },
  },
})

由于需求需要面板下发 DP 后立即响应，beacon 设备不会上报 DP 状态，所以需要配置 dp-kit 拦截器，并启用 immediate 模式:

import { createDpKit } from '@ray-js/panel-sdk/lib/sdm/interceptors/dp-kit';

export const dpKit = createDpKit({
  sendDpOption: {
    immediate: true, // 启用 immediate 模式，下发后会立即响应，无需等待设备上报
  },
});

const lamp = new SmartDeviceModel({
  interceptors: {
    request: {
      // 这里增加配置 dpKit.publishDps 
      publishDps: [dpKit.publishDps, devPropInterceptor],
    },
  },
})

如果配置了 immediate 模式，拦截器执行到 dpKit.publishDps 时，会模拟触发一个 DP Change 事件，让面板进行更新。

beacon 设备本身不会上报，但在虚拟设备开发阶段，虚拟设备本身还会上报，所以在启用 immediate 模式后，会出现面板下发 DP 后响应 2 次的情况。现在利用 onDpDataChange 拦截器实现忽略设备上报，编写代码如下：

import { OnDpDataChangeInterceptor } from '@ray-js/panel-sdk';

export const ignoreDpChangeInterceptor: OnDpDataChangeInterceptor = ctx => next => data => {
  // @ts-ignore
  if (data.__from__ === 'dp-kit') {
    console.log(`[ignoreDpChangeInterceptor] 立即触发`);
    return next(data);
  } else {
    console.log(`[ignoreDpChangeInterceptor] 忽略设备上报`);
  }
};

代码逻辑十分简单，data对象中有一个隐藏属性 __from__, 如果值是 dp-kit 表示该次执行来自 SDM 如 immediate 触发的更新。这里需要理解到 next 函数的作用，next 函数会向后执行拦截器，如果不执行 next 函数则不会执行 props 更新。

配置到 SDM 拦截器

const lamp = new SmartDeviceModel<SmartDeviceSchema>({
  interceptors: {
    response: {
      // 加入 dp-kit 响应解析拦截器
      ...dpKit.interceptors.response,
      // dpKit.onDpDataChange 先处理完成 dp 协议，然后判断来源如果是设备，就忽略
      onDpDataChange: [dpKit.onDpDataChange, ignoreDpChangeInterceptor],
    },
    request: {
      publishDps: [dpKit.publishDps, devPropInterceptor],
    },
  },
})

照明设备通常有很多复杂协议的 DP，如音乐律动 DP，下面以 beacon 照明设备的音乐律动 DP 为例说明：

音乐灯 DP 协议如下：

类型：raw : AAAABBCCDD；
AAAA：8bit:0000 0000 最高位:0表示直接输出，1表示渐变； BB：H（色度：0-360） CC：S (饱和：0-100 ） DD：V (明度：0-100)

示例：{"13":"0000DC6464"}

编写音乐 DP 协议器：

import { Transformer } from '@ray-js/panel-sdk/lib/protocols/lamp/interface';
import { decimalToHex, generateDpStrStep } from '@ray-js/panel-sdk/lib/utils';

type IMusicData = {
  mode: number;
  h: number;
  s: number;
  v: number;
};

class MusicFotmatter implements Transformer<IMusicData> {
  defaultValue: IMusicData;
  uuid: string;
  constructor(uuid = 'music_data_raw', defaultValue = null) {
    // 首次进入面板的默认值
    this.defaultValue = {
      mode: 0,
      h: 220,
      s: 100,
      v: 100,
    };
    this.uuid = uuid;
    if (defaultValue) {
      this.defaultValue = defaultValue;
    }
  }

  // 反序列化为对象，可在面板代码中读取具体属性
  parser(value: string) {
    const { length } = value;
    if (length !== 10) {
      console.warn('数据有问题，解析失败', value);
      return this.defaultValue;
    }
    const step = generateDpStrStep(value);
    return {
      mode: step(4).value, // 4个字符
      h: step(2).value, // 2个字符
      s: step(2).value, // 2个字符
      v: step(2).value, // 2个字符
    };
  }

  to16(value, length = 4) {
    return decimalToHex(value, length);
  }

  // 序列化为可下发的字符串
  formatter(data: IMusicData) {
    const { mode, h, s, v } = data;
    return `${this.to16(mode, 4)}${this.to16(h, 2)}${this.to16(s, 2)}${this.to16(v, 2)}`;
  }
}

配置到 dp-kit:

// map对象，声明 music_data_raw 对应的解析器
const protocols = {
  music_data_raw: new MusicFormatter('music_data_raw'),
};

export const dpKit = createDpKit<SmartDeviceSchema>({
  protocols, // 配置到 dp 协议规则
  sendDpOption: {
    immediate: true,
  },
});

// dpKit.onDpDataChange 中包含了对设备上报来的 raw 字符串序列化逻辑
// dpKit.publishDps 中包含了对面板下发的对象反序列化为 raw 字符串的逻辑
const lamp = new SmartDeviceModel<SmartDeviceSchema>({
  interceptors: {
    response: {
      ...dpKit.interceptors.response,
      onDpDataChange: [dpKit.onDpDataChange, ignoreDpChangeInterceptor],
    },
    request: {
      publishDps: [dpKit.publishDps, devPropInterceptor],
    },
  },
})

🎉 恭喜你已经了解如何使用 SDM dp-kit 实现拦截器和自定义 dp 协议！
有任何问题可以联系 Tuya MiniApp Team

反馈