乐吾乐实时数据监听
topology 支持 mqtt、websocket 和 http 轮询 3 种方式进行实时数据监听。
注意：浏览器（b/s）只支持ws（wss）开头的协议，更多:mqtt通信
MQTT
- 设置 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();
- 自动监听 mqtt 数据
topology 引擎会自动监听数据并实时刷新。只需要按照 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
- 设置 websocket 连接
const url = "url";
// 方式1
topology.connectWebsocket(url);
// 方式2
topology.store.data.websocket = url;
topology.connectWebsocket();
- 自动监听 websocket 数据
topology 引擎会自动监听数据并实时刷新。只需要按照 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 属性。
- 设置 url , 打开连接
const url = "/test"; // 可访问的 http
topology.store.data.http = url;
topology.store.data.httpTimeInterval = 500; // 轮询间隔时间, 默认 1000
topology.connectHttp();
- 自动监听 http 数据
topology 引擎会自动监听数据并实时刷新。只需要按照 Pen 数据格式发送数据即可。
数据格式参照上方 mqtt 或 ws。
示例 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");
消息通信
配置 websocket 或 mqtt 协议
这里以 mqtt 协议为例，在 topology 编辑器画布的通信面板中填写 MQTT 的 url 地址和 Topics,其他可按需配置。
- 选择图元，获取图元的 id 或标签
选中节点，点击数据面板，复制节点的 id/tag。
- id：唯一；
- tag：用于一组图元的属性批量修改。
- 服务器发送数据
这里推荐使用国产开源 emqx mqtt 服务器,MQTT url 地址可填写：wss://broker.emqx.io:8084/mqtt
发送带有 id/tag 的 json 数据，其他属性按需添加。
{
"id": "73c3bcdb",
"text":"hello topology!"
}
// 或
{
"tag": "topology",
"text":"hello topology!"
}
状态
多个状态的自由切换。
适用场景：开关的断开，闭合；图片的切换，动变静，静变动等。
- 将多个状态组合成一个组合。
const showChild = 0;
topology.combine(pens, showChild); // 若组合成状态，showChild 必填
官网示例:
组合成功后，只显示其中一个子节点 
- 图片功能示例
- 消息通信更改状态 在前一小节消息通信的基础上，服务器发送如下的 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 下，数据模块。
- 可新增一个表单项，也可以在现有表单项上进行绑定变量。注意：属性名即 key，关联画笔的某个属性
- 绑定变量后，会打开一个定时器，通过 http 轮询的方式定时请求，用来做到实时数据监听变化。
Echarts 绑定多变量
此处仅分析几种情况，若有更多情况，欢迎讨论！
折线图与柱状图类似，下文讨论的折线图也适用于柱状图。
- 单折线图，分类值局部替换，即 x 轴数量是永远不变的。
即 x 轴的每个分类绑定一个变量，但 x 轴的值显然是不可重复的，用 name 作为分类的唯一标识。
多折线图，x 轴是时间类型，一条线代表一种分类，实时数据向后追加。
与单折线图的操作类似，仅仅需要勾选对话框标题处的实时数据即可。单饼图，与单折线图类似，它不存在 x 轴是时间类型的情况，只有分类。
与单折线图的操作类似，开始时拖入一个饼图即可。
示例图纸：http://t.le5le.com/?id=629038410d3f8c6ce36e9955
演示视频【绑定变量】：https://www.bilibili.com/video/BV1Yd4y1D7ys?spm_id_from=333.999.0.0