实时数据监听

topology 支持 mqtt、websocket 和 http 轮询 3 种方式进行实时数据监听。

如果配置过 mqtt 或 websocket 或 http,下次打开时,会自动连接。

注意:浏览器(b/s)只支持ws(wss)开头的协议,更多:mqtt通信

MQTT

  1. 设置 mqtt 连接
const params = {
  mqtt: 'url',
  mqttTopics: 'topic1/#,topoc2', // 多个主题用,分割
  mqttOptions: {
      clientId: 'string';
      username: 'string';
      password: 'string';
      // 如果clientId不为空,默认会随机重新生成一个clientId,避免连接冲突
      // 如果设置customClientId=true,不随机生成,使用用户自定义的固定的clientId
      customClientId: false;
    }
};

// 方式1
topology.connectMqtt(params);

// 方式2
topology.store.data.mqtt = params.mqtt;
topology.store.data.mqttTopics = params.mqttTopics;
topology.store.data.mqttOptions = params.mqttOptions;
topology.connectMqtt();
  1. 自动监听 mqtt 数据

topology 引擎会自动监听数据并实时刷新。只需要按照 Pen 数据格式发送数据即可。

注意:仅需要传递 id 或 tag(查找定位 Pen)及需要更新的属性。
// 修改text
{
  id: 'pen1',
  text: 'new text'
}

// 修改所有tag为'tag'的颜色
{
  tag: 'tag',
  color: 'red'
}

// 批量修改
[{
  id: 'pen1',
  text: 'new text'
},{
  tag: 'tag',
  color: 'red'
}]

在线体验:http://t.le5le.com/?id=5d4d72356025d7704b11323c

Websocket

  1. 设置 websocket 连接
const url = "url";

// 方式1
topology.connectWebsocket(url);

// 方式2
topology.store.data.websocket = url;
topology.connectWebsocket();
  1. 自动监听 websocket 数据

topology 引擎会自动监听数据并实时刷新。只需要按照 Pen 数据格式发送数据即可。

注意:仅需要传递 id 或 tag(查找定位 Pen)及需要更新的属性。
// 修改text
{
  id: 'pen1',
  text: 'new text'
}

// 修改所有tag为'tag'的颜色
{
  tag: 'tag',
  color: 'red'
}

// 批量修改
[{
  id: 'pen1',
  text: 'new text'
},{
  tag: 'tag',
  color: 'red'
}]

本地搭建 node 测试服务器:https://github.com/le5le-com/websocket-test-node
先 npm install,再运行:node index.js

http 轮询

采用 http 轮询的方式是及其不建议的,反复的轮询会导致流量与性能损耗。
请求方式固定为 get ;若想要传参给后端,自行进行 url 拼接然后赋值给 http 属性。

  1. 设置 url , 打开连接
const url = "/test"; // 可访问的 http
topology.store.data.http = url;
topology.store.data.httpTimeInterval = 500; // 轮询间隔时间, 默认 1000
topology.connectHttp();
  1. 自动监听 http 数据
    topology 引擎会自动监听数据并实时刷新。只需要按照 Pen 数据格式发送数据即可。
    数据格式参照上方 mqtt 或 ws。
注意:仅需要传递 id 或 tag(查找定位 Pen)及需要更新的属性。

示例 json (与 http 接口返回数据格式相同):

[
  {
    "id": "le5le",
    "background": "#f40"
  }
]

解析自定义数据格式

当数据格式不是引擎可识别的 Pen 数据格式,支持自定义函数解析

// 方式1:直接设置socket回调函数
topology.socketFn = (message, topic) => {
  // Do sth

  topology.setValue(pen);
};

// 方式2:socket回调函数js保存到图纸数据
// data = {...}
data.socketCbJs = `
  // params: e - the message
  // params: topic - mqtt 有,ws 和 http 是空串
  constole.log(e, topic);
  // Do sth.
  topology.setValue(pen);
`;
// 自动监听
topology.open(data);

// 或
topology.store.data.socketCbJs = `
  // params: e - the message
  // params: topic - mqtt 有,ws 和 http 是空串
  constole.log(e, topic);
  // Do sth.
  topology.setValue(pen);
`;
// 手动监听
topology.listenSocket();

发送数据

当连接成功后,可以获取 mqtt.js client 或 websocket 客户端

// 仅连接成功后有效

topology.mqttClient.publish("event", "data");

topology.websocket.send("data");

消息通信

  1. 配置 websocket 或 mqtt 协议

    这里以 mqtt 协议为例,在 topology 编辑器画布的通信面板中填写 MQTT 的 url 地址和 Topics,其他可按需配置。

  1. 选择图元,获取图元的 id 或标签

选中节点,点击数据面板,复制节点的 id/tag。

  • id:唯一;
  • tag:用于一组图元的属性批量修改。

  1. 服务器发送数据

发送带有 id/tag 的 json 数据,其他属性按需添加。

{
  "id": "73c3bcdb",
  "text":"hello topology!"
}
// 或
{
  "tag": "topology",
  "text":"hello topology!"
}

状态

多个状态的自由切换。
适用场景:开关的断开,闭合;图片的切换,动变静,静变动等。

  1. 将多个状态组合成一个组合。
