DIX系统此处 DIX 使用仅限于在 CamBuilder 中
DIX介绍DIX是CamBuilder中用于实时对接入数据进行处理后输出到指定目的地的系统。可以用来接入Mysql、ActiveMq，syslog等数据源中存储的数据，可以在接入这些数据源存储的数据后，利用DIX对数据进行简单处理后，输出到指定的数据源，目前支持MySql、ActiveMq等。
通过访问DIX服务器进入dip配置页面，选择JavaScript，点击立即接入按钮之后进入了dip的配置页面，在该页面进行dip的属性配置、脚本配置。
配置完成上述信息之后，点击完成并保存，一个dip便生成了，然后回到数据集成页面找到对应的dip，启动即可。
数据接入接收MySQL数据点击JavaScript,进入配置页面，在1处填入dip名字，2处的地址为宿主机地址，默认为dip系统部署机器地址, 点击下一步，填写脚本配置。
dip名称：使用英文且见名知义(最好使用驼峰命名法)。
dip的宿主机：运行该dip的服务器ip地址，也是我们的数据处理服务器。
进入如下界面，在黑窗口的run函数中编写JavaScript脚本，将获取到的数据转换成产品需要的数据结构，最后输出。
首先编写脚本获取数据，获取数据有2种方式，第一种是主动获取，第二种是被动接收，根据实际情况选择对应的获取数据方式。而每一种方式又有多种类型。
对接MySQL我们选择主动获取方式，点击输入-主动获取，选择第一项MySQL ,相应的接入MySQL的代码会自动填写在function run() 里面 ，in 为接入语句，executes为数据处理逻辑，outs处填写数据输出语句。
如下图，在1处添加接入MySQL数据源url，username，password，在2处添加查询简单的查询sql语句，查询自己需要的数据。
function run() { var MysqlJdbcAdapter = Java.type("com.uinnova.di.dicom.jdbc.MysqlJdbcAdapter"); while (true) { try { var adapter = new MysqlJdbcAdapter("jdbc:mysql://127.0.0.1:3306/database?useUnicode=true&characterEncoding=UTF-8", "root", "root"); var data = adapter.getDataByTable("select * from ..."); heartBeat.addInCount(data.size()); //executes... //outs... sleep(60000); } catch (error) { logger.error("脚本执行错误：",error); } }}
接收ActiveMq数据点击JavaScript,进入配置页面，在1处填入dip名字，2处的地址为宿主机地址，默认为dip系统部署机器地址, 点击下一步，填写脚本配置。
dip名称：使用英文且见名知义(最好使用驼峰命名法)。
dip的宿主机：运行该dip的服务器ip地址，也是我们的数据处理服务器。
进入如下界面，点击输入-被动接受，选择第一项 ,相应的接入ActiveMq 的代码会自动填写在function run() 里面 in 为接入语句，executes为数据处理逻辑，outs处填写数据输出语句。
如下图，在1处依次填入ActiveMq数据源的url,queue,username,pasword，最后一个参数为true，表示接受queue，为false表示接受topic,
URL: MQ的地址,格式为tcp://${ip}:${port},例如tcp://192.168.10.44:61616
对列名queue: 产品接收的指定队列noah_perfs.
用户名username: admin
密码password: admin
function run() { var ActivemqReceiver = Java.type("com.uinnova.di.dip.base.receiver.ActivemqReceiver"); //url, queue, username, password, queue(true) or topic(false) var receiver = new ActivemqReceiver("tcp://127.0.0.1:61616", "queue", "admin", "admin", true); startReceiver(receiver); while (true) { try { var data = receiver.getData(); if (data!=null) { heartBeat.addInCount(1); //executes... //outs... } } catch (error) { logger.error("脚本执行错误：",error); } }}
接收Syslog数据点击JavaScript,进入配置页面，在1处填入dip名字，2处的地址为宿主机地址，默认为dip系统部署机器地址, 点击下一步，填写脚本配置。
dip名称：使用英文且见名知义(最好使用驼峰命名法)。
dip的宿主机：运行该dip的服务器ip地址，也是我们的数据处理服务器。
进入如下界面，在1处点击输入-被动接受，选择第一项 ,相应的接入Syslog 的代码会自动填写在function run() 里面 in 为接入语句，executes为数据处理逻辑，outs处填写数据输出语句。
IN配置是指接收syslog告警数据必须的一些信息，根据具体的需求调研填写
依次填入Syslog数据源的url,port，protocal,
主机url：部署DIP服务端程序的主机IP
端口port：与第三方厂商syslog确认的syslog数据推送端口，建议填写大于1600的未被其他服务占用的端口，
协议protocal：与第三方厂商syslog确认进行syslog数据传输协议，可选UDP或TCP
接入syslog数据库
function run() { var SyslogReceiver = Java.type("com.uinnova.di.dip.base.receiver.SyslogReceiver"); //host, port, protocol(TCP or UDP) var receiver = new SyslogReceiver("0.0.0.0", 1501, "UDP"); startReceiver(receiver); while (true) { try { var data = receiver.getData(); logger.info("[原始数据]" + data); if (data != null) { heartBeat.addInCount(1); //executes... //outs... } } catch (error) { logger.error("脚本执行错误：", error); } }}
数据处理处理MySQL数据我们可以取出MySQL中的数据进行处理，将他们转为我们需要的格式，在进行输出。
在编写脚本数据转换的时候可以点击数据处理， 就会出现如下图所示的子菜单，可以根据接收到的数据类型（告警/性能）选择对应的菜单，脚本框中会出现对应的模板代码，如下图所示。
以JavaScript处理接入MySQL为例，准备数据接入。
样例数据：
[ { "id": "1", "sceneid": "20170109153114611633853", "kpi_key": "temperature", "kpi_value": "253" }]
如下图，1处接入MySQL数据，2处对数据进行处理，可以参考下面数据处理中的性能数据映射代码，3处把处理后的数据同样输出到另外一个MySQL中去，对其他数据源的处理可以参照此处进行处理。
数据处理后，输出到MySQL数据。
DIP代码参考如下：
function run() {var MysqlJdbcAdapter = Java.type( "com.uinnova.di.dicom.jdbc.MysqlJdbcAdapter");while (true) { try { var adapter = new MysqlJdbcAdapter( "jdbc:mysql://192.168.137.128:3306/inputDB?useUnicode=true&characterEncoding=UTF-8", "root", "root" ); var data = adapter.getDataByTable( "SELECT id,sceneid,kpi_key,kpi_value FROM c_in" ); heartBeat.addInCount(data.size()); //executes... //var javaListData = json2JavaList(data); var list = new Array(); for (var i = 0; i < data.size(); i++) { var obj = new Object(); var temp = data.get(i); obj.id = temp.get("id"); obj.sceneid = temp.get("sceneid"); obj.kpi_key = temp.get("kpi_key"); obj.kpi_value = temp.get("kpi_value"); logger.info("obj处理后数据" + obj.toString()); list.push(obj); } //logger.info("listlength="+list.length); //outs... //下列为操作数据库的几个方法，传入参数sql，执行成功返回1，执行失败返回0 //out.createTable(sql);创建表 //out.updateTable(sql); 修改表数据 //out.deleteTable(sql);删除表 //out.updateTableStructure(sql); 修改表结构 //out.selectTable(sql); 查询表 var MysqlOutCustom = Java.type( "com.uinnova.di.dip.customoutmysql.MysqlOutCustom" ); //url, username, passowrd var out = new MysqlOutCustom( "jdbc:mysql://192.168.137.138:3306/outputDB?useUnicode=true&characterEncoding=UTF-8", "root", "root" ); //传入数据，数据库表名，主键，其他列 out.out( convertJs2Java(list), "c_out", "id", "sceneid,kpi_key,kpi_value" ); heartBeat.addOutCount(list.length); sleep(60000); } catch (error) { logger.error("脚本执行错误：", error); }}}
处理activemq数据我们可以取出输入ActiveMQ中的数据进行处理，将他们转为我们需要的格式，在进行输出。
以JavaScript处理接入ActiveMQ为例，准备数据接入。
连接配置信息:
url: tcp://{ip}:{port}
用户名: username
密码: password
对列名称：inTopicName
队列数据格式: JSON格式的字符串
数据属性说明:
参数名
| 必选/可选
| 参数位置
| 参数类型
| 参数名字
| ciCode
| 必选
| 参数列表
| String
| 配置项唯一标识
| Metric
| 必选
| 参数列表
| String
| 性能数据所属的指标名称
| instance
| 可选
| 参数列表
| String
| 性能数据所属的指标实例，若无则填英文字符下划线，"_"
| Value
| 必选
| 参数列表
| String
| 性能数据的值
| timestamp
| 可选
| 参数列表
| String
| 数据采集时间,若为空则默认当前时间，时间戳格式
|
样例数据：
[ { "ciCode": "P211-E1-01", "metric": "CPU使用率", "instance": "cup0", "value": "50", "timestamp": "1500790703007" }]
如下图，1处接入MQ数据，2处对数据进行处理，3处把处理后的数据同样输出到另外一个MQ中去，对其他数据源的处理可以参照此处进行处理。
输出到ActiveMq
Dip代码参考示例：
function run() {var ActivemqReceiver = Java.type( "com.uinnova.di.dip.base.receiver.ActivemqReceiver");//url, queue, username, password, queue(true) or topic(false)var receiver = new ActivemqReceiver( "tcp://192.168.137.128:8094", "testIn123", "admin", "admin", true);startReceiver(receiver);while (true) { try { var data = receiver.getData(); if (data != null) { heartBeat.addInCount(1); //executes... var listData = JSON.parse(data); var list = new Array(); for (var i = 0; i < listData.length; i++) { var obj = new Object(); var temp = listData; obj.ciCode = temp["ciCode"]; obj.metric = temp["metric"]; obj.value = temp["value"]; obj.timestamp = temp["timestamp"]; obj.unit = temp["instance"]; list.push(obj); } //logger.info("listlength="+list.length); //outs... var mqurl = "failover://(tcp://192.168.137.138:8094)?randomize=false&timeout=5000&maxReconnectAttempts=-1"; var ActiveMqOut = Java.type("com.uinnova.di.dicom.amq.AMQProducer"); //url, 用户名，密码，topic=1或queue=2，Topic或者Queue名称，非持久化=1或持久化=2，最晚提交时间秒 var out = ActiveMqOut.getInstance( mqurl, "admin", "admin", "1", "testOut123", 2, 1 ); out.sendList(convertJs2Java(list), 1); heartBeat.addOutCount(list.length); } } catch (error) { logger.error("脚本执行错误：" + error.message); }}}
处理syslog数据我们选择发送syslog数据，Syslog消息体
属性分隔符: |
数据定义：sceneid|kpi_key|kpi_value|value|id
样例数据：20170109153114611633853|temperature|56|1
说明：syslog在发送数据时会在数据前自动添加发送时间，主机名称等内容，需要根据产品是需要该数据进行处理,实际发送数据如下所示：Feb1909:32:16 DESKTOP-PDH3O88 20170109153114611633853 | temperature|56|12
在executes... 对输入数据进行解析，获得所需要的数据格式，输出到指定的MySQL或者ActiveMq数据源中，如下图所示
数据输出输出到MySQL进入如下界面，在编写脚本数据输出的时候可以点击输出， 就会出现如下图所示的子菜单，可以根据发送方式选择对应的菜单，脚本框中会出现对应的模板代码，只需要修改一下连接信息配置参数，如下图所示。
点击输出，选择第二项MySQL ,相应的接入MySQL的代码会自动填写在function run() 里面 outs处填写数据输出语句，in 为接入语句，executes为数据处理逻辑，
如图，展示了关键处理逻辑：
1、为查询MySQL数据源所得数据，
2、对数据进行处理，
3、是一些操作数据库的函数，可以对输出数据库进行创建表，更新表结构等操作，4处填写输出到目的地MySQL的配置信息。
输出ActiveMq进入如下界面，点击 输出，选择第一项 ,相应的接入ActiveMQ 的代码会自动填写在function run() 里面 outs处填写数据输出语句，in 为接入语句，executes为数据处理逻辑。
如下图，在1处为填入参数的含义，2处为要填写参数的值。填写完成后保存dip
DIP启动保存填写完以上配置信息后，点击完成，进入该dip的保存界面，如下图所示。
然后点击保存会在 di主页看到接入javascript的dip已经存在，如下图所示。点击启动按钮，便可以获取数据了。
启动配置完dip后，点击完成，保存好，回到dip主界面，显示所有的dip列表，如下图所示，点击启动，启动一个dip。
运行刚启动时状态，已接入、已处理、待发送、已发送为0，启动一会后，如果已接入和已发送有数值，则表示dip正在传输数据。
查看日志Dip运行后点击监控按钮，进入dip详细页面，点击日志下载，查看dip运行日志。
场景接入数据源CamBuilder API调试环境实时数据接口接入第三方行业应用如需驱动特定3D场景各类信息动态变化，实现实时状态可视化展示，需使用“实时数据”接口向场景内推送数据。
CamBuilder调试环境使用介绍可以客户端中点击CB调试进入客户端离线调试环境
也可访问模模搭官网（www.3dmomoda.com），通过点击开发、在线调试进入在线调试界面。
也可以直接访问如下网址进入调试界面，下载链接: http://www.3dmomoda.com/mmdclient/script/examples/examples.html
如上图，进入调试页面后，在右侧输入自己想要调试的场景ID，点击场景预览按钮，右侧会显示场景，在左侧点击官方列表，在头顶牌子选择固定位置物体，接下来我们选择这个官方示例代码来进行场景实时接入数据的演示。
点击执行代码后，会在右侧场景中场景一个头顶牌，显示hello！我们可以利用数据接入接口接入所需要得数据，在调试代码中把数据赋值给对应的物体，达到头顶牌中的数据可以根据接入数据的变化而变化。
接入MySQL数据进入调试环境，选择官方列表中头顶牌，选择固定位置，使用如下图所示的Ajax数据对接(支持跨域请求)。
请求参数说明：
参数名
| 必选/可选
| 参数类型
| 参数说明
| 参数示例
| requestUrl
| 必选
| String
| 请求接口
| http://192.168.10.67:8090/ajax/getDbData
| username
| 必选
| String
| 数据库用户名
| root
| password
| 必选
| String
| 数据库密码
| root
| dburl
| 必选
| String
| 数据库地址
| jdbc:mysql://192.168.137.138:3306/outputDB
| sql
| 必选
| String
| 查询sql
| SELECT id , sceneid, kpi_key,kpi_value from scene_data WHERE id = 1
|
样例数据：
[ { "id": "1", "sceneid": "20170109153114611633853", "kpi_key": "temperature", "kpi_value": "253" }]
返回结构说明：
{ "state": true, "data": [ { "kpi_value": "253", "sceneid": "20170109153114611633853", "kpi_key": "temperature", "id": "1" } ]}
调试代码示例：
//**********---最后保存时间:2018-12-24 13:50:09 保存人:13824---**********// // --------------------------------------------------------- // 创建牌子，跟踪位置、设置文字、改变颜色、注册事件、显示隐藏 // --------------------------------------------------------- var ui = null; function init_balloon(res) { ui = gui.create(res); ui.trackPos(0, 2, 0); ui.setScale(0.3, 0.3); ui.setText("Button/Text", "Hello!"); ui.setImageColor("Button", Color.red); ui.setTextColor("Button/Text", Color.yellow); ui.regButtonEvent("Button", function() { console.log("click ui button"); }); }; util.download({ "url": "http://www.3dmomoda.com/mmdclient/script/examples/demos/message_button.bundle", "success": init_balloon }); // 测试显示隐藏： // util.setInterval(function(){ // if (ui != null) { // ui.show(!ui.isShow); // } // }, 1000); //设置定时器 util.setInterval(function(){ //请求参数 var requestUrl= "http://192.168.10.67:9090/ajax/getDbData"; var dburl="jdbc:mysql://192.168.137.138:3306/outputDB"; var username="root"; var password="root"; var sql="SELECT id , sceneid, kpi_key,kpi_value from scene_data WHERE id = 1"; util.download({ "url": requestUrl+"?dburl="+dburl+"&username="+username+"&password="+password+"&sql="+sql, "type":"text", "success": function(res){ ////打印返回结果 console.log(res); //json转换为table类型 var tableres = json.decode(res); // 取得自己需要的值 var kpi_value=tableres.data[0].kpi_value; console.log("kpi_value:"+kpi_value); //把结果复制给场景中头顶牌中 ui.setText("Button/Text",kpi_value); }, "error":function(error){ console.log(error) } });},3000); //每三秒
调试结果，在1处是请求数据实时渲染到场景中，2处为接口地址和请求参数，3处为通过图中方法获得请求结果，请求成功后对于返回数据可以使用标准API语法解析，获取需要的指标参数，赋值到场景对象中。
接入ActiveMq数据对于ActiveMq数据，同样采用Ajax请求获取数据源数据，支持跨域请求，请求地址可以是自己部署的ActiveMq服务器地址。
请求参数说明：
参数名
| 必选/可选
| 参数类型
| 参数说明
| 参数示例
| requestUrl
| 必选
| String
| 请求接口地址
| http://192.168.10.67:9090/ajax/getMqData
| mqurl
| 必选
| String
| ActiveMq 地址
| tcp://192.168.137.138:8094
| username
| 必选
| String
| ActiveMq 用户名
| admin
| password
| 必选
| String
| ActiveMq 密码
| admin
| chanelMode
| 可选，默认1
| String
| 订阅类型，topic=1 queue=2
| 2
| topicOrQueue
| 必选
| String
| 待接收 topic 或queue 名字
| testOut789
| timeout
| 可选，默认3000
| String
| 收到下一条消息时间，单位ms
| 3000
|
请求示例数据：
[ { "ciCode":"P211-E1-01", "metric":"CPU使用率", "instance":"cup0", "value":"50", "timestamp":"1500790703007" }]
返回结构说明：
{ "state": true, "data": "[n {n "ciCode":"P211-E1-01",n "metric":"CPU使用率",n "instance":"cup0",n "value":"50",n "timestamp":"1500790703007"n }n]n"}
调试代码示例：
// ---------------------------------------------------------// 创建牌子，跟踪位置、设置文字、改变颜色、注册事件、显示隐藏// ---------------------------------------------------------var ui = null;function init_balloon(res) { ui = gui.create(res); ui.trackPos(0, 2, 0); ui.setScale(0.3, 0.3); ui.setText("Button/Text", "Hello!"); ui.setImageColor("Button", Color.red); ui.setTextColor("Button/Text", Color.yellow); ui.regButtonEvent("Button", function() { console.log("click ui button"); });};util.download({ "url": "http://www.3dmomoda.com/mmdclient/script/examples/demos/message_button.bundle", "success": init_balloon});// 测试显示隐藏：// util.setInterval(function(){// if (ui != null) {// ui.show(!ui.isShow);// }// }, 1000); //设置定时器util.setInterval(function(){ //请求参数var requestUrl= "http://192.168.10.67:9090/ajax/getMqData"; //请求urlvar mqurl="tcp://192.168.137.138:8094"; //ActiveMq 地址var username="admin"; // ActiveMq 用户名var password="admin";//topic=1 queue=2var chanelMode="1"; // topic=1 queue=2var topicOrQueue="testOut123";//待接收 topic 或 queue var timeout="3000"; //设置收到下一条消息时间，单位ms，默认3000ms util.download({ "url": requestUrl+"?mqurl="+mqurl+"&username="+username+"&password="+password+"&chanelMode="+chanelMode +"&topicOrQueue="+topicOrQueue+"&timeout="+timeout, "type":"text", "success": function(res){ ////打印返回结果 console.log(res); //json转换为table类型 var tableres = json.decode(res); console.log("tableres : "+tableres); // 取得自己需要的值 var value=json.decode(tableres.data)[0].value; console.log( "value: "+json.decode(tableres.data)[0].value); //把结果复制给场景中头顶牌中 ui.setText("Button/Text",json.decode(tableres.data)[0].value); }, "error":function(error){ console.log(error) }});},3000); //每三秒
发布模模搭场景代码调试完成后，点击下图1处发布按钮，复制2处地址可以在浏览器中访问，本机地址是指调试场景的机器所在地址，局域网地址是该场景变化处于同一个局域网内的用户可以访问
ThingJS调试环境接入ThingJS调试环境使用介绍打开客户端，点击ThingJS调试进入ThingJS调试环境
选择右侧官方列表中的数据，点击第一项数据对接。
接入MySQL数据进入调试环境，选择官方列表中的数据，选择数据对接，使用如下图所示的Ajax数据对接(支持跨域请求)。
在1处填写接口地址，目前为CamBuilder官方提供，在2中的填写请求参数，请求参数规则如表格所示
参数名
| 必选/可选
| 参数类型
| 参数说明
| 参数示例
| username
| 必选
| String
| 数据库用户名
| root
| password
| 必选
| String
| 数据库密码
| root
| dburl
| 必选
| String
| 数据库地址
| jdbc:mysql://192.168.137.138:3306/outputDB
| sql
| 必选
| String
| 查询sql
| SELECT id , sceneid, kpi_key,kpi_value from scene_data WHERE id = 1
|
请求成功后对于返回结果可以使用标准JS语法解析，获取需要的指标参数，使用ThingJS特有的API语法，赋值到场景对象中。
调试代码示例：
/** * 说明：为模拟数据对接，ThingJS平台部署单独部署了一台服务器3dmmd.cn，模拟合作商的后端服务器 * 端口82 为websoket 接口，优势实时性好，每秒上传一个温度数值（-10 - 30 的随机数） * 端口83 为ajax接口，优势服务器压力小，每次读数的时候返回一个温度数值 （-10 - 30 的随机数） * 本例子演示如何做ajax 和websoket数据对接 */ var app = new THING.App({ url: 'models/storehouse' }); // 界面组件 var panel = new THING.widget.Panel({ name: '温度面板', hasTitle: true, }); var dataObj = { t1: '21°C', t2: '21°C', }; panel.add(dataObj, 't1').name('水温').isChangeValue(true); panel.add(dataObj, 't2').name('气温').isChangeValue(true); /********************* 以下为ajax数据对接 ********************/ // 接收服务端数据时触发事件 update = function (evt) { // ***如设置服务器的CORS，实现跨域访问。会更简单*** // ***下例采用的不设置CORS的跨域实现方案*** $.ajax({ type: "get", url: "http://192.168.10.67:9090/ajax/getDbData", data: { "dburl":"jdbc:mysql://192.168.137.138:3306/outputDB?useUnicode=true&characterEncoding=UTF-8", //mysql地址 "username":"root", //mysql 用户名 "password":"root", //mysql 密码 "sql":"select id,sceneid,kpi_key,kpi_value from scene_data where id=1",//设置收到下一条消息时间，单位ms，默认3000ms }, dataType: "jsonp", jsonpCallback: "callback", success: function (d) { console.log('拉取数据：' +d); console.log('拉取数据：' + JSON.stringify(d)); console.log('拉取数据：' + d.data[0].kpi_value); // ***将获得的数据赋值到场景中*** dataObj.t2 = d.data[0].kpi_value + '°C'; } }); }; //每1秒更新一个数据 setInterval(update, 5000);
接入ActiveMq数据进入调试环境，选择官方列表中的数据，选择数据对接，使用如下图所示的ajax数据对接(支持跨域请求)。
目前对接ActiveMq支持使用ajax方式，在1处添加请求接口地址，2处对返回数据进行解析，接口格式定义如下
调试接口请求地址: http://192.168.10.67:9090/ajax/getMqData
如进行网络部署则为服务器实际IP及端口。
请求参数
| 必选/可选
| 参数类型
| 参数说明
| 参数示例
| mqurl
| 必选
| String
| Mq地址
| tcp://192.168.137.138:8094
| username
| 必选
| Int
| ActiveMq 用户名
| 9090
| password
| 必选
| String
| ActiveMq 密码
| ws
| chanelMode
| 必选
| String
| topic=1 queue=2
| 1
| topicOrQueue
| 必须
| String
| 订阅topic或queue名字
| testOut123
| timeout
| 必须
| String
| 设置收到下一条消息时间，单位ms，默认3000ms
| 3000
|
请求数据示例：
[ { "ciCode": "P211-E1-01", "metric": "CPU使用率", "instance": "cup0", "value": "50", "timestamp": "1500790703007" }]
返回数据示例：
[{"kpi_value":"251","sceneid":"20170109153114611633853","kpi_key":"temperature","id":"1"}]
调试代码示例;
1、ajax请求数据：
/*** 说明：为模拟数据对接，ThingJS平台部署单独部署了一台服务器3dmmd.cn，模拟合作商的后端服务器* 端口82 为websoket 接口，优势实时性好，每秒上传一个温度数值（-10 - 30 的随机数）* 端口83 为ajax接口，优势服务器压力小，每次读数的时候返回一个温度数值 （-10 - 30 的随机数）* 本例子演示如何做ajax 和websoket数据对接**/var app = new THING.App({ url: 'models/storehouse'});// 界面组件var panel = new THING.widget.Panel({ name: '温度面板', hasTitle: true, });var dataObj = { t1: '21°C', t2: '21°C',};panel.add(dataObj, 't1').name('水温').isChangeValue(true);panel.add(dataObj, 't2').name('气温').isChangeValue(true);/********************* 以下为ajax数据对接 ********************/// 接收服务端数据时触发事件update = function (evt) { // ***如设置服务器的CORS，实现跨域访问。会更简单*** // ***下例采用的不设置CORS的跨域实现方案*** // 服务器返回的数据格式为 callback({"state":"success","data":29}) $.ajax({ type: "get", url: "http://192.168.10.67:9090/ajax/getMqData", data: { "mqurl":"tcp://192.168.137.138:8094", //mq地址 "username":"admin", //ActiveMq 用户名 "password":"admin", //ActiveMq 密码 "chanelMode":"1", //topic=1 queue=2 "topicOrQueue":"testOut123",// 订阅tppic名字 "timeout":"3000",//设置收到下一条消息时间，单位ms，默认3000ms }, dataType: "jsonp", jsonpCallback: "callback", success: function (d) { console.log('拉取数据：' +d); console.log('拉取数据：' + JSON.stringify(d)); console.log('拉取数据：' + JSON.parse(d.data)[0].value); // ***将获得的数据赋值到场景中*** dataObj.t2 =JSON.parse(d.data)[0].value+ '°C'; } });};//每1秒更新一个数据setInterval(update, 6000);
ws请求数据：
/*** 说明：为模拟数据对接，ThingJS平台部署单独部署了一台服务器3dmmd.cn，模拟合作商的后端服务器* 端口82 为websoket 接口，优势实时性好，每秒上传一个温度数值（-10 - 30 的随机数）* 端口83 为ajax接口，优势服务器压力小，每次读数的时候返回一个温度数值 （-10 - 30 的随机数）* 本例子演示如何做ajax 和websoket数据对接*/var app = new THING.App({ url: 'models/storehouse'});// 界面组件var panel = new THING.widget.Panel({ name: '温度面板', hasTitle: true, });var dataObj = { t1: '21°C', t2: '21°C',};panel.add(dataObj, 't1').name('水温').isChangeValue(true);panel.add(dataObj, 't2').name('气温').isChangeValue(true);/********************* 以下为websoket数据对接 ********************/// 对接自有websoket服务器var ws = new WebSocket('ws://192.168.10.67:9090/ws/testOut789');// 建立 web socket 连接成功触发事件ws.onopen = function () { console.log("websoket服务器连接成功...");};// 接收服务端数据时触发事件ws.onmessage = function (evt) { console.log(evt+''); console.log("websoket接收数据：" + toString(evt)); var s =JSON.stringify(evt.data) console.log('拉取数据ss：' + s); console.log('拉取数据：' + JSON.parse(evt.data)[0].kpi_value ); // ***将获得的数据赋值到场景中*** dataObj.t1 = JSON.parse(evt.data)[0].kpi_value + '°C';};
发布ThingJS场景代码调试完成后，点击下图1处演示按钮，2处电脑演示会弹出新的浏览器窗口，复制下图3处地址栏中的url地址给其他人就可以看到场景中的数据变化
|
0
/7 
工商网监
湘ICP备2023018690号
4393
淘帖
