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，不随机生成，使用用户自定义的固定的clientIdcustomClientId: 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 sthmeta2d.setValue(pen);//return false; //表示仅执行自定义的回调函数方法//return true; //表示除了执行自定义的回调方法外，还会执行核心库方法
};//② version >= 1.0.17
meta2d.socketFn = (message, context) => {// Do sthmeta2d.setValue(pen);//return false; //表示仅执行自定义的回调函数方法//return true; //表示除了执行自定义的回调方法外，还会执行核心库方法
};//③ version >= 1.0.46
meta2d.socketFn = (message, context) => {// Do sthmeta2d.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