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