const showChild = 0;
topology.combine(pens, showChild); // 若组合成状态,showChild 必填

官网示例:

组合成功后,只显示其中一个子节点

  • 图片功能示例
  1. 消息通信更改状态 在前一小节消息通信的基础上,服务器发送如下的 json.
{
  "id": "6e402f9c",
  "showChild": 1
}

示例图纸:http://t.le5le.com/?id=620215dad84658ad4f8c07e5 示例解决方案:https://t.le5le.com/?id=6318527c288d77e4cee1a1bd

演示视频【开关的断开与闭合如何快速实现】:https://www.bilibili.com/video/BV1i44y1376U?spm_id_from=333.999.0.0

绑定变量

@topology/core 1.1.14 @topology/chart-dirgram 1.0.10

对于实际的场景而言,后端通常是不知道画笔的 id 或 tag 的,它们只关注于某个变量的值变化,那么前端可以将某个属性绑定在某个变量上,后端发过来变量的值时,再去更改绑定了该变量的画笔的对应属性即可。
这套新规则与默认规则同时存在,而 解析自定义数据格式 的优先级更高,它存在的话,即默认规则与绑定变量均失效。

单属性绑定单变量

通常来说,单属性绑定单变量的场景已经足够了,核心库也只对这种情况的场景做了特殊处理。
重点在于 pen.form 属性的配置使用, key 即绑定的画笔属性名, dataIds 中的 dataId 即与后端绑定的变量 id ,用来标识后端发过来的数据。注意:单属性绑定单变量,dataIds 一定是个对象,不可是长度为 1 的数组

示例如下:

const pen = {
  name: "rectangle",
  text: "矩形",
  x: 100,
  y: 100,
  width: 100,
  height: 100,
  form: [
    {
      key: "text",
      dataIds: {
        dataId: "d-3-a-001",
        // name: "户数",   // 非必要
      },
      // ... 官网还有一些特殊的业务属性,无须关注
    },
  ],
};
topology.addPen(pen);

// topology.doSocket(
//   JSON.stringify([
//     {
//       dataId: "d-3-a-001", // 变量标识
//       value: 80, // 值
//     },
//   ])
// );

数据示例

{
  "dataId": "d-3-a-001", // 变量标识
  "value": 80 // 值
}

单属性绑定多变量

这种场景使用较少,需要自行实现 pen.onBinds 生命周期函数,目前官方仅仅实现了 echarts 中 dataY 单属性对于多变量的绑定,即 echarts 类型的画笔已经实现了 onBinds 生命周期函数。
关于 echarts 数据更新,可查阅文档
echarts 的变量绑定,虽核心库没有严格控制 key ,但官网严格要求 key 是 dataY 。dataIds 在单属性绑定多变量的情况下,一定是数组;dataId 标识后端变量,name 标识 echarts.option 的具体某个分类,或时间轴情况下的某条线。

示例如下:

const pen = {
  name: "echarts",
  x: 100,
  y: 100,
  width: 400,
  height: 300,
  externElement: true,
  disableAnchor: true,
  echarts: {
    option: {
      xAxis: {
        type: "category",
        data: ["电流", "户数", "电压"],
      },
      yAxis: {
        type: "value",
      },
      series: [
        {
          data: [820, 932, 901],
          type: "line",
        },
      ],
    },
    max: 5000,
    replaceMode: 1,
  },
  form: [
    {
      key: "dataY", // 必须是 dataY
      dataIds: [
        {
          dataId: "d-3-b-001", // 标识后端变量
          name: "户数", // 标识 echarts 的某条线或某个分类
        },
        { dataId: "d-3-b-002", name: "电压" },
        { dataId: "d-3-b-003", name: "电流" },
      ],
    },
  ],
};
topology.addPen(pen);

数据示例

[
  { "dataId": "d-3-b-001", "value": 80 },
  {
    "dataId": "d-3-b-002",
    "value": 60
  }
]

官网使用

官网的使用在选中单画笔,右侧数据面板,数据 Tab 下,数据模块。

  1. 可新增一个表单项,也可以在现有表单项上进行绑定变量。注意:属性名即 key,关联画笔的某个属性

  1. 绑定变量后,会打开一个定时器,通过 http 轮询的方式定时请求,用来做到实时数据监听变化。

Echarts 绑定多变量

此处仅分析几种情况,若有更多情况,欢迎讨论!
折线图与柱状图类似,下文讨论的折线图也适用于柱状图。

  1. 单折线图,分类值局部替换,即 x 轴数量是永远不变的。
    即 x 轴的每个分类绑定一个变量,但 x 轴的值显然是不可重复的,用 name 作为分类的唯一标识。

  1. 多折线图,x 轴是时间类型,一条线代表一种分类,实时数据向后追加。
    与单折线图的操作类似,仅仅需要勾选对话框标题处的实时数据即可。

  2. 单饼图,与单折线图类似,它不存在 x 轴是时间类型的情况,只有分类。
    与单折线图的操作类似,开始时拖入一个饼图即可。

示例图纸:http://t.le5le.com/?id=629038410d3f8c6ce36e9955

演示视频【绑定变量】:https://www.bilibili.com/video/BV1Yd4y1D7ys?spm_id_from=333.999.0.0