【乐吾乐2D可视化组态编辑器】数据通信

External Player - 哔哩哔哩嵌入式外链播放器

乐吾乐2D可视化组态编辑器地址：https://2d.le5le.com/  

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

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

注意

浏览器（b/s）只支持ws(s)开头的协议。mqtt开头协议是c/s下使用的，不能用于浏览器。

MQTT

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

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

// 方式2
meta2d.store.data.mqtt = params.mqtt;
meta2d.store.data.mqttTopics = params.mqttTopics;
meta2d.store.data.mqttOptions = params.mqttOptions;
meta2d.connectMqtt();

Copy

Websocket

const url = "url";

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

// 方式2
meta2d.store.data.websocket = url;
meta2d.connectWebsocket();

Copy

HTTP

const url = "/test"; // 可访问的 http
meta2d.store.data.http = url;
meta2d.store.data.httpTimeInterval = 500; // 轮询间隔时间, 默认 1000
meta2d.store.data.httpHeaders = {}; // 请求头设置
meta2d.connectHttp();

//新版
meta2d.store.data.https[i].http = url;
meta2d.store.data.https[i].method="POST"|"GET"; //设置请求方式 版本1.0.26以上支持
meta2d.store.data.https[i].httpTimeInterval = 500; // 轮询间隔时间, 默认 1000
meta2d.store.data.https[i].httpHeaders = {};
meta2d.connectHttp();

Copy

监听数据

Meta2d.js会自动监听数据并实时刷新。后台只需按照格式发送数据即可。

// 修改text
{
  id: 'pen1',
  text: 'new text'
}

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

// 修改绑定变量数据
{
  dataId: 'xxx',
  value: 'red'
}

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

Copy

发送数据

当连接成功后，可以获取 mqtt.js 、websocket 客户端或http发送数据

// 仅连接成功后有效

// mqtt
meta2d.mqttClient.publish("event", "data");
// websocket
meta2d.websocket.send("data");
// http
fetch(url, {
    method: 'post',
    body: JSON.stringify(data),
    headers: {
      'Content-Type': 'application/json'
    }
});

Copy

解析自定义格式数据

当数据格式不是Meta2d.js可识别的数据格式时，可自定义解析

// 方式1：直接设置socket回调函数
//① version < 1.0.17 
meta2d.socketFn = (message, topic) => {
  // Do sth
  meta2d.setValue(pen);
  
  //return false; //表示仅执行自定义的回调函数方法
  //return true; //表示除了执行自定义的回调方法外，还会执行核心库方法
};

//② version >= 1.0.17
meta2d.socketFn = (message, context) => {
  // Do sth
  meta2d.setValue(pen);
  
  //return false; //表示仅执行自定义的回调函数方法
  //return true; //表示除了执行自定义的回调方法外，还会执行核心库方法
};

//③ version >= 1.0.46
meta2d.socketFn = (message, context) => {
  // Do sth
  meta2d.setValue(pen);
  
  //return false; //表示仅执行自定义的回调函数方法
  //return true; //表示除了执行自定义的回调方法外，还会执行核心库方法
  /*let newMessage = fn(message); //伪代码，对message数据转化
  return newMessage; //将新的message数据代入到核心库处理。新的message需要满足“监听数据”里的格式
  */
};

// 方式2：socket回调函数js保存到图纸数据
// data = {...}
//① version < 1.0.17
data.socketCbJs = `
  // params: e - the message
  // params: topic - mqtt 有，ws 和 http 是空串
  constole.log(e, topic);
  // Do sth.
  meta2d.setValue(pen);
  
  //return false; //表示仅执行自定义的回调函数方法
  //return true; //表示除了执行自定义的回调方法外，还会执行核心库方法
`;
// 自动监听
meta2d.open(data);

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

  //return false; //表示仅执行自定义的回调函数方法
  //return true; //表示除了执行自定义的回调方法外，还会执行核心库方法
`;
// 手动监听
meta2d.listenSocket();

//② version >= 1.0.17
data.socketCbJs = `
  // params: e - the message
  // params: context:{
  //         meta2d: meta2d对象,
  //         type:通信类型,
  //         url:通信地址,
  //         topic:mqtt-topic mqtt 有，ws 和 http 是空串
  //         }
  constole.log(e, context);
  // Do sth.
  meta2d.setValue(pen);
  
  //return false; //表示仅执行自定义的回调函数方法
  //return true; //表示除了执行自定义的回调方法外，还会执行核心库方法
`;
// 自动监听
meta2d.open(data);

// 或
meta2d.store.data.socketCbJs = `
  // params: e - the message
  // params: context:{
  //         meta2d: meta2d对象,
  //         type:通信类型,
  //         url:通信地址,
  //         topic:mqtt-topic mqtt 有，ws 和 http 是空串
  //         }
  constole.log(e, topic);
  // Do sth.
  meta2d.setValue(pen);

  //return false; //表示仅执行自定义的回调函数方法
  //return true; //表示除了执行自定义的回调方法外，还会执行核心库方法
`;
// 手动监听
meta2d.listenSocket();


//③ version >= 1.0.46
data.socketCbJs = `
  // params: e - the message
  // params: context:{
  //         meta2d: meta2d对象,
  //         type:通信类型,
  //         url:通信地址,
  //         topic:mqtt-topic mqtt 有，ws 和 http 是空串
  //         }
  constole.log(e, context);
  // Do sth.
  meta2d.setValue(pen);
  
  //return false; //表示仅执行自定义的回调函数方法
  //return true; //表示除了执行自定义的回调方法外，还会执行核心库方法
  /*
    let newMessage = fn(JSON.parse(message)); //伪代码，对数据进行转化
    return newMessage; //将新的message数据代入到核心库处理。新的message需要满足“监听数据”里的格式
  */
`;

Copy